【css】水平布局

前言

这段时间编写静态页面,学习了几种水平布局,其中有不小的差异和注意事项,特此记录汇总一下。

1. display: inline-block

将元素修改为行内块元素,可以在不脱离文档流的情况下实现水平布局,且兼容性极佳。
但是存在元素上下、左右边距不贴合的问题,解决方法如下:

  • 设置父元素font-size:0,可解决左右边距不对齐(两个div元素之间的换行符会被浏览器默认占一个字节)
  • 设置子元素vertical-align:top,可解决上下边距不对齐

2. float

设置元素浮动,使其向父元素的左侧或右侧移动,浮动的特点如下:
  • 浮动元素会完全脱离文档流,不再占据文档流中的位置
  • 浮动元素默认不会从父元素中移出
  • 浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
  • 如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
  • 浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高
存在的问题:高度塌陷
  • 在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,其会完全脱离文档流。
  • 子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失,父元素的高度丢失后,其下的元素会自动上移,导致页面布局混乱
解决方式一:BFC(Block Formatting Context)块级格式化环境

BFC是CSS中的一个隐含属性,可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域。

  • 元素开启BFC后的特点:
    1. 开启BFC的元素不会被浮动的元素所覆盖
    2. 开启BFC的元素子元素和父元素外边距不会重叠
    3. 开启BFC的元素可以包含浮动的子元素
  • 可以通过一些特殊方式来开启元素的BFC:
    1. 设置元素的浮动(不推荐)
    2. 将元素设置为行内块元素(不推荐)
    3. 将元素的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.

父元素的六个属性以控制子元素显示方式:
  1. flex-direction 设置主轴对齐方式,默认row
    • column 垂直堆叠flex项目,从上到下
    • column-reverse 垂直堆叠flex项目,从下到上
    • row 水平堆叠 flex 项目,从左到右
    • row -reverse 水平堆叠 flex 项目,从右到左
  2. flex-wrap 子元素换行的方式,默认nowrap
    • nowrap 值规定将不对 flex 项目换行
    • wrap 值规定 flex 项目将在必要时进行换行
    • wrap-reverse 值规定如有必要,弹性项目将以相反的顺序换行
  3. flex-flow 是flex-direction和flex-wrap的简写 默认row nowrap(flex-flow: row wrap;)
  4. justify-content 子元素的对齐方式 默认flex-start 左对齐
    • center 值将 flex 项目在容器的中心对齐
    • flex-start 值将 flex 项目在容器的开头对齐
    • flex-end 值将 flex 项目在容器的末端对齐
    • space-around 值显示行之前、之间和之后带有空格的 flex 项目
    • space-between 值显示行之间有空格的 flex 项目
  5. align-items 侧轴的对齐方式 默认stretch
    • center 值将 flex 项目在容器中间对齐
    • flex-start 值将 flex 项目在容器顶部对齐
    • flex-end 值将弹性项目在容器底部对齐
    • stretch 值拉伸 flex 项目以填充容器
    • baseline 值使 flex 项目基线对齐
  6. align-content 用于对齐弹性线 默认stretch
    • space-between 值显示的弹性线之间有相等的间距
    • space-around 值显示弹性线在其之前、之间和之后带有空格
    • stretch 值拉伸弹性线以占据剩余空间
    • center 值在容器中间显示弹性线
    • flex-start 值在容器开头显示弹性线
    • flex-end 值在容器的末尾显示弹性线
设置在子元素项目的六个属性:
  1. order 子元素排列的位置 ,默认先后顺序 (order 值必须是数字,默认值是 0)
  2. flex-grow 放大比例,默认为0
  3. flex-shrink 缩小比例,默认为1
  4. flex-basis 规定 flex 项目的初始长度(在分配多余空间之前,项目占据的主轴空间)
  5. flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
  6. align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值