BootStrap

Posted 2022-04-04 wzdnwyyu

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

   divheight: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.能自动感知设备大小