CSS经验

最新推荐文章于 2022-06-18 14:08:45 发布

叡

最新推荐文章于 2022-06-18 14:08:45 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/marklua/article/details/42413579

版权

1、复选框与文字的偏移问题
一般情况下，复选框的小方框会与文字偏差2px，如下所示：
请输入图片描述
为了解决该问题，需要在页面（不能再单独的CSS中写）上添加vertical-align:-2px;

<label title="笑话"><input name="vip0" type="checkbox" value="" style="vertical-align:-2px" />&nbsp;笑话</label>

效果如下：
请输入图片描述

2、png图片在IE8及以下的IE浏览器中出现黑边（对opacity动态操作时）
主要原因：IE8以下的浏览器bug，动态修改透明度，就会出现黑边问题。
解决方案：
（1）设置容器的background-color背景颜色
（2）给容器加一个zoom:1;
IE修改透明度，不是通过css属性，而是通过filter滤镜，所以想要理解这个bug，就要从filter滤镜上找原因。filter作用于一个对象时，这个对象必须是有形体，也就是必须是layout，而IE存在一个很特殊的属性：hasLayout ，这个属性可以赋予容器成layout，hasLayout这个属性有些诡异，你无法通过直接写css启动，而必须通过javascript启动，其实还有一种方法可以启动，就是使用特殊的css属性，变相将hasLayout启动，这个css属性就是 zoom （其他的属性比如display:inline-block、float:left等也行，而只有zoom没什么副作用）

3、背景自适应
（1）让背景图片和网页内容都浮动，背景图片在最底下即可！

<!--背景图片-->
<div id="bodybg">   
     <img src="images/body_bg.png" class="stretch" alt="" />   
</div>
<!--背景图片 end-->

<!--ajc-wrapper-->
<div class="ajc-wrapper">
    <!------所有网页内容----------------->
</div>
<!--ajc-wrapper end-->

**CSS设置**
    /*--------------背景图片-------------*/
    #bodybg {   
        width: 100%;        
        position: absolute;    
        left: 0px;    
        bottom: 0px;    
        z-index: -10;   
    }   

    .stretch {   
        width:100%;     
    }  
    /*--------------背景图片 end-------------*/


    /*---------------ajc-wrapper-----------------*/
    .ajc-wrapper{
        width:100%;
        height:100%;
        overflow-y:scroll;
        position: absolute;    
            left: 0px;    
            bottom: 0px;    
            z-index: 1000;   
    }
    /*---------------ajc-wrapper end-----------------*/

（2）方法2

body {
    background: url(/img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

来自 https://gist.github.com/isayme/3ae56568728675d3fddb

4、浮动层上下所有居中

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.sty{
    position:absolute;
    width:300px;
    height:200px;
    left:50%;
    top:50%;
    margin-left:-150px;   //宽度的一半
    margin-top:-100px; //高度的一半
    background-color:#fefefe;
    border:dashed 3px #666; 
}
</style>

<body>

<div class="sty">
111
</div>
</body>
</html>

5、<!DOCTYPE html>很重要
噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了<!DOCTYPE html>,果然奏效了。
?
下面我就尽可能简洁扼要的说一下DOCTYPE的作用和用法。
1作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
? ? ? ?这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,
这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
? ? 如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的
标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。
?
2 使用：<!DOCTYPE html>
2.1?使用也很简单，就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了
2.2?jsp的话，添加在<%@ page %>的下一行。
2.3 不用区分大小写哦
?
想了解更多，可以参考：
w3c :?http://www.w3school.com.cn/tags/tag_doctype.asp
博文：http://i.wanz.im/2010/05/28/why_doctype_html/

6、Css2如何实现背景透明文字不透明
div {background: rgba(200, 54, 54, 0.5); 主要用于手机

7、页面布局
（1）两列布局，左列固定，右列可伸缩
A.左列设置向左浮动和固定宽高，右列只有高度

<style type="text/css">
.left{
    background-color: #E8F5FE;
    border: 1px solid #A9C9E2;
    float: left;
    height: 300px;
    width: 200px;
}
.right{
    background-color: #F2FDDB;
    border: 1px solid #A5CF3D;
    height: 300px;
}
</style>

<div class="left">left</div>

<div class="right">right</div>

B.若要两栏之间有间隙，则需要设置右栏的margin-left（左侧外边距）

margin-left ：左侧width + 间隙宽度

（2）三列布局，左右固定，中间可伸缩（有最小宽度）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" />
<title>3列布局</title>
<style type="text/css">
body {
    font-family: Verdana, Arial;
    margin: 0;
    font-size: 12px;
}
#container{
    /*添加外层容器，用来设置最小宽度*/
    min-width:975px; /*For FF*/
    _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"975px":"auto"); /*For IE6*/
    background-color:#fff;
    border:1px solid #33CCFF;
}

#dyhead {
    margin-bottom: 10px;
}
#dyleft {
    float: left;
    width: 200px;
    height:300px;
}
#dycenter {
    margin: 0 210px;
    height:300px;
}
#dyright {
    float: right;
    width: 200px;
    height:300px;
}
#dyfoot {
    margin-top: 10px;
    clear: both;
}
div {
    background-color: #eee;
    border: dotted 1px green;
}
</style>
</head>
<body>
<div id="container">
    <div id="dyhead">头部（3列布局，左右两栏宽度固定，中间栏自适应宽度）</div>
    <div id="dyleft">左栏固定宽度为200px</div>
    <div id="dyright">右栏固定宽度为200px</div>
    <div id="dycenter">中间自适应宽度</div>
    <!--注意这里，中间3列的div的顺序不是“左中右”，而“左右中”,中间一列写在最后-->
    <div id="dyfoot">底部</div>
</div>
</body>
</html>

8、表格
1、固定表格表头
主要方法：表格外面套一个div，用div来实现滚动（x方向超过隐藏）。同时，table必须有 border-collapse: collapse; （合并表格边框）。
把表头设置为相对定位，提高层级，使其浮在上边，不发生滚动

   <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <style type="text/css"> 
    div{ 
        overflow-y: scroll; 
        overflow-x: hidden; 
        height: 100px; 
        margin-top: 5px; 
        margin-left: 12px; 
        padding-top: -2px; 
        padding-bottom: 5px; 
        border: 3px solid #009933; 
    } 
    table{ 
        width: 100%; 
        border-color: #d2f1ac; 
        border-collapse: collapse; 
        border-top: 0px solid #ffffff; 
    } 
    .fixedtd th{ 
        position: relative; 
        z-index: 1; 
        background: #009933; 
        text-align: center; 
    } 
    </style>

9、CSS中用到的@ （媒体查询、引入字体）

媒体查询

@media screen and (max-width:980px) {
  .....
}
<link rel="stylesheet" media="screen and (orientation : portrait ) and (min-width:800px) "  href="portrait-screen.css" />

@font-face{
      font-family:FontName;
      src : url( URL );
}

@import  url("photo.css") screen and (man-width:360px);

在当前样式中按条件引入其他样式表

媒体查询能检测到的特性：
width：视口大小
height：视口大小
device-width：设备屏幕大小
device-height：设备屏幕大小
orientation：设备出于横向还是纵向
aspect-ratio：基于视口的宽高比，例如：16/9
device-aspect-ratio：基于屏幕的宽高比
color：颜色，min-color可检测设备是否拥有16位颜色
color-index：设备颜色索引表中的颜色数
monnchrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数
resolution：用来检测屏幕或打印机的分辨率
scan：电视机的扫描方式，progressive（逐行扫描）、interlace（隔行扫描）
grid：检测输出设备是网格设备还是位图设备

10、小的Tips

1）鼠标图标参数：cursor : point
2）常用链接<a href="javascript:void(0);"></a>表示不采取任何操作
3）网页收藏栏图标

<link rel="icon" href="/guodu.ico" mce_href="guodu.ico" type="image/x-icon">
ico文件尺寸不能超过255 X 255
4）表单控件输入“默认文字” （IE7、8不兼容）

<input type="text" class="form-control" placeholder="Email address" autofocus>输入框里面的默认文字
5）text-indent 文字缩进量
6）css阴影效果

IE9+ / Firefox / Chrome / Opera / Safari
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}

IE 使用滤镜（兼容老版本）

.shadow {
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

7）图片不存在的时候，显示一个默认图片

10、一行内文本超出指定宽度溢出的处理

1）一般的文字截断（适用于内联与块）：

.text-overflow {
display:block;/内联对象需加/
width:31em;
word-break:keep-all;/* 不换行 /
white-space:nowrap;/ 不换行 /
overflow:hidden;/ 内容超出宽度时隐藏超出部分的内容 /
text-overflow:ellipsis;/ 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

2）对于表格文字溢出的定义：

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 /
}
td{
width:100%;
word-break:keep-all; / 不换行 /
white-space:nowrap; / 不换行 /
overflow:hidden; / 内容超出宽度时隐藏超出部分的内容 /
text-overflow:ellipsis; / 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

3）如何设置列表(li)超出部分显示省略号：

我们常常希望列表中的内容，超过设置的长度的时候，不要撑开父元素，也不希望它直接换行；我们更愿意让其超过部分用省略号来代替。而在title标签中，置放的是完整的标题。
这样的方法新手们常常不知道该如何搞定。下面就是方法的演示。不过请注意此方法适用与IE与OP浏览器！

li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}

11、IE条件注释

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="images/StyleSheet.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="images/css.css" />
<![endif]-->
<!–[if IE]>

这里是正常的html代码

<![endif]–>

　　1，条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
　　2，IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
　　3，条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。
可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的）

<!--[if IE]>
       <h1>您正在使用IE浏览器</h1>
       <!–[if IE 5]>
           <h2>版本 5</h2>
       <![endif]-->
       <!--[if IE 5.0]>
           <h2>版本 5.0</h2>
       <![endif]-->
       <!--[if IE 5.5]>
           <h2>版本 5.5</h2>
       <![endif]-->
       <!--[if IE 6]>
           <h2>版本 6</h2>
       <![endif]-->
       <!--[if IE 7]>
           <h2>版本 7</h2>
       <![endif]-->
<![endif]-->

　　那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!–[if ls IE 5]>，当然，根据条件注释只能在IE5+的环境之下，所以<!–[if ls IE 5]>根本不会被执行。
　　lte：就是Less than or equal to的简写，也就是小于或等于的意思。
　　lt ：就是Less than的简写，也就是小于的意思。
　　gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
　　gt ：就是Greater than的简写，也就是大于的意思。
　　! ：就是不等于的意思，跟javascript里的不等于判断符相同

　　Conditional comments属于CSS hack? 条件判断属于CSS hack吗？
　　严格地说是属于CSS hack。因为就好象其他真正的css hack一样，它使得我们可以给一些浏览器赋予特殊的样式，再则它不依赖于某个浏览器的BUG来控制另外一个浏览器（的样式）。除此之外，条件判断还能用来做一些超出CSS HACK范围的事情(虽然这种情况很少发生)。
　　因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能，所以我相信它是可以被放心地使用的。当然，其他浏览器也有可能支持条件判断（到目前为止还没有），但是看起来，他们应该不会使用如<!–[if IE]>这样的语法。
　　应该如何应用条件注释
　　本文一开始就说明了，因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如：

<!--默认先调用css.css样式表-->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 如果IE浏览器版是7,调用ie7.css样式表 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 如果IE浏览器版本小于等于6,调用ie.css样式表 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->