盒模型: box-sizing:; content-box 标准盒模型 border-box 怪异盒模型(IE盒模型) W = width(包含了border padding) + margin H = height(包含了border padding) + margin 【拓展】 丢失 在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: flex-flow:主轴方向 是否换行;
5: justify-content:主轴对齐方式;
flex-start 起始位置
center 居中
flex-end 结束位置
space-between 两端对齐
space-around 两端平分
space-evenly 平均分配
6: align-items:侧轴对齐方式;
flex-start 起始位置
center 居中
flex-end 结束位置
stretch 拉伸(默认值)
baseline 文本底部对齐
7: 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:布局响应
响应式开发的特点
特点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性 质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
