CSS-布局|青训营笔记

Kuon_Fukasawa
112 阅读6分钟

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

布局(Layout)是什么？

  • 确定内容的大小和位置的算法
  • 根据元素、容器、兄弟节点和内容信息来计算，与计算值相关

（在进行布局的时候 与位置相关的值设置为相对值可以让页面能够适应更多大小的窗口）

盒模型

网页封装HTML元素在盒子里，称之为盒模型，可以说是一切的基础。盒模型包括4个内容：

  • 内容(content)：
    width：可用来设置宽度（长度、百分数、auto（由浏览器根据其他属性确定））
    height 可以用来设置高度取值，与width类似，不过只有容器在有指定的高度时百分数才会生效

  • 内边距(padding)：百分数相对于容器宽度

  • 边框(border)：指定容器边框样式、粗细和颜色

    • 3种属性：width, style color
    • 4个不同的方向top, right, bottom, left
    • 如果需要组合使用属性和方向，则应该将方向列在前，属性列在后
    • 元素的4条边框颜色不一样的时候，它们的衔接处将会是斜切的，若元素宽高为0，那么会生成4个颜色不同的三角形， 可以根据这种特性制作不同形状的三角形

  • 外边框(margin)：auto水平居中， collapse重叠

  • 如果容器里的内容超出文字的大小，则可以使用overflow解决这个问题 box model box model_2
    上面4个内容可以构成多个盒子，比如：

  • 内容盒（仅内容）

  • 填充盒(padding)：是同时含有内容和内边距的盒子

  • 边框盒：是含有内容，内边距和边框的盒子
    box

display属性

  • inline-block本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行

  • none在排版时可以完全被忽略

  • block level Box不和其他盒子并列排放，适用所有的盒模型属性

  • inline level box 和其他行级盒子放在一起或拆开成多行，不适用height，width

CSS静态布局有常规流、浮动以及定位三大类。

常规流

也称文档流布局，所有元素默认状态都是文档流布局。此布局中块盒独占一行，水平方向依次排列。 表现方式比较单一，只能从上到下依次排列

  • 常规流(flow)根元素、浮动和绝对定位的元素会脱离常规流

  • 其他元素都在常规流之内(in-flow)

  • 常规流中的盒子在某种排版上下文中参与布局，包括

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

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;
BFC内的排版规则
  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠
Flex Box 是什么?
  • 一种新的排版上下文，它可以控制子级盒子的:

    • 摆放的流向(上下左右)

    • 摆放顺序

    • 盒子宽度和高度

    • 水平和垂直方向的对齐是否允许折行

    • 什么是主轴与侧轴？
      主轴侧轴

    • justify-content

      • flext-start
      • flex-ent
      • center
      • space-between
      • space-around
      • space-evenly
      • stretch（默认值）
      • baseline基线

    • Flexbility 单一方向布局模式

      • 可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩
      • flex-grow 有剩余空间时的伸展能力，值表示伸展能力大小
      • flex-shrink 容器空间不足时收缩的能力
      • flex-basis 没有伸展或收缩时的基础长度

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

Grid 最强大的布局模式
  • display: grid 使元素生成一个块级的 Grid 容器
  • 使用 grid-template 相关属性将容器划分为网格，设置每一个子项占哪些行/列
  • grid line网格线
  • grid area 网格区域

定位(position)

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

  • relative：相对自身原本位置偏移，不脱离文档流

    • 常规流里布局
    • 相对自己本来的位置偏移
    • top，left，bottom，right设置偏移长度
    • 流内其他元素当它没有偏移一样布局

  • absolute：绝对定位，相对非 static 祖先元素定位

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

  • fixed：相对于视口绝对定位

浮动

让元素漂浮起来。浮动的元素不再占用常规流中元素的位置推荐设置布局时逐个设置属性， 避免浮动属性后已写好的元素位置改变，打乱原本属性设置过程。

只需要在CSS中对元素加上float属性就能完成浮动设置（left ,right, none(默认值)）。

浮动的应用：
  • 设置二级菜单时，菜单栏内的并列选项可以利用浮动实现同行显示
  • 文档元素若分布在浮动元素周围可以实现文字环绕图片效果
  • 布局中完成各种常规流无法实现的结构
浮动的特点

设置浮动后，浮动元素相当于被转化为块盒，但此时对浮动的行盒也可以设置宽高，不用局限于元素盒子的类型

浮动元素在浮动过程中会避开常规流盒子，但反过来不是这样

浮动元素可以自动换行

高度坍塌：
  • 父元素中不能只有浮动的子元素，否则在父元素的高度没有设置具体大小的时候，会发生父元素的高度无法撑起变成0的现象
  • 父元素的高度坍塌会导致父元素的样式无法正常显示样式的现象
  • 高度坍塌会导致其他元素上移，从而改变原有的布局
避免高度坍塌：
  • 前面提到，高度坍塌是在父元素没有设置高度的情况下发生的，所以给父元素定义高度是一种解决高度坍塌的方案
  • 给父元素装上伪类选择器：after，优点是对内容几乎没有影响，也不需要指定父元素高度，盒子大小更灵活
  • 给父类里加上一个设置了clear:both属性的空div ，思路与atfer的使用一样
  • 将父级的Overflow属性设置为visible以外的值，如hidden即可，不过是为auto时看浏览器是否默认为visible
    这样做的好事好处是可以触发BFC(Block Formatting Context)块级格式化上下文，使浮动元素也参与高度的计算
  • 为父类加上display:table，但是副作用很大
  • 父类也设置为浮动元素，但是容易导致页面布局混乱，还不易于后期维护
avatar
文章
阅读
粉丝