什么是布局
浮动 定位 盒模型
块级元素
块级元素独占一行，不和其他元素并排；可以设置宽高和上下外边距； 不设置宽度时默认宽度 100%；可以容纳其他块元素和内联元素； 常见的块级元素：div h1~h6 p ul ol li dl dt dd，以及 table form等。
行内元素
不霸占位置，可以和其他行内元素或文字内容并排，不支持设置宽高，默认宽高为0，内容撑 开宽高； 只能容纳文本和其他内联元素；不能设置上下外边距； 常见的内联元素：a span b i strong em del等。
合理布局
优点 使内容更加清晰 更便于搜索 更利于搜索引擎爬取
CSS flex布局
什么是flex
1、flex 布局 为 flexible BOX 的缩写 ，意思为 弹性布局。
2、块级元素和行内块级元素都可以使用flex布局
Flex容器
常用属性
元素的空间分配
flex-grow
此属性决定项目的放大比例。剩余空间的分配
.box{
flex-grow: 5; // 默认为 0
}
flex-shrink
此属性决定项目的缩小比例。
.item {
flex-shrink: number; // 默认为1.要将哪个项目缩小 值设为0 ；
}
flex-basis
此属性定义 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex
此属性定义为 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{flex: flex-grow flex-shrink flex-basis; // 简写方式 }
元素的对齐
align-items
此属性定义，项目在交叉轴上的对齐方式
.flex{
align-items: flex-start; // 交叉轴的起点对齐
align-items: flex-end; // 交叉轴的终点对齐
align-items:center; // 交叉轴的中点对齐
align-items: baseline; // 项目的第一行文字的基线对齐
align-items: stretch; // (默认值) 如果项目未设置高度或设为auto ，将充满整父级容器高度
}
justify-content
此属性定义，项目在主轴上的对齐方式
.flex{
justify-content: flex-start; // 左对齐（默认）
justify-content: flex-end; // 右对齐
justify-content: center; // 居中
justify-content: space-between; // 两端对齐。且项目间间隔相等
justify-content: space-around; // 每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍
justify-content: space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}
使用flexbox的原因
在元素外部处理空间分布 让元素自己处理空间分布
css 布局
定位
定位能够把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置
. position :
. static 静态定位
. relative 相对定位
. absolute 绝对定位
. fixed 固定定位
. sticky 粘性定位
浮动
．把一个元素"浮动"起来，会改变该元素本身和在正常布局流中跟随它的其他元素的行为。
．这一元素会浮动到左侧或右侧，并且从正常布局流中移除，这时候其他的周围内容就会在这个浮动元素的周围环绕。
web布局
响应式布局
响应式设计
．早年设计 web 时，页面是以适配特定的屏幕大小为考量创建的 。 ．随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念 ( RWD )。
. RWD 指的是允许 web 页面适应不同屏幕宽度因素等，进行布局和外观的 调整的一系列实践。
响应式之前
．创建"液态"站点，它会拉伸以充满整个浏览器窗口
．缺点：小屏幕设计挤成一团、大屏幕长度过长难以阅读
."固定宽度"站点，它有一个以像素为单位的固定尺寸．缺点：小屏幕上出现滚动条、大屏幕上空白较多
实现响应式
设置 meta 标签
．响应式设计不是指某项单独的技术，它是描述 web 设计的一种方式．设置 meta 标签
.< meta name =" viewport ” content =" width = device - width , initial - scale =1, maximum - scale =1, user - scalable = no ">
设置 meta 标签，是为了告诉浏览器，使用设备的初始宽度作为视图的宽 度，并且禁止缩放
媒体查询
．媒体查询即针对不同的设备尺寸，设置对应的样式
．随着屏幕宽度的增大或减小，后面的样式会覆盖前面的样式。
．因此，针对我们的项目是考虑移动端为主，还是 pc 端为主，样式的优先 顺序会不同。
．移动端我们优先使用的是 min - width , PC 端优先使用的是 max - width
．长度单位的合理使用
长度单位
. rem ( font size of the root element )
．百分比
．视口单位 vh 、 ww 、 vmin 、 vmax 合理使用长度单位
．移动端屏幕的 rem
．占满宽度的元素％优于ww
．占满高度的元素 vh 优于％
