这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

清除列表前面的点点

list-style: none;

浮动

会脱标

创建浮动框

选择器 { float: 属性值;}

• none 不浮动
• left 左浮动
• right 右浮动

清除浮动

本质是清除浮动元素所造成的影响

clear: both;

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>

给父元素添加overflow属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll。单词方法无法显示溢出的部分。

:after伪元素法

双伪元素法

定位

定位模式	是否脱标	移动位置
static	no	不能使用边偏移
relative	no	相对于自身位置移动
absolute	yes	带有定位的父级
fixed	yes	浏览器可视区

静态定位（很少用）

选择器 {position: static; }

相对定位

选择器 {position: relative; }

绝对定位

选择器 {position: absolute; }

固定定位

选择器 {position: fixed; }

定位叠放次序

选择器 {z-index: 1;}

数值越大，盒子越靠上。

---

子绝父相

意思就是子级是绝对定位的话，父级要用相对定位。子级绝对定位，不会占用位置，可以放到父盒子里的任何一个地方，不会影响其他的兄弟盒子，父盒子需要加定位限制子盒子在父盒子内显示，父盒子布局时，需要占有位置，因此父亲只能是相对定位。

元素的显示与隐藏

display

• none 隐藏对象
• block 除了转换为块级元素之外，还有显示元素的意思

注意：隐藏元素后不再占有原来的位置

visibility

• visible 元素可视
• hidden 元素隐藏

overflow

• visible 不剪切内容也不添加滚动条
• hidden不显示超过对象尺寸的内容，超出部分隐藏掉
• scroll 不管是否超出内容，总是显示滚动条
• auto 超出自动显示滚动条，不超出不显示滚动条