CSS布局 ｜ 青训营

xxx358
124 阅读3分钟

CSS布局

layout布局

  • 确定内容的大小和位置
  • 依据元素、容器、兄弟节点和内容等信息计算

常规流

块级、行级、表格布局、FlexBox、Grid布局

块级vs行级：

css盒模型：
  1. content-box:默认指定的宽度、高度是content的width和height 预留width和height放置content，之外还有padding、border、margin

  • content-box.png

  • width: 指定content box的宽度 取值为长度、百分比或者auto auto由其他属性决定 百分比取决于容器的content box 高度同上、但是容器有具体高度时、百分比才生效

  • padding: 四个方向 百分数也是相对容器宽度

  • border: 三种属性：指定样式、粗细和颜色 border-width、border-style、border-color 四个方向 case 画三角形

  • margin: 四个方向 取值为长度、百分比或者auto 百分比取决于容器的content box margin:auto水平居中 margin collapse：垂直方向上存在边距重叠->取较大值

  1. border-box:预留width和height放置content，padding、border、margin

  • border-box.png

  • overflow:visible、hidden、scroll

  • 块级：不会并排摆放、独占一行 适用盒模型属性 块级元素组成(body article div main section h1-6 p ul li等) display:block

  • 行级：可以放在一行 行级元素组成(span em strong cite code) 行级元素内容分散在多个行盒(line box)中 display:inline

display属性:

  • block：块级盒子
  • inline：行级盒子
  • inline-block：本身是行级、可以放在行级中、也可以设置宽高、作为整体不会被拆散成多行
  • none：排版时完全被忽略

行级排版上下文IFC(inline)： 只包含行级盒子的容器会创建IFC 排版规则： 盒子内一行内水平摆放，放不下时换行展示 text-align决定一行内盒子的水平对齐 vertical0align决定盒子在行内的垂直对齐 避开浮动元素

块级排版上下文BFC(block)： 某些容器会创建一个BFC

  1. 根元素
  2. 浮动、绝对定位、inline-block
  3. Flex子项和Grid子项
  4. overflow值不是visible的块盒
  5. display:flow-root 排版规则： 盒子从上到下摆放 垂直margin合并 BFC内盒子的margin不会与外面的合并 BFC不会和浮动元素重叠

Flex布局

一种新的排版上下文 控制子级盒子的：

  1. 摆放流向
  2. 摆放顺序
  3. 盒子宽度和高度
  4. 水平和垂直方向的对齐 主轴、侧轴
  5. 是否允许拆行

flexibility: 设置子项的弹性： 容器有剩余空间时 flex-grow 容器空间不足时 flex-shrink 没有伸展或收缩时的基础长度 flex-basis

Grid布局（二维）

display:grid生成块级的Grid容器 grid-template-columns、grid-template-rows将容器划分为网格 设置每一个子项占哪些列

grid line网格线 grid-row-start grid-column-start grid-row-end grid-column-start ->grid-area

  1. 浮动 实现文字环绕的效果

  2. 绝对定位 position属性

  • static:默认值，非定位元素

  • relative:相对自身原本位置偏移、不脱离文档流 常规流里布局，相对于自己本应该在的位置进行偏移 使用top、left、bottom、right设置偏移长度 流内其他元素当它没有一样偏移

  • absolute:决定定位，相对非static祖先元素定位 脱离常规流相对于最近的非static祖先定位 不会对流内元素布局产生影响

  • fixed:相对视口绝对定位

avatar
文章
阅读
粉丝