CSS规范 常见问题及解答

其实写CSS就是要记住两件事  选对人，做对事 。

1.        CSS属性之间一定要用 ; 区分。
2.        选择器 { font: font-style  font-weight  font-size/line-height  font-family;}
        使用font属性时，必须按上面顺序书写，不能更换顺序，各个属性以空格隔开。必须保留 size 和 family
        ，不然 font不起作用。
3.        text-align 只适用文本内容的水平对齐，对其他都没有作用。
4.        line-height 当行高等于盒子的高度，就可以设置文本垂直居中。
5.        链接伪类的顺序必须为 link,visited,hover,active。
6.        子元素可以继承父元素的样式，text-，font-，line-开头的，color属性。
7.        padding 会使盒子变大。解决：设置宽高的盒子，通过减掉宽高相应的padding值，来变回盒子的大
        小。(当盒子未设置宽高，padding不会影响盒子大小)
8.        margin:0 auto;无法使盒子居中。解决：盒子必须设置宽度。
9.        插入的图片移动只能用padding，margin。背景图片的移动只能用background-position。
10.        相邻块元素垂直时，他们的外边距margin会合并，并取较大的那个。解决：只给一个块元素margin。
11.        嵌套关系的块元素垂直时，如果父元素没有上内边距及边框，父元素的上外边距于子元素的上外边距会合
        并，并取较大的那个。解决：1.给父元素上边框2.给父元素上内边距3.给父元素overflow：hidden。（都
        没有定位，有定位不会出现嵌套塌陷）
12.        box-shadow 水平阴影，垂直阴影必须写。
13.        父盒子不方便给高度，如果子盒子浮动，父盒子高度就会变为0 ，从而影响其他标准流。解决：1.给浮动
        元素末尾加空标签 <div style=”clear:both”></div> 2.给父级加overflow：hidden/auto/scroll。3.
        使用伪元素after（属性参考附件）。4.使用双伪元素（属性参考附件）。
14.        父盒子有多个子盒子，子盒子有浮动，但是超过了父盒子的宽度，所以子盒子另一行排列，这时候给子盒
        子hover，margin-2px使它鼠标浮在上面时向上动2像素，这时候会出现鼠标浮到子盒子时，后面几个子
        盒子错乱。解决：不使用margin，使用position：relative，top：-2px，相对定位不管怎么动，始终占
        着位置，不影响其他子盒子。



附件：浮动清除
      1.：after伪元素属性：
       .clearfix:after {  content: "";
                               display: block;
                               height: 0;
                               clear: both;
                               visibility: hidden;  
                            }   

       .clearfix {*zoom: 1;}   /* IE6、7 专有 */
      2.双伪元素属性：
      .clearfix:before,.clearfix:after {
                                                       content:"";
                                                       display:table;
                                                     }
                               .clearfix:after {
                                                       clear:both;
                                                     }
                                .clearfix {
                                                       *zoom:1;
                                              }

CSS规范 常见问题及解答

其实写CSS就是要记住两件事  选对人，做对事 。

1.        CSS属性之间一定要用 ; 区分。
2.        选择器 { font: font-style  font-weight  font-size/line-height  font-family;}
        使用font属性时，必须按上面顺序书写，不能更换顺序，各个属性以空格隔开。必须保留 size 和 family
        ，不然 font不起作用。
3.        text-align 只适用文本内容的水平对齐，对其他都没有作用。
4.        line-height 当行高等于盒子的高度，就可以设置文本垂直居中。
5.        链接伪类的顺序必须为 link,visited,hover,active。
6.        子元素可以继承父元素的样式，text-，font-，line-开头的，color属性。
7.        padding 会使盒子变大。解决：设置宽高的盒子，通过减掉宽高相应的padding值，来变回盒子的大
        小。(当盒子未设置宽高，padding不会影响盒子大小)
8.        margin:0 auto;无法使盒子居中。解决：盒子必须设置宽度。
9.        插入的图片移动只能用padding，margin。背景图片的移动只能用background-position。
10.        相邻块元素垂直时，他们的外边距margin会合并，并取较大的那个。解决：只给一个块元素margin。
11.        嵌套关系的块元素垂直时，如果父元素没有上内边距及边框，父元素的上外边距于子元素的上外边距会合
        并，并取较大的那个。解决：1.给父元素上边框2.给父元素上内边距3.给父元素overflow：hidden。（都
        没有定位，有定位不会出现嵌套塌陷）
12.        box-shadow 水平阴影，垂直阴影必须写。
13.        父盒子不方便给高度，如果子盒子浮动，父盒子高度就会变为0 ，从而影响其他标准流。解决：1.给浮动
        元素末尾加空标签 <div style=”clear:both”></div> 2.给父级加overflow：hidden/auto/scroll。3.
        使用伪元素after（属性参考附件）。4.使用双伪元素（属性参考附件）。
14.        父盒子有多个子盒子，子盒子有浮动，但是超过了父盒子的宽度，所以子盒子另一行排列，这时候给子盒
        子hover，margin-2px使它鼠标浮在上面时向上动2像素，这时候会出现鼠标浮到子盒子时，后面几个子
        盒子错乱。解决：不使用margin，使用position：relative，top：-2px，相对定位不管怎么动，始终占
        着位置，不影响其他子盒子。



附件：浮动清除
      1.：after伪元素属性：
       .clearfix:after {  content: "";
                               display: block;
                               height: 0;
                               clear: both;
                               visibility: hidden;  
                            }   

       .clearfix {*zoom: 1;}   /* IE6、7 专有 */
      2.双伪元素属性：
      .clearfix:before,.clearfix:after {
                                                       content:"";
                                                       display:table;
                                                     }
                               .clearfix:after {
                                                       clear:both;
                                                     }
                                .clearfix {
                                                       *zoom:1;
                                              }