CSS样式：盒子模型、选择器

一、样式的种类：

①行内样式   style="样式属性1：样式值;样式属性2：样式值2;"

②内部样式

③：外部样式

 支持多种外部样式引用

三种样式同时对同一元素处理时，行内样式>内部样式=外部样式 就近原则

二、盒子模型（元素特性） display

①块级盒子：对宽度、高度、对齐方式等支持，独占一行，例如div，h1-h6，p，ul，li等 display: block

②内联级盒子：对宽度、高度、对齐方式等不支持，不独占一行，（在其内设置高度、宽度、对齐方式等对它不起作用）例如span，a等 display: inline

③内级块联盒子：对宽度、高度、对齐方式等支持，不独占一行，例如img，input等 display: inline-block

④弹性盒子：布局重点 display: flex，一个父级元素如果设置成弹性盒子，其子元素默认始终横向布局（不管元素宽度之和是否超过父级元素，最终都能放进去）

盒子区域（由里到外）：内容区、填充区、边缘区、外边距区

内容区：width、height(默认对内容区起作用)

填充区：padding：以上为开始，顺时针旋转，没有对称；padding-top、padding-right、padding-bottom、padding-left

边缘区：border 复合属性，三个方面（边框样式：border-style、边框颜色：border-color、边框宽度：border-width），四个方向

外边距区：margin 以上为开始，顺时针旋转，没有对称；在水平方向可以使用auto达到水平居中，表示与其它盒子之间的距离

设置盒子大小：box-sizing: content-box(默认) border-box，width、height对整个盒子设置

三、选择器：基本选择器、伪元素选择器、伪类选择器

1、基本选择器（8种）：元素选择器、属性选择器、class选择器、id选择器、包含选择器、子选择器、兄弟选择器、选择器组合

①元素选择器：E{} *{}:对所有元素都起作用

②属性选择器：E[attr=value]{} ^=前缀值（以它为开头） $=后缀值（以它为结尾） *=包含值 =等值

③class选择器：.class值{} 元素选择器和class选择器可以双维度寻找元素

④id选择器： #id值{} 元素选择器和id选择器可以双维度寻找元素

⑤包含选择器：selector1 selector...{} 找的是所有满足的元素

⑥子选择器：selector1>selector2...{} 找的是某一级元素

⑦兄弟选择器：selector1~selector2{} 找同一级别元素（拥有公共父级元素的元素们）中后面的元素

⑧选择器组合：selector1,selector2...{} 切记不要约省选择器

2、伪元素选择器

在普通选择器的后面添加对应关键字来完成特定的功能

①第一个字母：div::first-letter 块级元素

②首行：div::first-line 块级元素

英文不换行：

1）加连接符-

2）word-break: break-all 裂开 keep-all 保持完整

③往前加东西 div:: before 内联级元素 需要配合content使用来指定需要插入的内容

④往前加东西 div:: after 内联级元素 需要配合content使用来指定需要插入的内容

3、伪类选择器

①结构性伪类选择器 selector:nth-child(n) 正序 只认数字

1）n可以是数字，从1开始，当n=1时，等价于selector:first-child，都是找第一个元素；last-child是最后一个元素

2）n可以是表达式，例如：2n+1，n从0开始，分别为1，3，5...

3）n可以是偶数even，奇数odd

selector:nth-last-child(n) 逆序，对上述均适用，n=1时，相当于last-child

selsctor:nth-of-type(n) 和nth-child类似，nth-last-of-type first-of-type last-of-type 既认数字也认属性

二者区别： ul li:nth-child(3) 选择的 li元素所在的父元素下的第3个子元素，且该元素是li元素 即：3

ul li:nth-of-type(3) 选择的 li元素所在的父元素下的第3个li元素 即：4

<ul>
        <p>1</p>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

②UI状态伪类选择器

1）:link 控制未访问时的显示效果

2）:hover 悬停状态，鼠标悬停和划过时的显示效果，适用于所有标签

3）:focus 焦点状态，主要用在文本框输入文字时使用

4）:checked 选中状态

5）:visited 访问过后的显示效果

6）:active 控制按钮被点击时的显示效果。当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；

link 与 visited 在样式文件中的顺序任意，相互之间没有影响。 而focus， hover，active这这三个的顺序有要求，乱放后可能会出现显示的效果与预想的不同，正常顺序为:focus -> :hover -> :active

link代表为访问链接的样式，所以只要是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。

visited代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式

hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，而将其放在focus前，则当鼠标滑过时显示的时focus的属性，因为其特性被覆盖了。

active 代表元素被激活时的样式，也就是元素被按下时的样式，如果:active选择器与 :focus , :hover 调换位置，则显示的效果也会不同，因为排在后面的样式，会覆盖前面的样式。

注：当我们单击元素时，会同时触发:active和:focus，最后将只能看到了:focus的效果 (鼠标是否松开都一样，将都只能看到)

③其它伪类选择器 not() 排除 eg: ul li:not(.java):not(.php) 排除多个

选择器优先级：

1）选择器越长（越准确）优先级越高

2）优先级高低 id选择器>class选择器>元素选择器

3）同级别长度下，css代码按照顺序执行，后面覆盖前面样式（同一样式覆盖，不同样式叠加）