2021-05-27

弹性盒布局方式：
1：圣杯布局（上中下自适应（上下固定，中间自适应），左中右自适应（左右固定，中间自适应）

2：悬挂式布局（左侧图片宽度固定，右侧盒子自适应）

3:输入框布局（左右两个按钮宽度固定，中间文本框自适应）

4：流式布局（内容自动换行）

怪异盒模型（IE盒模型）
Box-sizing:content-box(标准盒模型) css设置的大小不包含 padding border

Box-sizing:border-box(怪异盒模型) css设置的大小包含 padding border

多列：
1：设置列的个数: column-count
2: 设置列间隙： column-gap
3: 设置列边框 ：column-rule: column-rule-width column-rule-style column-rule-color;
4: 合并列： column-span:all(合并所有列) none(默认值，不跨列)
5： 设置列的宽度： column-width 和column-count 有冲突
6： 列宽度和列的个数的复合属性： columns: column-width column-count; 一般情况写columns:3;
7: 设置和检索所有列的高度是否统一： column-fill:auto（根据内容自适应）/balance(默认的值，所有列的高度是和最高列的高度一样)

8： 禁止拆分标签 ：break-inside:avoid;

重点： 使用场景-----多列瀑布流

媒体查询：

基本语法：
Css3提供（推荐）
@media 媒体类型 and （条件表达式1） and (条件表达式2){
Css 语法
}

Css2提供
Link href=”css路径” media=”媒体类型 and (条件表达式)”

媒体类型：
All----所有设备
Screen—显示器 ，电脑，平板，手机等

关键字 not:排除某种设备 only（只有某种设备）写的位置
@Media not(only) 媒体类型 and (条件表达式)

条件表达式：

手机横屏： orientation:landscape;
手机竖屏: orientation:portrait;

视口
Meta name=”viewport”
content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”

响应式定义及原理：
定义：
根据浏览器或者设备尺寸决定页面结构，表现，行为的设计方式。
原理：
通过媒体查询查询不同的设备
手机端开发添加视口
Meta name=”viewport”
content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”