css复习笔记（一）----选择器 盒模型

css复习笔记（一）

css叫做层叠样式表 负责给html结构增添样式

一、css书写位置

1.内联样式表，style一般写在header里

<header>
	<style>
		css代码
	</style>
</header>

2.内联样式表 也叫做元素样式表 写在元素的style里面 不用选择器。

3.外部样式表 将css代码写在独立的css文件中 使用link元素在header里面链接到HTML文件中使用，是使用的最多的方法

二、选择器

选择器种类i

1.元素选择器 ：元素名{ }
2. id选择器：#+id{}

3.类选择器 ： .+class类名

4.通配符选择器：*选择全部元素（很少用到）

5.属性选择器 ：选中具体的属性

6.伪类选择器 ：hover 根据鼠标移动上去的状态。 active：鼠标按下的状态。 link：超链接为访问状态 。 visited：超链接访问过的状态

7.伪类选择器：before after 写法::before ::after

选择器组合

并且———— .加点

后代元素———— 空格

子元素———— > 大于符号

相邻兄弟元素 ———— +加号

兄弟元素 ———— ~

多个选择器用逗号隔开

三、css权重（层叠）

css是层叠样式表

声明冲突：同一样式 多次应用到同一个元素

层叠就是解决声明冲突的过程 浏览器自动处理（权重计算）

1.比较重要性 重要性从高到低 ！Importent样式>作者样式表>浏览器默认样式表

2.比较特殊性，总体规则看选择器 选择器选中的范围越小 越特殊，等级越高

具体规则：通过选择器计算出一个四位数（xxxx）

*千位：如果是内联样式记做1，否则记做0*

*百位：将选择器中所以ID选择器的数量*

*十位：等于选择器中，类选择器，属性选择器，伪类选择器的数量*

*个位：等于选择器中所以元素选择器，伪元素选择器的数量*

*注意个位数不是逢十进一，256进一*

3.比较远次序

代码写在后面的会覆盖前面的代码 如果重要性已经比较出来了就不用源次序了

爱恨法则：link>visited>hover>active

四、css继承

继承是指子元素会继承父元素的某些css属性

通常和字体相关的属性都可能被继承

五、css属性值计算

页面渲染是一个元素依次渲染的过程，顺序按照页面文档的属性目录结构进行

渲染元素的前提条件：该元素的所有css属性必须有值

一个元素从一个属性都没有值到所有属性都有值得计算过程叫做属性的计算过程

1.确定声明值 参考样式表中没有冲突的声明 作为css属性

2.层叠冲突表，对有冲突的声明是哟层叠规则（权重） 确定css属性

3.使用继承 对仍然没有的值 使用继承 继承父元素的值

4.使用默认值

特殊的两个css取值：

inherit手动（强制继承父元素的属性）

initial ：初始值 将该属性设置成为默认值

六、盒模型

box：盒子 每个元素在页面中会生成一个矩形区域

盒子类型

1.行盒：display：inline的元素

2.块盒： display：block的元素

行盒在页面中不换行 块盒在页面中独占一行

具体的行盒和块盒规则看我HTML文章中的解释规则

盒子的组成

从内到外：

1.内容 content

包括width height 设置的是内容的宽高，内容部分通常叫做整个盒子的**内容盒 content-box

2.填充padding

盒子边框到盒子内容的距离（内边距）padding-left，padding-right padding-top，padding-bottom

3.边框 border

4.外边距 margin

盒模型应用

1.改变宽高范围

默认情况下width会自动生成内容盒宽高，需要手动设置border-box

2.改变背景覆盖范围

默认情况下背景覆盖边框盒，可以跳过background-clip进行修改

3.溢出处理

手动设置宽高不合理时，可以看见内容。overflow处理内容溢出后边框处理方式 hader隐藏溢出部分用xy控制溢出部分滚动条，auto会自动出现

4，断词规则（换行的时候）一般浏览器会自动处理

word-break，会影响文字在什么位置被截断

Normal。Cjk在文字之间进行截断。其他字符在单词位置截断

break-all：所有字符在文字处截断。

keep-all：所有文字都在单词内截断，可以英文，中文就一行，会在空格处截断

5空白处理

同一个文本框比如一行文字太多溢出显示不下出现…

text-overflower：ellipse溢出部分使用圆点代替…

行盒的盒模型

常见的行盒就是包含具体内容的元素

特点：

1行盒子沿着内容繁生，内容到哪里盒子到哪里

2.行盒不能设置宽高，只能使用字体的大小，边框行高字符类型来间接调整行盒的宽高

3.内边距（填充区）水平方向有效 ，垂直方向只影响背景 ，不会占用实际空间

4.边框border水平方向有效，垂直方向只影响背景 不会占用实际空间

5.外边距padding也是一样的

空白折叠发生在行盒内部或者行盒之间

可替换元素和非可替换元素

大部分元素，页面上显示的结果，取决于元素内的内容，称为非可替换元素

少部分元素，页面上显示的内容取决于元素的属性，称为可替换元素

如，img，video，audio

一般情况非可替换元素均为行盒，类似于行块盒，所有边框都生效，