css选择器，浮动

一、选择器优先级

1. 第一级：属性后面添加!important

2. 第二级：内联样式—其他的任何样式都小于第一二级

3. 优先级看权重，权重越大，优先级越高
   *–权重为1
   ​ 标签选择器–权重为1
   ​ class选择器–权重为2
   ​ id选择器–权重为4

4. 父子、后代、兄弟、相邻兄弟 选择器—看符号之间各个选择器的权重和，但是先看符号前边的，如果相等则比较符号后边的
   ​ 如果权重相等，最后写的谁实现的就是谁
   ​ 如果权重不一样，但是修改同一个标签，不重叠的样式都能实现

二、伪类选择器

伪类是用来添加选择器的特殊效果，

1.语法 普通选择器：伪类选择器{}

普通选择器选择的是标签，伪类选择器是选中的标签在不同场景下的某个状态

普通标签的装填：鼠标悬停，点击，激活(成为焦点)

2.常见的伪类选择器
(1). 两个通用状态 hover 鼠标悬停 active -鼠标在某个元素按下
(2). 超链接a标签特有的
link–超链接地址没有被成功访问展示的状态
visited–超链接地址被成功访问展示的状态

/* 设置超链接鼠标悬停时的状态 */
a:hover{
    color:rgba(93, 255, 75, 0.5);
}
/* 超链接访问后的状态 */
a:link{
    color: lavender;
}
a:visited{
    color: black;
}

三、标准布局

1.标准流布局：没有设置任何布局的样式，使用标签自己的特性

a.块级布局标签：一个标签占一行，h1~h6、p等

b.行内标签：一行可以显示多个标签，设置宽高无效 ，a、span

c.行内块标签：一行可以显示读个标签，设置宽高有效，img、input

2.display

block--块级
inline--行内
none--隐藏标签
inline-bolck--行内块

3.脱流

脱流使用的是浮动，定位两种方式；所有便签脱流以后布局都是以行内块样式布局

四、浮动

浮动(float) 会使元素向左或向右移动，其周围的元素也会重新排列

float:left  --左浮动
float:right --右浮动

清除浮动-使用clear： clear 属性指定元素两侧不能出现浮动元素

.text_line{
    clear:both
}

五、定位

设置一个标签作为参考对象

定位的前提：选好参考对象

定位(position)的四个值：

​ absolute–绝对定位：在盒子中还存在一个真实的元素，但是这个元素不占据空间

​ relative-相对定位：在盒子中仍存在一个真实的元素，此元素可以任意移动位置，但原位置不能被其他元素占用

​ fixed–固定定位：盒子中还存在一个真实的元素，此元素位置不受盒子大小影响

position:absolute
position:relative
position:fixed

六、盒子模型

所有标签都是一个盒子模型，用来封装周围的HTML元素，盒子包括边距，边框，填充和内容

margin(外边距)：清除边框外的区域，外边距是透明的

border(边框)：围绕在内边距和内容外的边框

padding(内边距)：清除内容周围的区域，内边距是透明的

content(内容)：盒子中的内容，显示文本和图像