新时代CSS布局

陈慧晶 | @hj_chen | jing74737871

🥑 开发大使 🥑

_______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

|    element width    |

|               box width               |

CSS布局部队

等属性…

CSS显示模块CSS Display Module Level 3

内部显示类型Inner display type

定义了元素内子元素的布局方式

外部显示类型Outer display type

定义了元素怎样参与流式布局的处理

Flex简写及关键字

[ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]   

自动margin是你的好友

自动margin是你的好友

为什么块格式自动margin不垂直居中元素？

If both margin-left and margin-right are auto, their used values are equal, causing horizontal centring.

—CSS2 Visual formatting model details: 10.3.3

If margin-top, or margin-bottom are auto, their used value is 0.

—CSS2 Visual formatting model details: 10.6.3

容器–项目的「父子」关系

CSS盒式对齐模块CSS Box Alignment Level 3

Flexbox

• align-content
• justify-content
• align-items
• align-self

justify-items/justify-self 在flex项目是用不上的。

Grid

• align-content
• justify-content
• align-items
• align-self
• justify-items
• justify-self

justify-content 和 align-content

justify-content 和 align-content

justify-self 和 align-self

justify-items 和 align-items

align-items 和 align-self

Grid或者Flexbox?

问错了!

Flexbox（单维）

Grid（二维）

Grid和Flex合作愉快

百分比的局限

一致性的伸缩率

以内容为主的尺寸计算方式（content-based sizing）

独特的灵活性尺寸（flexible sizing）

• fr
• auto
• minmax()
• fit-content()

fit-content(400px)等于minmax(auto, max-content)，但是终宽度不能超出400px。

fr对比auto

绿色：fr，蓝色：auto

max-content对比固定width

灰色：max-content，粉红色：400px

fit-content对比minmax()

橙色：fit-content(200px)，黄色：minmax(200px, 400px)

支持旧款浏览器

利用@supports，本地CSS功能检测

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

致谢

谢谢CSS女神/攀岩高手，皋玮，做我的编辑。

参考链接

• WorldWideWeb 浏览器
• Before Netscape: the forgotten Web browsers of the early 1990s
• Cascading Style Sheets, level 1 (W3C 推荐标准 17 Dec 1996)
• CSS属性列表
• CSS显示模块 Level 3
• CSS弹性盒式布局模块 Level 1
• CSS2.1: 10 视觉格式化模型细节
• CSS盒式对齐模块 Level 3
• CSS Intrinsic & Extrinsic Sizing Module Level 3
• Cascading Web Design with Feature Queries
• 渐进增强布局

谢谢!

https://www.chenhuijing.com

jing74737871

huijing

@huijing

拉丁字体是由 Olivier Gourvat 设计的 Magnetic Pro