HTML + CSS 一些概念杂谈（1）

1.如何理解CSS的盒子模型：

    （1）盒子模型包含了：内容（content）、外边距（margin）、内边距（padding）、边框（border）

    （2）盒子模型还分两种：IE盒子模型 & 标准W3C盒子模型：

            W3C中的 width = content 的 width， IE中的 width = content + padding + border；

            W3C为了弥补计算困难的空缺，在CSS3中新增了一个样式 box-sizing（其中一个重要的border-box）；

             * border-box：定义了一个 width 的值以后，不论怎么加border、padding，它的width的值都不会发生改变；

2.CSS的选择器有哪些？哪些属性可以继承?哪些不可以继承？

    （1）CSS选择器：

            通用选择器：* ； 

              id选择器：#；  

              标签选择器：例：div、h1等； 

            类选择器（class）： .自己定义的名字；

            后代选择器（空格）：例：div p；

            子代选择器（>）：例：div>span；

            相邻兄弟选择器（+）：例：h1+h2（只能选择相邻的一个兄弟）；

            群组选择器（,逗号间隔）：例：div,p；

            属性选择器：例：a[target="_blank"]

         

            伪类选择器：

         

            伪元素选择器：

         

            CSS的继承特性：主要是指文本方面的继承，盒子模型相关的属性基本没有继承特性；

            例：不可继承的：width、height、display、border、margin、overflow、background等等

                      可继承的：cursor、text-align、color、font、list-style等等                

3.CSS3新增选择器和伪类选择器：

    （1）选择器：

            通用兄弟选择器（~）：例：div~p（向下选择和div相邻的所有p元素）；

    （2）伪类选择器：

            :nth-child（n）：选定指定索引值的子元素，也就是父元素下第n个子元素（从1开始检索）；

            :nth-child（odd）：奇数的子元素；

            :nth-child（even）：偶数的子元素；

            :only-child：选择父元素下唯一的子元素；

            :first-child：选择父元素下第一个子元素；

            :last-child：选择父元素下最后一个子元素；

            :nth-of-type（n）：选择父元素下第n个指定类型的子元素；

            :enabled：选择启用状态元素；

            :disabled：选择禁用状态元素；

            :checked：选择被选中的input元素（用于单选按钮或复选框）；

            :default：选择默认元素；

3. CSS选择器的优先级运算：

       

        注：如果优先级相同时，就近原则，也就是后写的会覆盖先写的样式；