盒模型:
box - sizing: ;
content box 标准盒模型
border - box怪异盒模型(IE盒模型)
W = width(包含了border padding) + margin
H = height(包含了border padding) + margin
[拓展] 丢失<!doctype html> 在ie低版本中显示怪异盒模型
flex布局:
flex容器:设置了flex的父元素
flex项目: flex元素的子元素
flex布局的基本特征:
1:默认水平方向为主轴,垂直方向为侧轴
2:项目默认沿着主轴方向排列
3:设置为flex布局后,浮动，清除浮动,vertical-align 都失效
容器属性
容器属性:(给自己设置，控制子元素)
1: display:设置 为弹性盒;
flex
inline-flex
[注]所有的flex相关属性都必须设置为了flex布局,才能生效
2: flex - direction:设置主轴方向;
row
水平主轴
row- reverse
反向水平主轴
column垂直主轴
column-reverse反向垂直主轴
3: flex -wrap :是否换行;
nowrap不换行
wrap换行
wrap - reverse反向换行
4: justify- content :主轴对齐方式;
flex-start起始位置
center居中
flex-end结束位置
space - between两端对齐
space - around两端平分
space-evenly平均分配
5: align-items :侧轴对齐方式;
flex-start 起始位置
center 居中
flex-end 结束位置
stretch 拉伸(默认值)
baseline 文本底部对齐
6: align-content :多行侧轴对齐方式;
flex-start 起始位置
center 居中
flex-end 结束位置
space between 两端对齐
space around 两端平分
space- evenly 平均分配
stretch 拉伸(默认值)
[注]必须换行的元素才能使用
项目属性
项目属性:(给自己设置，控制自己)
1: align-self: 侧轴对齐方式;
flex-start 开始位置
center 居中
flex-end 结束位置
stretch拉伸
auto 默认值(跟随父元素的align- items的值一致)
2: order:反向排序;
数字越大越靠后,反之靠前
3: flex:缩放大小;
子元素的总占位宽小于父元素的宽度,那就是放大
子元素的总占位宽大于父元素的宽度,那就是缩小
flex- grow:放大;
flex -shrink:缩小;
flex-basis:长度;
px %
多列布局
多列布局:
column-count:分列;
column -gap:列间距;
column-rule:列边框大小形态颜色;
column- fill:填充方式;
auto 优先填满上一-列
balance 尽可能平均分配
column-span:是否合并;
none 不合并
all 合并
column -width:列宽;
columns:列数列宽;
常见布局方案:
1:固定布局
2:可切换固定干部局
3:弹性布局
4:混合布局
5:布局响应
响应式开发的特点
特点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是种折中性质的设计解决方案， 多方面因素影响而达不到最佳效果
-定程度上改变了网站原有的布局结构，会出现用户混淆的情况
