深入理解CSS精简版(中 : 布局部分)

上一篇:深入理解CSS精简版 (上 : 基础部分)

五 FlexBox

1. 概念

1.1 flex 简介

子元素按照主轴排列,垂直于主轴的是副轴。

2. 属性 & 单位

2.1 容器属性

  • flex-direction: 指定主轴方向

    • row(默认) / row-reverse / column / column-reveres
  • flex-wrap: 是否换行

    • nowrap(默认) / wrap / warp-reverse
  • flex-flow: flex-direction 、flex-direction 简写

  • justify-content: 控制子元素在主轴上的位置

    • flex-start(默认) / flex-end / flex-center / space-between / space-around
  • align-items: 控制子元素在副轴上的位置

    • stretch(默认) / baseline / flex-start / flex-end / center
  • align-content: 控制子元素整体在容器中的位置

    • flex-start(默认) / flex-end / flex-center / stretch / space-between / space-around:

2.2 子元素属性

  • flex-grow: 决定子元素填充未使用空间的比例
  • flex-shrink: 子元素宽度超出父元素时,决定收缩比例。
  • flex-basis: 元素初始大小。
    • auto(默认) / length:
  • flex: flex-grow、flex-shrink、flex-basis 简写
    • none: 0 0 auto
    • auto: 1 1 auto
    • x y z : 可省略,省略某参数默认值为 x = 1 ,y = 1, z = 0%
  • align-self: 子元素在副轴上的位置,覆盖 algin-items 的值
  • order: 子元素位置排序

3. 其他

3.1 flex 子元素布局添加外边距填充剩余空间

外边距设置 auto,可填充所有剩余空间。

六 Grid

1. 概念

1.1 Grid 简介

定义由行和列组成的二维布局,当要求元素在两个维度都对齐的时候,使用 Grid 布局。

1.2 Grid 布局组成要素

  • 网格线: 网格线构成了网格的框架,grid-gap 就位于网格线。

  • 网格轨道: 两条相邻的网格线之间就是网格轨道,有水平轨道和垂直轨道两种。

  • 网格单元: 网格上的单个空间,水平和垂直的网格轨道重叠的部分。

  • 网格区域: 网格上的矩形区域,由一个或多个网格单元组成。位于两条水平网格线和垂直网格线之间。

显式/隐式网格

  • 显式网格: 使用 grid-template-columns + grid-template-rows 声明的网格
  • 隐式网格: 超出显示网格定义的部分

2. 属性 & 单位

2.1 容器属性

  • grid-template-columns/rows: 显式生成的单元网格,列/行设置

    • none(默认值) / auto / max-content / min-content / length
  • grid-auto-columns/rows 隐式(自动生成的)网格单元列/行的大小

    • auto(默认) / fit-content() / max-content / min-content / minmax(min,max) / length / %
  • grid-auto-flow: 优先放满 列/行

    • row / column + ?dense
  • grid-template-areas: 定义网格区域

  • grid-column / row-gap: 列/行间距

  • grid-gap: grid-column-gap、grid-row-gap 简写

  • justify-content: 行水平对齐

    • start / end / center / stretch / space-around / space-between / space-evenly
  • align-content: 列垂直对齐

    • start / end / center / stretch / space-around / space-between / space-evenly
  • place-content: justify-content、align-content 简写

  • justify-items: 区块水平对齐

    • start / end / center / stretch
  • align-item: 区块垂直对齐

    • start / end / center / stretch
  • place-items:  justify-items、align-item 简写

2.2 子元素属性

  • grid-column/row-start/end: 起/始 列/行

  • grid-column/row 起始列/行

  • grid-area: 区域名或起始列/行简写

  • justify-self: 单独设置区块垂直对齐

    • start / end / center / stretch
  • align-self: 单独设置区块垂直对齐

    • start / end / center / stretch
  • place-self: justify-self、align-self 简写

2.3 单位

  • fr: 类似 flex-flow

  • minmax: minmax(最小宽度,最大宽度)

  • repect(): 重复生成列/行

  • auto-fill: 尽量多生成网格,会出现空网格。

  • auto-fit: 不会出现空网格,会让非空网格填满空白区域

3. 其他

3.1 给网格线和网格区域命名

  • 给网格线命名
css 复制代码
// 定义三条垂直网格线的名称。
grid-template-columns: [start] 1fr [center] 1fr [end];

// 定义网格名称的同时,定义了一个[left]区域(left-start 和 left-end 之间范围)
grid-template-columns: [left-start] 1fr [center] 1fr [left-end];

// 重名线,使用start 1 、start 2
grid-template-columns: [start] 1fr [start] 1fr [end];
  • 给区域命名
css 复制代码
// 容器 列之间用空格分隔,行之间用换行,用. 空出一个单元格
grid-template-areas:
  "area1 area2"
  ". area3"

// 子元素
grid-area:area1

// 容器 一个区域占多个网格
grid-template-areas:
  "area1 area1"
  ". area3"

3.2 CSS 特性查询

  • @supports<特性>: 支持才会使用里面的样式规则
  • @supports not<特性>: 不支持才会使用里面的样式规则
  • @supports not <特性> or <特性>: 支持其中一个就使用里面的规则
  • @supports not <特性> and <特性>: 两个都支持才使用里面的规则

3.3 CSS 文字转换

  • text-transform: 文字转大小写

七 定位和层叠上下文

1. 概念

1.1 定位

将元素将文档里中移走。包含以下几种:

  • 固定定位: 以视口作为包含块
  • 绝对定位: 以 position 不为 static 的祖先元素作为包含块
  • 相对定位: 设置偏移,不影响周围元素布局
  • 粘性定位: 相对定位和固定定位的结合体,正常情况下,元素随页面滚动,当到达某个位置,会锁定

1.2 层叠上下文

给一个定位元素加上 z-index 的时候,这个元素就是层叠上下文的根元素,里面所有的定位元素的 z-index 只会在这个元素里面层叠,不会和外面的其他元素互相影响。

层叠上下文中元素叠放顺序:

  • 层叠上下文的根元素
  • z-index 为负数的定位元素
  • 非定位元素
  • z-index 为 auto 的元素
  • z-index 为正数的元素

1.3 z-index

定位元素按 z-index 层叠排列,数字越大越靠前,数字一样的情况下,按渲染时间越后越靠前。 定位元素 z-index 非负数在非定位元素之上,反之在之下。

2. 属性 & 单位

2.1 属性

  • position: 定位方式

    • static(默认) / flex / absolute / relative / sticky
  • z-index: 层级

3. 其他

3.1 实现三角形

设置较粗的边框,宽高设置为 0 ,每一条边就是一个三角形,要留哪一个方向的,保留对应的边即可。

八 响应式设计

1. 概念

1.1 响应式设计原则

  • 移动优先: 优先构建移动版布局,再构建桌面版。
  • @media 规则: 媒体查询,为不同大小的视口定制样式。
  • 流式布局: 允许容器根据视口宽度缩放尺寸,通常不会有明确的宽度。

1.2 尺寸断点

断点可以理解为适配的尺寸的边界点,如大、中、小屏幕对应的 min-width

2. 属性 & 单位

2.1 媒体查询

  • and 或 or

    • and 符连接的代表两个条件都符合时才生效
    • ,(逗号)连接的代表两个符合其中一个就生效
  • 媒体特征

    • min-width / max-width / min-height / max-height : 匹配符合条件的宽高
    • orientation: landscape(视口宽度大于高度) / portrait(视口高度大于宽度)
    • min-resolution / max-resolution : 匹配屏幕分辨率 1dppx 表示每一 css 像素包含的物理像素点
  • 媒体类型

    • @media screen / media print : 屏幕或者打印机

2.2 使用 srcset 提供对应的图片

分辨率低的屏幕显示高于自身分辨率的图片,展示的图片分辨率并不能突破硬件限制。 使用 srcset 可以为不同大小视口提供不同分辨率的图片资源,以节省资源。

相关推荐
小飞悟16 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖19 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子28 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang29 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端
Xy9101 小时前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js