1.CSS的特性
1.1CSS的层叠性
CSS的层叠性，也就是说后来设置的样式会层叠（覆盖）之前的样式，层叠性的前提示CSS的选择器的优先级相同。
1.2CSS的继承性
CSS的继承性是指，子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承，比如：文字相关字体大小、颜色、字体样式、行高、鼠标样式等。盒子相关的样式都不能继承，比如：宽高、背景色、边距、浮动、绝对定位等。
�1.3CSS的特殊性（优先级）
CSS的特殊性，定义CSS样式时，经常出现两个或更多规则应用在同一元素上，那么谁的优先级更高呢，这就是CSS的特殊性。
比较CSS的优先级的时候：
1、首先比较行内样式，行内样式优先级最高。如果嵌入样式和行内样式同时设置样式时，行内样式优先级最高。
2、其次是内嵌样式的优先级比较：
内嵌样式的，ID选择器对应的样式优先级最高。
其次是Class样式
再次是标签选择器样式，
再次是通配符选择器设置的样式
后面是继承的样式，
最后是浏览器默认的样式。
结论：1.继承的样式要大于默认的样式
2.通配符选择器的样式的优先级比继承样式的优先级要高。
3.标签的选择器的优先级要高于通配符选择器的优先级。
4.类选择器的样式的优先级要高于标签选择器的样式的优先级。
5.id选择器的优先级高于 类选择器的优先级
6.行内样式的选择器的优先级高于id选择器的优先级。
复合选择器的样式优先级核算：
复合选择器的优先级根据四个层次来算，首先是行内最高。
其次，比较所有的id选择器的个数，个数多的为高。
再次比较类选择器的个数，个数多的为高，
最后比较标签选择器的个数，个数多的为高。
2.CSS标签模式设置display属性
display可以控制标签的显示模式。
display：none | inline | block | inline-block
继承性：无
display值的解释：
none：此元素不被显示，在文档中被移除。
block：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
inline：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素
inline-block：按行内标签进行排版，但是可以设置宽高，而且高度可以影响行高。
注意：
1.display改变标签的模式，行内转块级，块级转行内。
2.通过CSS隐藏HTML标签
通过设置Display为none，那么可以让这整个标签在页面中移除掉。
对比一下：
/*display: none;*/ /*直接把当前标签从页面中直接移除了，不影响页面的布局*/
visibility: hidden;/*这个只是不显示，但还是占用页面的空间*/
案例3：行内块元素设置
宽高边距独占行
行内元素：X左右边距 不独占
块级元素：√ 上下左右 独占
行内块元素：√ 左右 不独占
行内元素不能设置宽高，只能通过他的内容来撑开他的宽度和高度。如果你设置了宽高是不会影响行内元素的显示的。
3.CSS的颜色表示
RGB：red，green，blue三元素叠加组成不同颜色。
语法：color: rgb(33,33,33);
取值：0-255，也可以用百分比：0% - 100%
十六进制是另外一种写法：
Color:#3333333;
十六进制也是rgb的表示方法另外一种写法而已
�4.长度单位
绝对长度单位：
cm：厘米，mm：毫米，in：英寸，pc：派卡（Picas），相当于我国新四号铅字的尺寸。都不常用，了解即可。
相对长度单位：
px：像素点，像素就是显示器显示的一个点。
em：1em等于当前的字体大小，例如：当前元素的字体大小为16px，那么1em = 16px。
单位之间的关系：1in = 2.54cm = 25.4 mm = = 96px
p { width: 1in; height:20px; }
在PC时代主要以px为主。在移动web时代主要以：em、rem、pw、ph、百分比等来做布局的设置。
相对单位解释：像素是相对单位。不同平面尺寸可以是相同的分辨率，也就相同的像素大小，对应的实际的尺寸可能不同。例如以下，iphone和pc电脑相同的屏幕分辨率下，对应点的大小不同。
网友评论