文章目录
前言
这段时间编写静态页面,学习了几种水平布局,其中有不小的差异和注意事项,特此记录汇总一下。
1. display: inline-block
将元素修改为行内块元素,可以在不脱离文档流的情况下实现水平布局,且兼容性极佳。
但是存在元素上下、左右边距不贴合的问题,解决方法如下:
- 设置父元素font-size:0,可解决左右边距不对齐(两个div元素之间的换行符会被浏览器默认占一个字节)
- 设置子元素vertical-align:top,可解决上下边距不对齐
2. float
设置元素浮动,使其向父元素的左侧或右侧移动,浮动的特点如下:
- 浮动元素会完全脱离文档流,不再占据文档流中的位置
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高
存在的问题:高度塌陷
- 在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,其会完全脱离文档流。
- 子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失,父元素的高度丢失后,其下的元素会自动上移,导致页面布局混乱
解决方式一:BFC(Block Formatting Context)块级格式化环境
BFC是CSS中的一个隐含属性,可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域。
- 元素开启BFC后的特点:
- 开启BFC的元素不会被浮动的元素所覆盖
- 开启BFC的元素子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
- 可以通过一些特殊方式来开启元素的BFC:
- 设置元素的浮动(不推荐)
- 将元素设置为行内块元素(不推荐)
- 将元素的overflow设置为一个非visible的值(常用:overflow:hidden)
解决方式二:clear
作用:清除浮动元素对当前元素所产生的影响
可选值:
- left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影响
- both 清除两侧中最大影响的那侧
原理:设置清除浮动后,浏览器会自动为元素添加一个上外边距,以使其不受其他元素的影响
清除浮动的究极形态
此方法影响最小,几乎没有缺陷。父元素加上下列buff:
.clearFix::after,
.clearFix::before {
content: '';
display: table;
clear: both;
}
3. display: flex
flex(弹性盒,伸缩盒),是CSS的又一种布局手段,主要用来替代浮动完成页面的布局。flex可以使元素具有弹性,让元素可以跟随页面的大小改变而改变。父元素设置display: flex即可完成水平布局。但兼容性较差,IE要求11.0.
父元素的六个属性以控制子元素显示方式:
- flex-direction 设置主轴对齐方式,默认row
- column 垂直堆叠flex项目,从上到下
- column-reverse 垂直堆叠flex项目,从下到上
- row 水平堆叠 flex 项目,从左到右
- row -reverse 水平堆叠 flex 项目,从右到左
- flex-wrap 子元素换行的方式,默认nowrap
- nowrap 值规定将不对 flex 项目换行
- wrap 值规定 flex 项目将在必要时进行换行
- wrap-reverse 值规定如有必要,弹性项目将以相反的顺序换行
- flex-flow 是flex-direction和flex-wrap的简写 默认row nowrap(flex-flow: row wrap;)
- justify-content 子元素的对齐方式 默认flex-start 左对齐
- center 值将 flex 项目在容器的中心对齐
- flex-start 值将 flex 项目在容器的开头对齐
- flex-end 值将 flex 项目在容器的末端对齐
- space-around 值显示行之前、之间和之后带有空格的 flex 项目
- space-between 值显示行之间有空格的 flex 项目
- align-items 侧轴的对齐方式 默认stretch
- center 值将 flex 项目在容器中间对齐
- flex-start 值将 flex 项目在容器顶部对齐
- flex-end 值将弹性项目在容器底部对齐
- stretch 值拉伸 flex 项目以填充容器
- baseline 值使 flex 项目基线对齐
- align-content 用于对齐弹性线 默认stretch
- space-between 值显示的弹性线之间有相等的间距
- space-around 值显示弹性线在其之前、之间和之后带有空格
- stretch 值拉伸弹性线以占据剩余空间
- center 值在容器中间显示弹性线
- flex-start 值在容器开头显示弹性线
- flex-end 值在容器的末尾显示弹性线
设置在子元素项目的六个属性:
- order 子元素排列的位置 ,默认先后顺序 (order 值必须是数字,默认值是 0)
- flex-grow 放大比例,默认为0
- flex-shrink 缩小比例,默认为1
- flex-basis 规定 flex 项目的初始长度(在分配多余空间之前,项目占据的主轴空间)
- flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
- align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性