浮动清除，模型定位

偏执的太偏执、 2022-06-06 11:58 171阅读 0赞

**盒子容器的宽高度设置**  
• 直接给定固定像素值，单位px  
• 通过百分比来给定宽高值  
• 自适应宽高度：auto  
**浮动带来的问题**  
• 不同区域的浮动元素同行贴边  
• 浮动子元素不能撑开父容器的高度  
• 浮动子元素的父容器背景无法正常显示  
**如何解决浮动问题**  
• 通过对父级容器设置适合CSS高度  
• 通过overflow属性清除浮动  
• 通过设置clear属性清除浮动  
**超链接标签基本格式**  
•

• href地址：网页地址（一定要带上http协议）、本页面锚点位置  
• target取值：\_self、\_blank、\_parent、\_top  
**伪类选择器定义**  
• 格式：标签名：伪类名\{\}  
• 超链接伪类选择：:link、visited、hover、active（定义时候顺序不能变lvha）  
**超链接伪类说明**  
• link：表示链接还没点击访问过  
• visited：表示链接已经访问过了  
• hover：表示鼠标放置在链接上  
• active：表示鼠标对当前链接激活的时候（鼠标按下，并没有释放）  
**超链接伪类其他标签使用**  
• hover和active同样适用其他标签上  
**注意：**用a标签囊括块级元素写法是不合法的

> **position相关说明**  
> • 相对定位（relative）  
> • 固定定位（fixed）  
> • 绝对定位（absolute）  
> • z-index  
> **position属性**  
> • 对当前标签对象进行定位操作，属性规定元素的定位类型  
> • 取值范围：静态（static），相对（relative），绝对（absolute）、固定（fixed）  
> • css四个属性（top、left、right、bottom）只有在设置了position值为relative、absolute、fixed情况下才有效

--------------------

**相对定位特点**  
• 通过top、left、bottom、right来设置元素的新位置偏移（相对于当前位置）  
• 相对定位的元素并没有脱离标准文档流，对原来标准流中的元素依然受影响（元神出窍）  
**应用业务场景**  
• 界面效果微调  
• 配合子元素的绝对定位使用

--------------------

**固定定位特点**  
• 通过top、left、bottom、right来设置元素的新位置偏移(相对于浏览器视窗)  
• 固对定位的元素脱离标准文档流，不受文档流约束  
**应用场景**  
• 导航栏冻结 -虎嗅网  
• 侧边栏回顶部 -京东网  
• 广告弹出框 -饿了么

--------------------

**绝对定位特点**  
• 通过top、left、bottom、right来设置元素的新位置偏移  
• 相对定位的元素脱离标准文档流  
**应用场景**  
• 页面内部小盒子内的元素的不正常位置效果体现

--------------------

• 如果绝对定位盒子外层没有盒子  
• top：以距离页面顶部具体top长度显示  
• bottom：以距离当前浏览器底部bottom值显示  
• 如果绝对定位盒子外层还有盒子  
• 默认相对于浏览器绝对定位偏移  
• 如果要相对父容器绝对定位，则要遵循如下规则：父元素必须要有定位（绝、相、固）设置  
**z-index定义**  
• 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面  
• z-index只有在当前元素设置了position的时候才有效  
**特性**  
• 随父性：父元素的z-index值，会影响子元素的重叠效果  
**应用场景**  
• 需要体现层层之间的重叠效果  
• 登陆注册半透明覆盖弹出层 -百度的登陆  
**vertical-align属性**  
• 垂直对齐方式  
• 四个定位坐标：top、bottom、baseline、center  
• 只有再display伪inline-block和inline时候有效