day7 CSS属性中

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电脑相同的屏幕分辨率下，对应点的大小不同。