弹性盒布局方式:
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”