前端面试（二）— css篇

（1）css 盒模型

      盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE 盒子模型

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

CSS3新增box-sizing属性

box-sizing属性，box-sizing:content-box;表示标准的盒子模型， 
box-sizing：border-box表示IE盒子模型。 

默认的情况下是标准盒子模型。

（2）margin属性与padding属性的作用范围以及条件

    1.当一个盒子没有宽度时，margin属性是没有用处的

    2.margin-top边距合并问题出现：即想让子元素的顶部距离父元素50px，但是事实上子元素顶部紧贴父元素，并且margin-top好像转移给了父元素，让父元素产生上外边距，相信大家也遇到过类似的情况，出现的条件为：

    (1) 父元素的上边距与子元素的上边距之间没有border。

    (2)  父元素的上边距与子元素的上边距之间没有非空内容。
    (3) 父元素的上边距与子元素的上边距之间没有padding。
    (4) 父元素和子元素中没有设置定位属性（除static和relative）、overflow（除visible）和display:inline-block等。

    (5) 父元素或者子元素都没有浮动。

    注意:以上条件必须都要满足才可以。那么解决此中情况的方式也很简单，只要破坏上面的一种情况就可以了。

   3.行内元素的不完全适用性

   (1) 行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的。
    (2) 行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的。
    (3) 行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。

    注:只要将inline元素设置为inline-block padding与margin就可适用了。

 （3） css可以和不可以继承的属性

       1.无继承性的属性

              1.display：规定元素应该生成的框的类型

    2.文本属性：vertical-align：垂直文本对齐;text-decoration：规定添加到文本的装饰;text-shadow：文本阴影效果;white-space：空白符的处理;

         3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

          4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attach        ment

           5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

           6、生成内容属性：content、counter-reset、counter-increment

           7、轮廓样式属性：outline-style、outline-width、outline-color、outline

           8、页面样式属性：size、page-break-before、page-break-after

           9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

        2.有继承性的属性         

            1、字体系列属性：font：组合字体；font-family：规定元素的字体系列；font-weight：设置字体的粗细；font-size：设置字体的尺寸；font-sty            le：定义字体的风格；font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体    的字母与其余文本相比，其字体尺寸更小。font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。font-size-adjust：为    某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

            2、文本系列属性：text-indent：文本缩进；text-align：文本水平对齐；line-height：行高；word-spacing：增加或减少单词间的空白（即字间    隔）；letter-spacing：增加或减少字符间的空白（字符间距）；text-transform：控制文本大小写；direction：规定文本的书写方向；color：文    本颜色

            3、元素可见性：visibility

            4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

            5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

            6、生成内容属性：quotes

            7、光标属性：cursor

            8、页面样式属性：page、page-break-inside、windows、orphans

            9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-r            ange、stress、richness、、azimuth、elevation

    （4） css权重

        1. 行内样式，指的是html文档中定义的style

        2. ID选择器

        3. 类，属性选择器和伪类选择器

        4. 元素和伪元素

        注：权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1。