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,"5b8b4f53";
    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 的问题。

• 清除浮动：

1. 额外标签法

2. Overflow: hidden   触发 bfc 模式 就不用清楚浮动

3. 伪元素
   写法一：

    .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;提高层级

• 如果都是position: relative;呢?

作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/1618ce873017