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

    (1)盒子模型包含了:内容(content)外边距(margin)内边距(padding)边框(border)

HTML + CSS 一些概念杂谈(1)

    (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"]

         HTML + CSS 一些概念杂谈(1)

            伪类选择器

         HTML + CSS 一些概念杂谈(1)

            伪元素选择器

         HTML + CSS 一些概念杂谈(1)

            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选择器的优先级运算:

       HTML + CSS 一些概念杂谈(1)

        注:如果优先级相同时,就近原则,也就是后写的会覆盖先写的样式;

 

 

相关文章: