盒子模型、文档流、定位、布局和响应式设计

---

title: “盒子模型、文档流、定位、布局和响应式设计”

---

盒子模型

当我们设置盒子的宽度与高度的时候，设置的是 content 的高度与宽度，padding 和 border 没有被计算进去。 可通过 box-sizing 设置盒子模型的大小，默认情况下是值 content-box，即计算内容区计算盒子大小。实际项目中，会按照 border-box 计算盒子大小，会将盒子外边框(margin)设置为 0。

文档流

盒子在文档中如何排列，即行内块元素和块元素。

定位

坐标定位

• static：位置不会发生变化。
• relative：指元素相对其所在文档流的位置坐标，元素在文档流中的原始位置被保留，不会影响其它元素的位置。
• absolute：脱离文档流，并且会查找第一个非 static 的父元素作为其相对坐标参照物。
• fixed：脱离文档流，针对窗口进行定位。

浮动定位

页面布局

Flex 布局

Flex 容器

• 排列方向(flex-direction)
  

注意：反转的时候开始和结束位置页反转了

• 溢出处理（flex-wrap）：no-wrap、wrap、wrap-reverse
  

• 对齐方式（align-items(纵向) 和 justify-content（横向））：flex-start、center、space-between、space-around、flex-end
  
  

注意：反转之后，纵向变横向，横向变纵向。

Flex元素

• flex-grow、flex-shrink、flex-basis
  
  
  
  
  

Grid 布局

命名区域

浮动区域

响应式 web 设计

视窗响应：在不同视窗中保证网页按原始大小占据屏幕，不会发生像素缩放。

样式响应

像素响应

图片响应