布局

用户5446496532562
124 阅读6分钟

布局

  • 确定内容的大小和位置的算法

  • 依据元素，容器，兄弟节点和内容等信息来计算

布局相关技术

将每一个标签都看作一个盒模型

  • 常规流：又分为行级，块级，表格布局，FlexBox，Grid布局

  • 浮动

  • 绝对定位

Content区域

width

  • 指定 content box 宽度
  • 取值为 长度， 百分数， auto
  • auto又浏览器根据其他属性确定
  • 百分数相对于容器的 context box 宽度

heigth

  • 指定 content box 高度
  • 取值为 长度， 百分数， auto
  • auto又浏览器根据其他属性确定
  • 百分数相对于容器的 context box 宽度
  • 容器有指定高度时，百分数才生效

padding区域

  • 指定元素四个方向的内边距
  • 百分数相对于容器 宽度 写一个值时是四边等宽； 写两个值时，第一个值是上下边框宽度，第二个是左右； 写四个值时，按上有下左顺序；

border区域

  • 指定容器的边框样式，粗细和颜色

三种属性

四个方向

margin区域

盒模型

overflow属性

当内容超出时的行为的属性

  • auto 没有溢出时正常，溢出时显示滚动条
  • visible 溢出显示
  • hidden 隐藏
  • scroll 滚动，不溢出也会显示滚动条

块级VS行级

     块级                                       行级
Block Level Box                         Inline Level Box
不和其他盒子并列摆放                      和其他行级盒子并列摆放在一行或拆开成多行
舒勇所有盒模型属性                        盒模型的width，height不适用

  块级元素                                    行级元素
body，article，div，main，h1-6           span，em，strong，cite，code，img
ssection，p，ul，li
display：block                           display：inline

display属性

常规流

CSS里创造的最基础的布局规则，在这个布局规则，大原则时 ：块级盒子从上到下，从左到右一个一个去摆放，行级盒子一行一行去摆放，不遵循这个原则的可以认为不在常规流里面或者时流外的一些元素。

- 根元素，浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内(in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

块级排版上下文

  • Bllock Formatting Context (BFC)
  • 块级盒子插在行级盒子中会将行级盒子拆分多个行级
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动，绝对定位，inling-block
    • Flex子项和Grid子项
    • ovewflow值不是visible的块盒
    • display ：flow-root
  • 用途
    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 没盒子的 margin 不会与外面的合并
    • BFC 不会和浮动元素重叠

Flex Box排版上下文是什么

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向(→ ← ↑ ↓)
    • 摆放顺序
    • 盒子的宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行
  • flex-direction 控制摆放方向，默认值是 row，flex-direction指定的方向是主轴，跟他垂直的是侧轴
    • row 从左到右
    • row-reverse 从右到左
    • column 从上到下
    • column-reverse 从下到上
  • justify-content 控制水平对齐
    • flex-start 起点是主轴的起点方向对齐依次排列
    • flex-end 起点主轴的终点方向一次排列
    • space-between 在元素间均匀的插上空白
    • space-around 空白不仅插到元素中间，也会查到两边，但两边空白和中间的不相等
    • space-evenly 在元素中间和两边均匀的插上空白
  • align-items 控制垂直对齐
    • flex-start
    • flex-end
    • center
    • stretch 每个元素都尽可能的拉伸到整体的一个高度
    • baseline 每个元素的baseline做对齐
  • align-self 给特定元素设定样式
  • order 跳出html的顺序进行排列 给元素设定order，元素按照order大小依次摆放

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；空间不够时，会收缩；

  • flex-grow 有剩余空间时的伸展能力，默认是0，表示不能伸展，伸展规则：先减去所有容器的大小，再将剩余的容量按比例分配每一个元素

  • flex-shrink 容器空间不足时收缩的能力，默认是1，表示能压缩，压缩规则：先减去所有容器的大小，再将剩余的容量按比例分配每一个元素

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

  • 可以将上述三个属性压缩为一个 flex 属性

      flex:1          flex-grow:1
  flex:2 1        flex-grow:2;flex-shrink:1
  flex:100px      flex-basis:100px
  flex:1 100px    flex-grow:1;flex-basis:100px
  flex:2 0 100px  flex-grow:2;flex-shrink:0;flex-basis:100px
  flex:auto       flex:1 1 auto
  flex:none       flex:0 0 auto

Grid 布局

Grid是一个二维的布局方式

  • display:grid 是元素生成一个块级的 Grid 容器

  • 使用 grid-template 相关属性将容器划分为网格

  • 设置每一个子项应该占据那些子项

  • 划分网格

      grid-template-columns:100px 100px 100px;     先画三道线将列划为100 100 200 三块
  grid-template-rows:100px 100px;              将列画出100 100 两行
  
  grid-template-columns:30% 30% auto;     前两列各占30%，第三列剩余的
  grid-template-rows:100px auto;          第一行占100 第二列占剩余的
  
  grid-template-columns:100px 1fr 1fr;    第一列占100，剩下的划分成2份，二三各占一份
  grid-template-rows:100px 1fr;           第一行100，剩下的划分成1份，第二行独占

  • grid ling 网格线：对横向和纵向给网格线进行数字标记，然后在标记区域，如1 1 3 3 表示从第一行，第一列开始，到第三行，第三列结束(不包含第三行，第三列)

    .a {
    /* 表示从第一行,第一列开始,到第三行,第三列结束(不包含第三行,第三列) */
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;
}
.a {
    /* 表示从第一行,第一列开始,到第三行,第三列结束(不包含第三行,第三列) */
    grid-area: 1/1/3/3;
}

float浮动

一般用于图文环绕

position 属性绝对定位

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对非 static 祖先元素定位
  • fixed 相对于视口绝对定位

position:relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用 top，left，bottom，right设置偏移长度
  • 流内的其他元素当他没有偏移一样布局

position:absolute

  • 脱离常规流
  • 相对于最近的非 static 祖先定位
  • 不会对流内其他元素布局造成影响

position:fixed

相对于屏幕进行定位

avatar
文章
阅读
粉丝