深入CSS之CSS布局 | 青训营笔记

前端不努力
282 阅读5分钟

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

CSS的布局

布局是什么？

是依据元素、内容、兄弟节点和内容等信息进行确定内容大小和位置的算法

布局相关技术

  • 常规流

    • 行级
    • 块级
    • 表格布局
    • flex
    • grid

  • 浮动

  • 绝对定位

常规流

一个块级元素共由四部分组成：margin、border、padding、content

  • margin：外边距，当前元素与其它兄弟元素之间的距离

    • 属性值：

      • auto 水平居中
      • 百分比，基于父元素
      • 像素

  • border：元素的边框

    • 属性：边框的粗细、边框的样式、边框的颜色

  • padding：元素边框与元素内容之间的距离

    • 属性值与margin相同

  • content：元素中的内容部分，由width与height设置宽度与高度

除了content外，margin、border、padding又分为上下左右四部分

margin的collapse

简称：简称外边距合并，当上下两个兄弟元素各自设置了margin，元素上下之间的距离，将会由边距数值大的一方决定，如果相同则取和的一半

collapse的解决方案

1.通过设置border-sizing可以帮助我们解决很多常规流中的布局问题 属性值:

  • initial 默认值
  • content-box 块级元素的默认属性，块级元素的其他三部分会在content的宽高的基础上增加像素
  • border-box 块级元素的四部分会共用content的宽高，比如：content高200px，设置margin-top为50px后，content就剩下了150px

2.通过设置overf可以帮助我们解决很多常规流中的布局问题 属性值：

  • visible 默认初始值
  • hidden 隐藏溢出content部分
  • scroll或auto 将content·溢出部分转换为滚动条的展示形式

行级元素与块级元素

  • 行级

    • 不可以设置宽高
    • 常见标签：span、em、strong、cite、code

  • 块级

    • 可以设置宽高，独占一行
    • 常见标签：body、article、div、p、ul、ol、h1~h6

在css中，可以通过设置display控制块级与行级的转换 属性值：

  • none 清除元素，元素不会在DOM中显示
  • inline 设置为行级元素
  • block 设置为块级元素
  • inline-block 设置为行内块元素，可以设置宽高，且可以并列展示

行级排版上下文(IFC)

只包含行级元素的容器会创建一个IFC IFC内的排版规则：

  • 盒子在一行内水平摆放
  • 一行放不下时换行显示
  • text-aligh 决定一行内元素的水平对齐方式
  • vertical-align 决定一个元素在行内的垂直对齐方式
  • 避开浮动元素

块级排版上下文(BFC)

某些元素会创建一个BFC BFC的特点：

  • 根元素
  • 浮动、绝对定位、inline-block
  • flex子项或grid子项
  • overflow不是visible的块级元素
  • display:flow-root

BFC内的排版规则：

  • 盒子从上到下排列
  • 垂直margin合并
  • BFC内的盒子不会与外面的合并
  • BFC不会和浮动元素重叠

FlexBox

flex是什么？

  • 一种新的排版上下文

  • 它可以控制子级元素的

    • 摆放流向（上下左右）
    • 摆放顺序
    • 盒子的宽高
    • 水平和垂直方向的对齐
    • 是否运行折行

  • 通过display：flex；设置

在FlexBox中共分为主轴和侧轴两个方向，可以通过flex-direction设置默认排序顺序 属性：

  • row 默认从主轴开始，且主轴从左往右排列
  • row-reverse 默认从主轴开始，且主轴从右往左排列
  • column 默认从侧轴开始，且侧轴由上至下排列
  • column-reverse 默认从侧轴开始，且侧轴由下至上 排列

FlexBox中的其他属性

  • justify-content 设置内部元素在主轴上的水平排列方式

    • 属性值：

      • flex-start 从左开始
      • flex-end 从右开始
      • center 居中
      • spacing-between 占满两边空间，元素之间均匀排列
      • spacing-around 元素两边都有间距且相等
      • spacing-evenly 均匀排列

  • align-items 设置内部元素在侧轴上的垂直排列方式

    • 属性值：

      • flex-start 从上开始
      • flex-end 从下开始
      • center 居中
      • stretch 每列占满
      • baseline 根据内容进行排列

  • align-self 内部元素设置自己垂直排列位置

    • 属性值

      • flex-start 从上开始
      • flex-end 从下开始

  • order 设置权重，权重越高越靠后

  • flex-grow 有剩余空间的伸展能力

  • flex-shrink 容器空间不足的伸展能力

  • flex-basis 没有伸展或收缩时的基础长度

  • flex复合用法

image.png

GridBox

通过display：grid；设置

grid-template-columns/rows

  • 作用：为容器划分区域

  • 属性值：

    • 像素
    • 百分比
    • auto 剩余空间自适应
    • fr 对剩余空间进行份数均分

  • 使用方式：

    • grid-template-columns: 100px 1fr 1fr;
    • grid-template-rows: 100px 1fr；
    • 设置了一个两行三列的容器
    • 展示效果：
    • image.png

设置每个元素所占区域

  • 单个设置

    • image.png

  • 复合用法

    • image.png

浮动

浮动会脱离文档流，在使用时需要清除浮动

  • float

    • 属性值

      • left 从左至右浮动
      • left 从右至左浮动
      • both 清除浮动

清除浮动的其他方式

  1. overflow：hidden
  2. 给父盒子添加float：both
  3. 设置伪元素，给伪元素设置float：both

定位

position

  • 属性值

    • static 初始值，非定位元素
    • relativel 相对于原本位置移动，不脱离文档流
    • absolute 相对于父级移动，脱离文档流
    • fixed 相对于视口位置移动，脱离文档流
    • sticky 当元素离开视口后，转换为固定定位

学习CSS的建议

  • 保持好奇心，善用开发者工具
  • 充分利用W3C和MDN
  • 持续学习

总结

对于不同的页面，使用不同的布局方式以达到令人满意的效果。

avatar
文章
阅读
粉丝