08_CSS之JD实战

CSS初始化

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; } /*防止拖动*/
img {border:0; vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙*/
table { border-collapse:collapse; }
body {
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff
}
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}
a{color:#666; text-decoration:none; }
a:hover{color:#C81623;}
h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;font-size:100%;}
s,i,em{font-style:normal;text-decoration:none;}
.col-red{color: #C81623!important;}

/*公共类*/
.w {  /*版心 提取 */
    width: 1210px;margin:0 auto;
}
.fl {
    float:left
}
.fr {
    float:right
}
.al {
    text-align:left
}
.ac {
    text-align:center
}
.ar {
    text-align:right
}
.hide {
    display:none
}

常用的小标签和css

S del 删除线
I em 倾斜
U ins 下划线
字体加粗 font-weight: 700;
让字体不加粗: font-weight:normal;
字体倾斜: font-style:italic; 基本不用
字体不倾斜： font-style:normal;
不下划线不删除线: text-decoration: none;
定位： position：static; 静态定位约等于标准流
浮动的不浮动: float:none; | none | left | right
定位的不定位: position: static; |absolute | relative | fixed

网页稳定：

ｗidth 和height 最稳定
　　其次 padding
　　最后才考虑margin

浮动

正常流 : normal ，浮动流： flow
浮动定位都会脱标 out of flow
浮动目的：可以让多个块级元素放到一行上。
Float: left | right | none;

清除浮动

清除浮动：根据情况需要来清楚浮动。
清除浮动的目的：就是为了解决父盒子高度为0 的问题。
清除浮动：

额外标签法
Overflow: hidden 触发 bfc 模式就不用清楚浮动
伪元素
写法一：

    .clearfix:after {
          content:””;
          visibility:hidden;  
          display:block; 
          height:0;
          clear:both;
     }
    .clearfix{
      zoom:1;
    }

写法二：双伪元素

        .clearfix:before,.clearfix:after{
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }

清除浮动：真正的叫法闭合浮动

鼠标样式

Cursor: pointer 鼠标变成小手
Cursor: default; 小白(默认的箭头)
Cursor : move; 移动，可拖拽
Cursor : text ; 文本输入

网页布局：

给一个盒子：宽度高度背景边框位置

圆角矩形

border-radius: 7px 7px 7px 0;

Border-radius: 左上右上右下左下；顺时针

宽度剩余法、高度剩余法

稳定性最好的就是盒子本身的高度和宽度了,我们优先考虑这个。因此,很多情况下,我们会考虑利用高度剩余法,宽度剩余法来做,而不是padding和margin。其次，我们才考虑padding ，因为padding也可以看做特殊的盒子高度和宽度，最后我们再用margin来做。因为margin会有边距合并的问题。

z-index 层级 div 层

只有定位的盒子（除了static）才有z-index,也就是只有position(除static外)的盒子设置z-index才生效
　　如果几个盒子都是定位(static除外)，他们默认的z-index是0，最后的一个盒子在上面

定位position: relative;提高层级

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 300px;
            border: 1px solid #cccccc;
            float: left;
            margin-left: -1px;
        }
        .box:hover{
            border: 1px solid #f40;
            /*改为相对定位后，z-index的层级就提高了*/
            position: relative;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

如果都是position: relative;呢?

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 300px;
            border: 1px solid #cccccc;
            float: left;
            margin-left: -1px;
            /*position: relative;时z-index默认为0*/
            position: relative;
        }
        .box:hover{
            border: 1px solid #f40;
            /*z-index提高层级*/
            z-index: 1;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>