h5 day4笔记 2021.08.19

选择器：（选择对象进行css修饰）

1）标签选择器：html标签都可作为选择器使用，使用方法：div{ }

2）id选择器：标签内部添加id属性，设置属性值，使用方法：#属性值{ }   （通常表示一个区域的外围结构（唯一性）

3）class选择器：标签内部添加class属性，设置属性值，使用方法： .属性值{ }

4）包含选择器：使用方法：父级选择器 子级选择器{ }

5）群组选择器：选中相同的属性，使用方法：选择器1,选择器2, .....{ }

6）通配符：浏览器中有默认间距，使用方法：*选中页面中的所有标签/选择器。

固定用法 *{margin:0;padding:0}  将浏览器内外边距设为0

7）动态伪类选择器：

a:link {color: red;} /* 未访问的链接状态 */

a:visited {color: green;} /* 已访问的链接状态 */

a:hover {color: blue;} /* 鼠标滑过链接状态 */  --鼠标移入时对元素状态的改变

--改变自己的状态：          选择器:hover{声明}

- 通过父级改变子级元素：       父级选择器:hover 子级选择器{声明}

a:active {color: yellow;} /* 鼠标按下去时的状态 */

选择器加载顺序优先级：行内样式表（1000）> id选择器（0100）> class选择器（0010）=伪类选择器（0010）> 标签选择器（0001）> 通配符（0000）    包含选择器（相加）  群组选择器（各自计算）          最高：       属性：属性值！important

浮动属性：（控制元素在水平方向移动）

float：left/right/none 

元素设置浮动属性，会漂浮脱离文档流，碰到父级边框或前一个浮动元素会停止浮动，如果放不下会往下移动，直至有足够空间。

文本是真实的结构 不会被浮动元素给盖住~

盒模型：（设置元素与元素位置之间的关系）

组成部分:

- content 内容   

- padding 内边距 （设置父级元素与子级元素位置之间的关系） 通常给父级添加，会把元素撑大，需减去相应的padding值，padding不可为负值！！

- border 边框、边界 

- margin 外边距 （设置同级元素间的距离，不会撑大元素），可为负值（重叠）！

padding和margin的方向值：

- 设置一个值:表示上下左右

- 设置两个值:表示上下 左右

- 设置三个值:表示上 左右 下

- 设置四个值:表示上右下左

- 方向的属性 padding/margin-top/right/bottom/left