复习-3 - 掘金

CSS 的继承性

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

CSS 的层叠性

层叠性。层叠性是一种能力，就是处理冲突的能力。

层叠性：计算权重

层叠性：就是 css 处理冲突的能力。 所有的权重计算，没有任何兼容问题

1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

权重相同时，采用就近原则:谁描述大的近，听谁的

对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：定义的CSS样式表中，谁最近，就用谁。
对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。

!important标记：优先级最高

给标签选择器加一个!important标记，此时其权重为无穷大。

注： （1）!important提升的是一个属性，而不是一个选择器 （2）!important无法提升继承的权重，该是0还是0 (3)!important不影响就近原则

盒子模型

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

标准盒模型和IE盒模型

标准W3C盒子模型的范围包括 margin border padding condent 并且content 部分不包含其他部分
IE盒子模型的范围也包括 margin border padding condent 但IE盒子模型的content 部分包含了 border 和padding

如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width

padding

padding区域也有颜色

padding就是内边距。padding的区域有背景颜色，css2.1前提下,background-color将填充所有border以内的区域。

padding小属性的写法：

	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 100px;

padding 综合属性的写法:(上、右、下、左)

padding:30px 20px 40px 100px;

border(边框)

边框有三个要素：像素（粗细）、线型、颜色。颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。

border属性是能够被拆开的，有两大种拆开的方式：

（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
（2）按方向拆开：border-top、border-right、border-bottom、border-left。

标准文档流

标准文档流的特性

（1）空白折叠现象：

无论多少个空格、换行、tab，都会折叠为一个空格。

（2）高矮不齐，底边对齐：

（3）自动换行，一行写不满，换行写。

行内元素和块级元素

行内元素：

与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
文本级标签：p、span、a、b、i、u、em。

块级元素：

霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
所有的容器级标签都是块级元素，还有p标签。
容器级标签：div、h系列、li、dt、dd。

行内元素和块级元素的相互转换

可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

浮动

float:left;
float:right;

**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了

浮动的清除

清除浮动，指的是清除浮动与浮动之间的影响

方法1：给浮动元素的祖先元素加高度

注： 如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动 只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。就是清除浮动带来的影响。

方法2：clear:both;

clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。

注：它所在的标签，margin属性失效了 原因是高度为0

方法3：隔墙法

、、、、、、、、、、、、、、、、 内墙法： 、、、、、、、、、、、、、、、、

注： 一个父亲是不能被浮动的儿子撑出高度的

定位

	position: absolute;  <!-- 绝对定位 -->

	position: relative;  <!-- 相对定位 -->

	position: fixed;     <!-- 固定定位 -->

相对定位

相对定位的用途：

1.微调元素
2.做绝对定位的参考(子绝父相)

相对定位的定位值

left：盒子右移
right：左移
top：下移
bottom：上移 PS:负数表示相反的方向。

绝对定位

绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。

格式举例：

	position: absolute;  /*绝对定位*/
	left: 10px;  /*横坐标*/
	top/bottom: 20px;  /*纵坐标*/

绝对定位的参考点（重要）

（1）如果用top描述，参考点就是页面的左上角，而不是浏览器的左上角（2）如果用bottom描述，参考点就是浏览器首屏窗口尺寸，对应的页面的左下角

以盒子为参考点

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。(子绝父相)

注(子绝父相)：（1）要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：（3）绝对定位的儿子，无视参考的那个盒子的padding：

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。

固定定位

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

5、z-index属性：

z-index属性：表示谁压着谁。数值大的压盖住数值小的。

特性： 1.属性值大的位于上层，属性值小的位于下层。 2.z-index值没有单位，就是一个正整数。默认的z-index值是0. 3.如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里后的在上面。 4.只有定位了的元素能使用z-index值。

CSS3选择器：

属性选择器

^：开头  $：结尾  *：包含

格式：

E[title] 选中页面的E元素，并且E存在 title 属性即可。
E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。

结构伪类选择器

E:first-child 匹配父元素的第一个子元素E。
E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-child(odd) 匹配奇数
E:nth-child(even) 匹配偶数
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。

E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。

E:empty 匹配没有任何子节点（包括空格等text节点）的元素E。
E:target 匹配相关URL指向的E元素。要配合锚点使用。

注： 1.盒子的编号是从1开始算起，不是从0开始算起。 2.父元素指的是：以E元素的父元素为参考 3.以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效 4.E:nth-child(n)：

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

上方代码中：

如果选择器写成li:nth-child(2)，则表示第2个 li。
如果选择器写成li:nth-child(n)，则表示所有的li。因为此时的 n 表示 0,1,2,3,4,5,6,7,8.....（当n小于1时无效，因为n = 0 也是不会选中的）
如果选择器写成li:nth-child(2n)，则表示所有的第偶数个 li。
如果选择器写成li:nth-child(2n+1)，则表示所有的第奇数个 li。
如果选择器写成li:nth-child(-n+5)，则表示前5个 li。
如果选择器写成li:nth-last-child(-n+5)，则表示最后5个 li。
如果选择器写成li:nth-child(7n)，则表示选中7的倍数。。

伪元素选择器

E::before 设置在元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
E::after 设置在元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。

注：

通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。
通过这两个属性添加的伪元素，是行内元素，需要转换成块元素才能设置宽高。

E::first-letter 设置元素 E 里面的第一个字符的样式。
E::first-line 设置元素 E 里面的第一行的样式。
E::selection 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。