目录
## 五、行内块之间的空白距离和下方多出的空白（水平和垂直方向有空白）
## 一、状态伪类（链接）a 标签
```
a:link{ // 链接未访问状态
color: aqua;
}
a:visited{ // 链接访问过后
color: brown;
}
a:hover{ // 链接悬停状态
color:yellow;
}
a:active{ // 链接的激活状态（鼠标按下）
color: pink;
}
```
- :hover不仅可以表示链接的悬停，其他的标签也可以使用
## 二、盒模型
> css中把每个标签看作是一个盒子，有四层结构，分别是内容、内边距（内填充）、边框、外边距。
- 1、content 尺寸=width+height
- 2、padding 盒子的边缘和内容之间的距离,这段距离会显示背景，不会显示内容
- 3、border 边框是指盒子边缘的线条
- 4、margin 是指盒子和相邻元素或者父元素之间的距离
```
padding-top/bottom/left/right
boder-top/bottom/left/right
margin-top/bottom/left/right
margin:0 auto; /*块元素水平居中*/
边框简写属性 border:border-width border-style border-color
border:30px solid black;
border-right: 0; /*去掉边框两种写法*/
border-left: none;
```
```
内边距：
padding:10px; 上下左右四个方向内边距相同
padding:10px 20px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
边框：
border-width:2px; 设置边框宽度
border-style:solid;设置边框风格
solid/dashed/dotted/double 实/虚/点/双实线
border-color:red; 设置边框颜色
border-top-width: 2px; 设置上边框的宽度
border-top-style: solid; 设置上边框的风格
border-top-color: yellow; 设置上边框的颜色
bottom、left、right三个方向和top同理
外边距：
margin:10px; 上下左右四个方向外边距相同
margin:10px 20px; 上下 左右
margin:10px 20px 30px; 上 左右 下
margin:10px 20px 30px 40px; 上 右 下 左
margin:0 auto; 水平居中
* margin可以设置负值，可以通过负值减少元素的占位，比如margin-top为负值（-50px），元素垂直方向会往上移动，并且减少50px的占位
```
## 三、垂直外边距合并问题
### 1、垂直方向margin-top传递问题(父子关系)
- 当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top
- 解决:
- 给父元素添加1px的上padding或者border,子元素margin-top少1px
- 可以用父元素的padding-top实现同样式的效果
### 2、相邻元素的外边距合并（兄弟关系）
- 两同级标签，上一个设置margin-bottom:40px,下一个设置margin-top:60px，最后两者之间的外边距会合并为数值较大的那个值(60px)，不是数值相加(100px)
## 四、盒子类型转换
- display:block; 设置成块级标签
- display:inline; 设置成行内标签
- display:inline-block; 设置成行内块级标签
- display:none; 隐藏元素,页面上不显示也不占位
## 五、行内块之间的空白距离和下方多出的空白（水平和垂直方向有空白）
- 解决方案：
- 给父元素设置font-size:0;line-height:0;
- 给子元素重新设置font-size和line-height
## 六、CSS三大特性
- 1、层叠性
> 浏览器处理样式冲突的一种能力
样式不冲突不层叠
样式冲突，以最后定义的为准（就近原则）
- 2、继承性
> 子元素可以使用父元素的某些样式，比如文本、字体相关，只要给父级设置，子元素默认值和父级一样
> 恰当使用继承，可以降低代码的复杂度
- 以下属性默认继承：
```
text-align
text-indent
text-decoration
color
font-size
font-family
font-style
font-weight
line-height
letter-spacing
word-spacing
```
- 其他属性通过inherit这个值可以实现手动继承
```
width:inherit;
border:inherit;
```
> 注意： 块级元素width不是默认继承，背景颜色background-color默认是透明也不是继承
> 注意： a标签的颜色和文本修饰默认不会继承，需要选中a标签才能修改
- 3、优先级
> 行内样式优先级最高
- 基本选择器的权值，权值越大，优先级越高
```
选择器 权值
*（通配符） 0
tagName（标签选择器） 1
.class（类选择器）\伪类 10
#id (ID选择器) 100
行内样式 1000
```
- 复合选择器的权值多数情况把组成这个复合选择器的基本选择器的权值相加 (特殊情况：群组选择器是单个计算不会叠加)
- 选择器权值相同，后定义生效
```
后代 .box div (10 + 1 = 11)
子代 .box>div (10 + 1 = 11)
群组 h1,.box 不会相加，单个计算 h1 1 .box 10
交集 div.box (1 + 10 = 11)
```
- 特殊情况：!important 命令可以把样式优先级提升最高，比行内样式优先级更大，不推荐使用加入到代码中。
## 七、垂直对齐
- vertical-align
- baseline 默认值，基线对齐
- middle 中线对齐
- top 顶部对齐
- bottom 底部对齐
1、图片和文字中线对齐，给图片设置vertical-align:middle;
```
css:
.box img{
width:150px;
vertical-align: middle;
}
html:
<div class="box">
文字pgP
<img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png" alt="">
</div>
```
2、行内元素中线对齐，给两个行内元素都设置vertical-align:middle;
```
css：
.span1,.span2{
background-color: red;
vertical-align: middle;
}
.span1{
font-size: 30px;
}
html:
<span class="span1">span1</span>
<span class="span2">span2</span>
```
3、行内块元素中线对齐，给两个行内块都设置 vertical-align:middle;
```
css：
.span3,.span4{
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
vertical-align: middle;
}
html:
<span class="span3">span3</span>
<span class="span4">span4 <br> span44</span>
```
## 八、浮动
>布局方式：文档流、浮动布局、层布局（定位）
>文档流：元素按照本身的属性在页面排列，块从上往下，行内从左往右
1、左浮动 float:left;
- 左浮动的元素会尽可能往左走，直到碰到父元素或者相邻浮动元素的边缘停下来
- 脱离文档流，不占位
- 多个左浮动的元素从左到右依次排列
2、右浮动 float:right;
- 右浮动的元素会尽可能往右走，直到碰到父元素或者相邻浮动元素的边缘停下来
- 脱离文档流，不占位
- 多个右浮动的元素从右到左依次排列
3、取消浮动 float:none;
- 回到文档流占位
> 补充： 浮动的元素脱离文档流之后，可以覆盖文档流内的元素，但是文字和图片以及表单元素不会被覆盖，会围绕浮动元素排列
## 九、清除浮动
- 解决浮动元素脱离文档流之后无法撑开父级高度的问题
- 解决方案：
- 1、给父元素设置height属性, 代码的扩展性不好（不方便维护）
- 2、给父元素设置overflow:hidden; 因为overflow:hidden;本身的效果是会让元素溢出的部分隐藏掉，所以某些情况无法使用overflow:hidden;
- 3、额外标签法: 在所有浮动元素之后添加一个不浮动的元素，给其添加clear:both属性。 会增加结构中的冗余代码。
- 4、通过伪元素的方式添加标签（和额外标签法原理相同），用法：在样式表中预先定义好.clearfix类，遇到需要清除浮动的标签（所有浮动元素的父级），就给其添加上clearfix类名
```
.clearfix::after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom:1;
}
```
## 十、overflow 规定元素内容溢出显示方式
- overflow:visible; 溢出显示（默认值）
- hidden; 溢出隐藏，多出的部分被直接截断
- scroll; 始终显示滚动条区域
- auto; 内容溢出显示滚动条，内容不溢出就不显示滚动条
## 十一、伪元素
> 使用场景：一般用来给局部添加一些样式处理
- ::after 在元素的末尾（内部）添加伪元素
- ::before 在元素的开头（内部）添加伪元素
## 十二、背景属性
> background:color image repeat positon;
> 简写属性里面的各个值得顺序可以调整，并且可以省略掉不需要设置的属性
```
background:blue url("logo.png") no-repeat center;
```
```
背景颜色
background-color:#000;
background-color:transparent; 透明
```
```
背景图片
background-image:url("...");
```
```
背景重复
background-repeat:
- repeat 默认值，水平和垂直都铺满
- repeat-x 水平重复
- repeat-y 垂直重复
- no-repeat 不重复
```
```
背景定位
background-position: 水平 垂直;
- left/center/right top/center/bottom
- x-length y-length ,设px, X正右移负左移， y正数下移负上移
- x-% y-% ,设%,X 0%-最左边,100%-最右边,50%表-中间，Y 0%-顶部，100%-底部，50%-中间
背景定位属性值，如果只设置一个方向，表示另一个方向默认位center
```
> 网页图片和背景图片区别
- 跟网页内容相关，比较重要的图片都要使用img标签添加，比如广告图、商品图、logo图...
- 跟内容无关，作为网页的修饰性的一图案使用背景图片，比如纹理、修饰性的小图标...背景图片不能撑开元素的尺寸