05layout.md

goer ... 2022-01-05

大约 3 分钟

css布局

[toc]

# css布局

# 1. 布局单位

网页更加美观，响应式，兼容更多的分辨率终端。

# (1).px

像素单位

相对于浏览器分辨率,例如分辨率是1366*768,那么设置1px的宽度就是屏幕宽度的1366分之1,做页面用的比较少,不好做响应式布局

# (2)em

文本单位，1em=当前文本设置font-size大小

1em=当前文本设置的font-size的大小,文本默认大小是16px
一般多行文本设置行高都用em

1
2

# (3)rem

root em 根元素html设置的font-size大小

响应式布局使用,默认1rem=16px

最常用的rem

# (2)display

元素显示模式 display:vlaue

vlaue	exlain	eg
block(块状元素)	不能在同一行显示其他任何元素,可以设置宽高	p、h标题、div、li....
inline(行内元素)	多个行内元素可以在同一行显示,不能设置宽高	a span input...
inline-block(行内块)	既可以在同一行显示,又可以设置宽高	img video audio...
none(隐藏元素)	元素被隐藏，消失不占位置	无

div{
    display:inline;
    /*display:none;*/ /*元素消失不占位置*/
    /*opacity:0;*/ /*元素还在只是看不到占位置*/
}

1
2
3
4
5

# (4) 弹性布局**

布局的传统解决方案，基于盒状模型 (opens new window)，依赖 display (opens new window)属性 + position (opens new window)属性 + float (opens new window)属性。它对于那些特殊布局非常不方便，比如，垂直居中 (opens new window)就不容易实现

display:flex 弹性布局

Flex布局将成为未来布局的首选方案。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

1
2
3
4

菜鸟教程：https://www.runoob.com/w3cnote/flex-grammar.html

讲的很好的

# 基本概念：

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

# 容器属性

flex-direction:主轴的方向
        row（默认值）：主轴为水平方向，起点在左端。
        row-reverse：主轴为水平方向，起点在右端。
        column：主轴为垂直方向，起点在上沿。
        column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
		nowrap（默认）：不换行。
		wrap：换行，第一行在上方。
		wrap-reverse：换行，第一行在下方。

flex-flow：
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content：
justify-content属性定义了项目在**主轴上**的对齐方式。
		flex-start（默认值）：左对齐
        flex-end：右对齐
        center： 居中
        space-between：两端对齐，项目之间的间隔都相等。
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
 
align-items:
align-items属性定义项目在交叉轴上如何对齐。
        flex-start：交叉轴的起点对齐。
        flex-end：交叉轴的终点对齐。
        center：交叉轴的中点对齐。
        baseline: 项目的第一行文字的基线对齐。
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。






align-content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1
2
3
4
5
6

后面点补充

04usedStyle2.md 06float&position.md