布局

布局

display属性

值	描述
none	不会被显示
block	块级元素，元素前后会带有换行符
inline	内联元素,元素前后没有换行符
inline-block	行内块元素
list-item	作为列表显示
run-in	根据上下文作为块级元素或内联元素显示
table	元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
inline-table	元素会作为内联表格来显示（类似<table>），表格前后没有换行符
table-row-group	元素会作为一个或多个行的分组来显示（类似 <tbody>）
table-header-group	元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	元素会作为一个表格行显示（类似 <tr>）。
table-column-group	元素会作为一个或多个列的分组来显示（类似<colgroup>）。
table-column	元素会作为一个单元格列显示（类似<col>）
table-cell	元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

position属性

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

盒模型

外边距（margin），边框（border），内填充（padding）和内容（content）

浮动float

清除浮动，最常用的方法有两种:

• overflow: 将父元素的overflow，设置成hidden。
• after伪类：对子元素的after伪类进行设置。

静态布局（static layout）

传统Web设计，网页上的所有元素的尺寸一律使用px作为单位

流式布局（liquid layout）

页面元素的宽度按照屏幕分配率进行适配调整，但整体布局不变
网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用）

自适应布局（Adaptive Layout）

为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围

响应式布局（Responsive Layout）

通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用
创建多个流体式布局，分别对应一个屏幕分辨率范围

弹性布局（rem/em布局）

rem/em的区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素
包裹文字的各个元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸使用百分数或px做单位

flex布局

任何一个容器都可以指定为Flex布局
display: flex;

行内元素也可以使用Flex布局
display: inline-flex;

Webkit内核的浏览器，必须加上-webkit前缀
display: -webkit-flex;

注意：设为flex布局以后，子元素的float、clear和vertical-align属性将失效

容器的属性

1. flex-direction 决定主轴的方向（即项目的排列方向）

• row: 主轴为水平方向，起点在左端
• row-reverse: 主轴为水平方向，起点在右端
• column: 主轴为垂直方向，起点在上沿
• column-reverse:主轴为垂直方向，起点在下沿

2. flex-wrap 决定若一条轴线排不下，如何换行

• nowrap: 不换行
• wrap: 换行，第一行在上方
• wrap-reverse: 换行，第一行在下方

3. flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认为row nowrap;
   < flex-direction > || < flex-wrap >;

4. justify-content 项目在主轴上的对齐方式

• flex-start: 左对齐
• flex-end: 右对齐
• center: 居中
• space-between: 两端对齐，项目之间的间隔都相等
• space-around: 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

5. align-items 在交叉轴上对齐方式

• flex-start: 交叉轴的起点对齐
• flex-end: 交叉轴的终点对齐
• center: 交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch: 默认，如果项目未设置高度或设置为auto，将占满整个容器的高度

6. align-content 定义了多根轴线的对齐方式（只有一根时，不起作用）

• flex-start: 与交叉轴的起点对齐
• flex-end: 与交叉轴的终点对齐
• center: 与交叉轴的中点对齐
• space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around: 每根轴线两侧的间隔都相等，项目之间的间隔比项目与边框的间隔大一倍
• stretch: 默认，轴线占满整个交叉轴

flex布局

双飞翼布局

左右固定，中间自适应

• 通过负边距和浮动来实现
  实现原理就是margin为负值可以改变float元素的排列位置

1. 中间自适应的div需要放在left和right容器前面并且内容div需要用父容器包裹
2. left和right容器向同一个方向浮动。

• 通过浮动两边的div实现
  左右固定宽度并且向两边浮动，中间的div设置两边的margin

1. 该方式只需要注意中间自适应的div需要放在left和right容器的后面。
2. left和right容器向两边浮动。

• 通过flex属性来实现

若有错误，希望大佬们能指点指点，谢谢~ ?

参考链接：

• https://juejin.im/post/59f706a8f265da43094471a7
• https://juejin.im/post/5a260aaa6fb9a0451b0464f0