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选择器的优先级运算:
注:如果优先级相同时,就近原则,也就是后写的会覆盖先写的样式;