title: “盒子模型、文档流、定位、布局和响应式设计”
盒子模型 当我们设置盒子的宽度与高度的时候，设置的是 content 的高度与宽度，padding 和 border 没有被计算进去。 可通过 box-sizing 设置盒子模型的大小，默认情况下是值 content-box，即计算内容区计算盒子大小。实际项目中，会按照 border-box 计算盒子大小，会将盒子外边框(margin)设置为 0。
文档流 盒子在文档中如何排列，即行内块元素和块元素。
定位 坐标定位
- static：位置不会发生变化。
- relative：指元素相对其所在文档流的位置坐标，元素在文档流中的原始位置被保留，不会影响其它元素的位置。
- absolute：脱离文档流，并且会查找第一个非 static 的父元素作为其相对坐标参照物。
- fixed：脱离文档流，针对窗口进行定位。
文章图片
文章图片
页面布局 Flex 布局
【css|盒子模型、文档流、定位、布局和响应式设计】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
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
命名区域
文章图片
浮动区域
文章图片
响应式 web 设计 视窗响应：在不同视窗中保证网页按原始大小占据屏幕，不会发生像素缩放。
文章图片
样式响应
文章图片
像素响应
文章图片
图片响应
文章图片
推荐阅读
- 代码实例效果精选|哈哈哈 原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情 搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好
- WEB前端基础HTML+CSS|less变量
- 前端|SVG 在前端的7种使用方法，你还知道哪几种（）
- CSS3|什么是BFC,BFC的使用
- html|手把手教你用vuepress搭建自己的网站(2)
- css|【前端】Emmet语法、CSS复合选择器、元素显示样式
- 笔记|CSS设置背景颜色透明
- html5|（前端知识点）CSS3 新特性与html5 新特性
- 微软|9个值得推荐的 VUE3 UI 框架