BootStrap
发布时间：2020-12-17 21:25:04 所属栏目：安全 来源：网络整理
导读：0.基本概念 ?采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 1.传统固定布局： ?实现方法：用width和height指定宽高px值、以及float浮动 ?缺点：有空白
|
0.基本概念
?采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
1.传统固定布局：
?实现方法：用width和height指定宽高px值、以及float浮动
?缺点：有空白、且无法随浏览器窗口变化而调整大小和布局
2.百分比布局：
?实现方法：用width和height指定宽高%值，以及float浮动
?缺点：有空白?
3.Flex伸缩布局：
?实现方法：
? 3.1.给容器元素设置display:flex属性
? 3.2.通过给【项目】(容器内子元素)的flex属性，来设置项目比例。例如项目A的flex:1,项目B的flex:2，表示A与B的宽度为1:2
? 3.3.flex-direction排列方向（主轴）:
? ?row: 默认.把项目排列的主轴设置为水平方向，从左到右
? ?row-reverse: 水平方向，从右到左
? ?column: 垂直方向，从上到下
? ?column-reverse: 垂直方向，从下到上
? 3.4.flex-wrap单行/多行:
? ?nowrap: 默认.不换行
? ?wrap: 换行
? ?wrap-reverse: 倒序换行
? 3.5.justify-content主轴对齐方式:
? ?flex-start: 向主轴起始位置靠拢对齐
? ?flex-end: 向主轴结束位置靠拢对齐
? ?center: 主轴方向居中
? ?space-between: 两头对齐（中间空白）
? ?space-around: 平均分布（两头、中间空白）
? 3.6.align-items侧轴对齐方式:
? ?flex-start: 向主轴起始位置靠拢对齐
? ?flex-end: 向主轴结束位置靠拢对齐
? ?center: 主轴方向居中兼
? ?baseline: 两头对齐（中间空白）
? ?stretch: 平均分布（两头、中间空白）
??
4.响应式布局方案：
?4.1.媒体类型：all、screen、print、tv、projection等
?4.2.引入媒体类型两种方式：
? @media print{
? ?div{height:10px}
? }
??
? <link rel="stylesheet" href="style1.css" media="print"/>
?4.3.媒体特性
? max-width: 最大宽度
? min-width: ?
? device-width: 设备屏幕输出宽度
? device-height: 设备屏幕输出高度
? width: 渲染界面宽度
? height: 渲染界面高度
? orientation: portrait横屏/landspace竖屏
? resolution: 分辨率
? color: 每种色彩字节数
? color-index: 色彩表中的色彩数
?4.4.媒体查询语法：
? @media [and/only/not] 媒体类型 and/only/not (媒体特性) {样式}
? 【举例】：
? 1.样式用于电脑显示屏和屏幕宽度小于1200px的设备
? @media screen and (max-width:1200px){样式}
??
? 2.用于浏览器兼容。用于支持媒体类型(screen)却不识别媒体特性(max-width)的老浏览器
? <link rel="stylesheet" href="sty.css" media="only screen and (max-width:500px)"/>
??
? 3.样式用于除打印机和屏幕小于1200px之外的所有设备
? @media not print and (max-width:120px){样式}
5.响应式布局设计模式
?布局不变，
? 内容挤压-拉伸
? 换行-平铺
? 增减内容
?布局改变
? 模块位置变换
? 模块展示方式改变
? 模块数量改变
??
6.响应式布局两个前提：
?6.1.能自动调整布局（弹性布局）
?6.2.能自动感知设备大小
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |