day23

一、伪选择器

1.选择器

普通选择器选中的是某个标签，例如：元素选择器，id选择器...

伪选择器是选中标签的状态

2.伪选择器

语法：普通选择器:类型

普通选择器就是所有能够选中标签的选择器； 类型决定了被选中的状态

3.常见的伪选择器

• link —— 选中初始状态，一般只针对a标签有效；（a标签的初始状态指的是a标签关联链接从来没有被成功访问过的状态） 注意：除了a标签以外别的标签对link无效
• visited —— 成功访问后的状态，一般只针对a标签有效
• hover —— 鼠标悬停在标签上时对应的状态，可以作用于所有可见的标签
• active —— 在标签上按住鼠标不放的时候对应的状态，可以作用于所有可见的标签

注意：1.直接选中标签选中的是这个标签的所有状态

​ 2.使用伪类选择器的时候需要遵守‘爱恨’原则；LoVe HAte

二、标准流

1.标准流布局

标签在没有添加任何布局样式的时候默认的布局方式局势标准流布局

（1）块级标签

在标准流中，一个占一行；设置宽高有效；默认宽度是父级标签的宽度，高度是内容的高度

例如：h1~h6、p、ul-li、div等...

（2）行内标签

一行可以显示多个；设置宽高无效，默认大小是内容的大小

例如：a、label、font、span

（3）行内块标签

一行可以显示多个；设置高宽有效；默认大小是内容大小

2.display属性 — 设置标签的类型

• block(块级) —— 将标签转换成块级标签
• inline(行内) —— 将标签转换成行内标签
• inline-block(行内块) —— 将标签转换成行内块标签
• none —— 隐藏标签

三、浮动

1.脱流/脱标

标签不管用什么样的方式脱流了，标签布局的规则都会变成：一行可以显示多个；设置宽高有效；默认大小是内容大小；

浮动和定位都会让标签脱流

2.浮动 — 让竖着显示的横着来

设置标签的float属性为left或right

3.文字环绕

1.内容的环绕：让被环绕的标签浮动，主动环绕的内容对应的标签不浮动

4.清除浮动

清除指的是因为浮动而产生的高度塌陷的问题

什么时候高度塌陷：父类标签不浮动并且没有设置高度，子标签浮动，这个父标签高度就会塌陷

• 空盒子法 clear：both
• 设置overflow：设置高度会塌陷的标签样式的overflow属性指为hidden
• 万能清除法

四、定位

1.定位

通过设置上下左右的距离来对标签进行定位

（1）position属性 —— 设置得时的参考对象

• initial/static —— 默认的，表示不定位（body标签的position默认不是initial/static）
• absolute（绝对定位） —— 相对第一个非initial/static的父标签进行定位
• relative（相对定位） —— 相对标签自己在标准流中的位置进行定位（一般会将参考对象设置为relative）
• fixed（相对浏览器定位） —— 相对浏览器位置
• sticky —— 当网页的内容没有滚动，相对标准流定位；滚动的时候相对浏览器定位

（2）

left、right、top、bottom —— 设置距离（如果没有设置position确定参考对象，设置距离无效）

五、盒子模型

html中每个可见的标签都是一个盒子模型，由content,padding,border和margin组成

（1）内容部分（content）

设置标签的宽高，就是设置标签内容的大小；子标签是添加在内容部分上的，文字、图片的显示都是在内容部分；设置背景会作用于内容部分

（2）内边距（padding）

默认情况下padding的值是0;需要通过padding相关属性添加(四个方向)； 给padding设置后.padding的部分可见；设置背景会作用于padding

• padding:大小
• padding-left:大小

（3）边距（border）

边框有四个方向,而且每个方向的粗细,颜色,和样式都可以不一样；可见的

• border:大小 样式 颜色 solid（实线）、dashed（虚线）、dotted（点划线）、double（双线）
• border-left:大小 样式 颜色

（4）外边距（margin）

有四个方向,margin不可见,但是占位置

• margin:大小