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 设计
视窗响应:在不同视窗中保证网页按原始大小占据屏幕,不会发生像素缩放。
样式响应
像素响应
图片响应