清除浮动:clear属性
position
可实现双列、三列布局
absolute
粘滞定位
positon:sticky
1.float
float:浮动。float刚开始并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题的。
如下图:image.png
这种常见的图文效果,没有float之前是很难达到的。有了float之后只需要加一个float:left,轻松搞定。
<style> .content{ margin: 100px auto; width: 300px; } .box{ float: left; } </style> <div class="content"> <div class="box"><img src="./imgs/authority-employee.png" alt=""></div> <div class="text">CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表:外部样式表、内部样式表和内联样式。</div> </div>‘咦,如果float可以处理图文的问题,那用来布局不也可以吗?’,后来有人用float试着用于网页布局,还真的可以。
网页中最常见的布局如下:网页常见布局.png
用float做
<style> body,ul,li{ padding: 0; margin: 0; list-style: none; } .header{ height: 100px; background-color: hotpink; } .nav{ height: 100px; line-height: 100px; text-align: center; } .nav li{ float: left; width: 100px; height: 100px; margin-left: 20px; background-color: yellowgreen; } .main{ width: 1000px; height: 500px; margin: 0 auto; } .article{ width: 800px; height: 500px; background-color:yellow; float: left; } .aside{ width: 200px; height: 500px; background-color:skyblue; float: left; } .footer{ height: 100px; background-color: greenyellow; } </style> <div class="header"> <ul class="nav"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </div> <div class="main"> <div class="article"></div> <div class="aside"></div> </div> <div class="footer"></div>比table布局要方便不少,不过float随之而来的带来了 “浮动高度塌陷”的问题:
如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;
引申:网页元素一般分为 普通流,浮动流,定位流。其中普通流和浮动流在一个层级上,定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法,非常麻烦。2.position
position:定位;顾名思义,就是确定位置。position同样可以用做网页布局。
<style> body,ul,li{ padding: 0; margin: 0; list-style: none; } .header{ height: 100px; background-color: hotpink; } .nav{ height: 100px; line-height: 100px; text-align: center; /*父元素用相对定位*/ position: relative; } .nav li{ /*子元素用绝对定位*/ position: absolute; width: 100px; height: 100px; background-color: yellowgreen; } .nav li:nth-child(1){ left: 20px; } .nav li:nth-child(2){ left: 140px; } .nav li:nth-child(3){ left: 260px; } .main{ width: 1000px; height: 500px; margin: 0 auto; position: relative; } .article{ width: 800px; height: 500px; background-color:yellow; } .aside{ width: 200px; height: 500px; background-color:skyblue; position: absolute; top: 0; right: 0; } .footer{ height: 100px; background-color: greenyellow; } </style> <div class="header"> <ul class="nav"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </div> <div class="main"> <div class="article"></div> <div class="aside"></div> </div> <div class="footer"></div>同样的效果
image.png
不过position需要计算每一个元素的位置,而且这个位置是定死的,略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点:子绝父相。需要定位的元素用absolute绝对定位,其父元素用 relative相对定位。还有fixed固定定位,他是以html为父元素的定位。3.flex(推荐)
flex:弹性;弹性布局很好的解决了float和position的问题,非常好用。
使用方法:
在父元素使用 display:flex;确定弹性作用的范围。
然后
justify-content:center(space-around,space-between等);水平方向布局;
align-items:center(flex-start,flex-end等);垂直方向布局;<style> body,ul,li{ padding: 0; margin: 0; list-style: none; } .header{ height: 100px; background-color: hotpink; } .nav{ height: 100px; line-height: 100px; text-align: center; display: flex; } .nav li{ /*子元素用绝对定位*/ width: 100px; height: 100px; margin-left: 20px; background-color: yellowgreen; } .main{ width: 1000px; height: 500px; margin: 0 auto; display: flex; } .article{ width: 800px; height: 500px; background-color:yellow; } .aside{ width: 200px; height: 500px; background-color:skyblue; } .footer{ height: 100px; background-color: greenyellow; } </style> <div class="header"> <ul class="nav"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </div> <div class="main"> <div class="article"></div> <div class="aside"></div> </div> <div class="footer"></div>
一旦修改元素的定位方式,元素可能发生堆叠,可以使用z-index来控制有元素在框中出现的堆叠数值
Z-index:value 数值越大,级别越高,越显示在前
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
注意:一个BFC的范围包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明,一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中,那么就意味着这个元素能与两个BFC中的元素发生作用,就违反了BFC的隔离作用。
left
、right
auto
、scroll
、hidden
inline-block
、table-cell
、table-caption
、table
、inline-table
、flex
、inline-flex
、grid
、inline-grid
absolute
、fixed
注意:display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC。
BFC可以实现容纳浮动元素、组织文本环绕
转载CSS布局:float、position、flex