CSS第二次总结

知识点罗列：
1.CSS元素浮动
2.CSS行元素、块元素转化
3.显示与隐藏
4.CSS伪类选择器
5.CSS定位
6.CSS盒子模型
7.解决CSS盒模型塌陷问题
8.checked伪类
9.CSS的对齐方式
10.CSS网页布局

内容：

7.CSS元素浮动
属性：float
属性值：left，right，none，inherit（继承）
作用：元素浮动后会脱离文档流，不占用位置。float实现了文本环绕效果。
浮动副作用的解决：
①手动为父元素添加高度；
②给父元素设置超出部分隐藏：overflow:hidden;
③在父元素内设置空的div，通过clear消除影响：clear=left，right，both
④为父元素添加浮动。
8.CSS行元素与块元素的相互转化
属性：display
属性值：
块元素转换行元素：inline（转为行元素），inline-block（转为行级块）
行元素转为块元素：block（转为块元素），inline-block（转为行级块）注：行级块不换行，默认之间有间隙。解决方案为为父元素设置字体大小为0，在子元素中重新设置字体大小。
9.CSS显示与隐藏
属性：display
属性值：block；（显示并且转为块元素）， none（隐藏）
10.CSS伪类
链接伪类
4种状态：激活状态，已访问状态，未访问状态，和鼠标悬停状态。
:link（未访问）
:visited（已访问）
:hover（悬停）
:active（激活）
链接伪类顺序：
link>visited>hover>active
注：hover 必须置于link和visited 之后才有效；active必须置于hover之后才有效。
11.CSS定位
属性：position
属性值：absolute（绝对定位）：元素脱离文档流，不占位置
relative（相对定位）：设置后，初始位置不变，在相对自身位置进行左右上下移动和分层
fixed（固定定位）：相对于浏览器位置固定，脱离文档流，滚动滚动条时位置不变。
元素在定位之后可以多使用5个样式，分别为：
z-index（分层），left，right，bottom，top。
注：元素绝对定位和固定定位后没有宽和高，需要设置；元素在绝对定位或者固定定位后，初始值需要看前面有无元素占位置，有则默认在下边。
12.CSS盒子模型
概念：盒子模型是用来“放”网页中的各种元素。

属性：
（1）宽度属性
宽度：width:
最大宽度：max-width：
最小宽度：min-width：
（2）高度属性
同上
（3）边框属性
边框宽度：border-width：thin/medium/thick/长度值
边框颜色：border-color：颜色/transporm
边框样式：border-style：默认为none
（4）内边框属性
内边框：padding
padding-left，padding-top，padding-bottom，padding-right
设置后会将元素撑开，设置box-sizing：border-box 则不撑开。
（5）外边距属性
外边距：margin
margin-left，margin-top，margin-bottom，margin-right
**注：**元素设置行级块的时候 水平的和垂直的元素之间的外边距都是累加的
元素水平放置 两个之间的外边距是累加的
子元素全部浮动的时候 元素之间的外边距也是累加的
正常默认情况元素上下外边距不会累加 而是走最大值
13.CSS盒模型塌陷
塌陷：当子div设置外边距时，则称为塌陷。

解决方案：
①父元素设置边框；
②父元素设置超出隐藏；
③父元素设置内间距。
14.checked伪类
:checked伪类选择器
“~”匹配的是当前元素之后的所有元素；
“+” 匹配的元素是当前元素紧跟之后的元素。
15.CSS的对齐方式
（1）
CSS文本水平对齐text-align：
属性值：left，right，center，justify
注：text-align仅对块元素生效。
垂直对齐vertical-align：
属性值：baseline，sub，super，top，text-top，middle，bottomdeng等
（2）
使用padding 让元素垂直对齐 子元素大小一致
（3）
使用行高：
line-height: 行高设置和高度一致 单行文本垂直对齐
16.CSS网页布局
1.固定布局 固定像素布局 px
2.流动布局 百分比布局 %
3.网站布局 layout布局
①浮动布局（float布局）：即元素左右浮动 堆叠产生布局模式
优点：兼容性比较好
缺点：存在塌陷问题
②定位布局（absolute布局）：即元素使用各种定位 产生的布局模式
优点：简单直接，兼容性好
缺点：脱离文档流
③弹性盒子布局（flex布局）：即flex 进行布局
优点：布局简单、灵活
缺点：IE8以下不兼容
④多列布局
⑤网格布局（grid布局 ）
优点：是基于二维方向的布局模块
缺点：对低版本浏览器兼容性不好。