MarginLon
MarginLon
2022-12-26
目录

CSS布局

# table 布局

<div class="table">
  <ul>
    <li>姓名</li>
    <li>性别</li>
    <li>年纪</li>
    <li>分数</li>
  </ul>
</div>
1
2
3
4
5
6
7
8
ul {
  /* display: table; =>table */
  display: table;
}
li {
  /* table-cell => td */
  display: table-cell;
  list-style: none;
  width: 80px;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11

# inline-block 布局

:::tips

行内标签：左右 / 无宽高 块级标签：上下 行内块： 左右 / 有宽高

行(行内/行内块) 特点问题: 会受到我们标签换行符的影响产生默认的间距 解决办法: 给父容器 font-size:0; 去间距 问题: 兼容性 - display:inline-block

一般可用来解决需求： 图标 + 文字 (inline-block + vertical-align) => 垂直对齐 / vertical-align:middle/top/bottom/px 文本对齐(inline-block + text-align) => 水平对齐

:::

# float 布局

::: tips float:left/right/none(默认)

问题: 子元素浮动 => 导致父元素高度为 height:0 (高度塌陷) => BFC(不会把浮动元素的高度计算进行) :::

# box 布局

#flexbox {
  /* -webkit- 谷歌 -moz 火狐  -ms- IE*/
  width: 500px;
  height: 500px;
  background-color: #000;
  /* 父容器: 控制子容器水平排列*/
  display: box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;

  /*  box-orident:horizontal 水平  */
  /*  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  box-orient:vertical; */

  /* 水平居中 */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;

  /* 垂直居中 */
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
}

/* 单行文本省略号 */
span {
  display: block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 多行文本省略号 */
.txt {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;

  /* text-overflow: ellipsis;
  word-break: break-all; */
}
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
38
39
40
41
42
43
44
45
46

# Flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (opens new window)

<!-- display：flex
flex-direction: column; (垂直)
flex-wrap:wrap 强制折行
justify-content:center;
align-items:center(单根轴)  =  align-content(多根轴)  垂直方向


box-flex  =  flex  等分布局    

平分 100%/ 4 = 25%


flexbox的衍生过程:box  -  flexbox   - flex
// 全兼容写法: 
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */


// 移动端项目: 
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

//  display:box  display:flex
//  box-orient   flex-direction   方向
//  box-pack     justify-content  水平-居中
//  box-align    align-items      垂直-居中
//  box-flex     flex


// 水平居中 
@minix  shuiping{
    box-pack:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
}
.box{
  @include shuiping
}


// 垂直居中 
@minix  chuizhi{
   -webkit-box-align:center;
   box-align:center;
   -webkit-align-items:center;
  align-items:center;
}
.box{
  @include chuizhi
}


// 3个minix
<div class="align-content-space-between column"></div>
 -->
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# Grid 网格布局

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html (opens new window)

# columns 布局

https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/ (opens new window)

#parent {
  /* 
      column-count: 4; 行数   
      column-width: 400px; 宽度  =>width 
      column-gap: 10px;    => margin 间距
      column-rule-color => border-color
      column-rule-style => border-style
      column-rule-width => border-width
      column-rule => border 分割线
      column-span  => table   colspan
      */

  column-count: 4;
  /* column-width: 400px; */
  /* column-gap: 30px; */

  /*  column-rule-color:green;
      column-rule-style: double;
      column-rule-width: 10px; */
}
#parent > div {
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+, Chrome, Safari, Opera */
}
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

# shapes 布局

https://www.zhangxinxu.com/wordpress/2019/02/css-css3-shapes/ (opens new window)

# 居中布局

# 水平居中

/* 文本对齐:text-align */
#child {
  text-align: center;
}

/* 版心 - 居中 - 块级div + display:block 
margin:上下  左右;
*/
#child {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: blue;
}

/* 多个块居中 text-align+inline-block */
#parent {
  width: 500px;
  height: 500px;
  background-color: red;
  text-align: center;
}
.child {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: blue;
  margin: 10px;
}

/* html： 行内inline  块级：block  文字 
position: absolute;
left:50%;
+  margin-left: -100px;  负值技巧
+  transform: translateX(-50%);   CSS3 兼容性不太好

position: absolute;
left:0;
right:0;
margin:auto;
*/
#parent {
  width: 500px;
  height: 500px;
  background-color: red;
  text-align: center;
  position: relative;
}
#child {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: blue;
}

/* flex */
#parent {
  width: 500px;
  height: 500px;
  background-color: red;
  display: flex;
  /* 水平排列 text-align:center*/
  justify-content: center;
}
#child {
  width: 200px;
  height: 200px;
  background-color: blue;
}
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

# 垂直居中

/* 文字 */
#parent {
  width: 500px;
  height: 500px;
  background-color: red;
  border: 10px solid #000;
}
#child {
  text-align: center;
  /* 垂直line-height = height */
  line-height: 500px;
}

#parent {
  width: 500px;
  height: 500px;
  background-color: red;
  position: relative;
}

#child {
  position: absolute;
  /* top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-100px; */

  /* transform:translate(-50%,-50%); */

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: green;
}

/* flex */
#parent {
  width: 500px;
  height: 500px;
  background-color: red;
  /*  display: flex; 子容器默认是水平排列 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}
.child {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: green;
}
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 两列布局

<!-- 1 -->
<style>
  /* float  浮动层叠顺序  >  块级*/
  #left {
    float: left;
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    height: 600px;
    background-color: blue;
    margin-left: 200px;
  }
  #inner {
    width: 300px;
    height: 300px;
    background-color: gray;
    /* clear: both; */
  }
</style>
<body>
  <!-- 定宽 -->
  <div id="left"></div>
  <!-- 自适应容器 -->
  <div id="right">
    <div id="inner"></div>
  </div>
</body>
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
<!-- 2 -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #left {
    float: left;
    width: 200px;
    height: 400px;
    background-color: green;
  }
  /*  左定宽  +  右自适应 =  calc(100% - 200px)  
    1.flex:1
    2.grid: auto
    3.定位 - 方位同时设置
    .....

    100%  - 200 px 
    ....
    */
  #right-fix {
    float: left;
    background-color: blue;
  }
  #right {
    height: 600px;
  }
  #inner {
    width: 300px;
    height: 300px;
    background-color: gray;
    clear: both;
  }
</style>

<body>
  <div id="left"></div>
  <!-- 为自适应元素定位父级元素 -->
  <div id="right-fix">
    <div id="right">
      <div id="inner"></div>
    </div>
  </div>
</body>
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
38
39
40
41
42
43
44
45
<!-- 3 -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  /* BFC overflow:hidden => 浮动元素不会和BFC特点的容器进行重叠*/
  #left {
    float: left;
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    height: 600px;
    background-color: blue;
    overflow: hidden;
  }
</style>

<body>
  <div id="left"></div>
  <div id="right"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 4 -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  /* display: table; table display:table-cell =>td */
  #parent {
    display: table;
    width: 100%;
  }
  #left {
    display: table-cell;
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    display: table-cell;
    height: 600px;
    background-color: blue;
    overflow: hidden;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>
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
<!-- 5 -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent {
    width: 100%;
  }
  #left {
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    position: absolute;
    /* 100% - 200px */
    top: 0;
    left: 200px;
    right: 0;
    height: 600px;
    background-color: blue;
    overflow: hidden;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>
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
<!-- 6 -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent {
    display: flex;
  }
  #left {
    width: 200px;
    height: 400px;
    background-color: green;
  }
  /* flex:1; 100% - 200px 全部给right */
  #right {
    flex: 1;
    height: 600px;
    background-color: blue;
    overflow: hidden;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>
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
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: repeat(2, 600px);
  }
  #left {
    background-color: green;
  }
  #right {
    background-color: blue;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 三列布局

<!-- 1.float + margin -->
<style>
  /* 左中 定宽   右自适应 */
  * {
    margin: 0;
    padding: 0;
  }
  #left {
    width: 200px;
    height: 400px;
    background-color: saddlebrown;
  }
  #center {
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    height: 600px;
    background-color: blue;
    margin-left: 400px;
  }

  #left,
  #center {
    float: left;
  }
</style>
<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>
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
<!-- 2. float + overflow -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  /* overflow: hidden;  BFC - IFC  
    不会和浮动容器进行重叠
    */
  #left {
    width: 200px;
    height: 400px;
    background-color: saddlebrown;
  }
  #center {
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    height: 600px;
    background-color: blue;
    overflow: hidden;
  }

  #left,
  #center {
    float: left;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>
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
38
<!-- 3.table+table-cell -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #left {
    width: 200px;
    height: 400px;
    background-color: saddlebrown;
  }
  #center {
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    height: 600px;
    background-color: blue;
    overflow: hidden;
  }

  /* table-cell => td 水平排列  等高*/
  #parent {
    display: table;
    width: 100%;
  }
  #left,
  #center,
  #right {
    display: table-cell;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>
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
38
39
40
41
<!-- 4.flex -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  /* flex:1  => box-flex:1 1 auto  100% -200px -200px */
  #left {
    width: 200px;
    height: 400px;
    background-color: saddlebrown;
  }
  #center {
    width: 200px;
    height: 400px;
    background-color: green;
  }
  #right {
    flex: 1;
    height: 600px;
    background-color: blue;
    overflow: hidden;
  }

  #parent {
    display: flex;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>
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
<!-- 5. grid -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent {
    display: grid;
    grid-template-columns: 200px 200px auto;
    grid-template-rows: 400px 400px 600px;
  }
  #left {
    background-color: green;
  }
  #center {
    background-color: blue;
  }
  #right {
    background-color: yellow;
  }
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>
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
<!-- 6.position -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent,
  body,
  html {
    height: 100%;
  }
  #parent {
    position: relative;
  }
  #left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
  }
  #center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    width: 200px;
  }
  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 400px;
    right: 0;
  }

  #left {
    background-color: green;
  }
  #center {
    background-color: blue;
  }
  #right {
    background-color: blueviolet;
  }
  /* 200px 200px  100% - 400px */
</style>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- 左右定宽 中间自适应（左中右） -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  /* float + position + flex + grid
    calc()
    */
  #parent {
    overflow: hidden;
  }
  #left {
    width: 200px;
    height: 500px;
    background-color: blueviolet;
  }
  #center {
    height: 600px;
    background-color: blue;
    margin: 0 200px;
  }
  #right {
    width: 200px;
    height: 500px;
    background-color: greenyellow;
  }

  #left {
    float: left;
  }
  #right {
    float: right;
  }
</style>

<body>
  <div id="parent">
    <div id="left">左</div>
    <div id="right">右</div>
    <div id="center">中</div>
  </div>
</body>
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
38
39
40
41
42
43

# 圣杯布局

<style>
  * {
    margin: 0;
    padding: 0;
  }
  #right {
    width: 200px;
    height: 500px;
    background-color: greenyellow;
  }
  #left {
    width: 200px;
    height: 500px;
    background-color: blue;
  }
  #center {
    width: 100%;
    height: 500px;
    background-color: purple;
  }
  /* 第1步: 三个容器同时设置浮动  - 在一行排列
    放不下  left和right 掉下去
    */
  #center,
  #left,
  #right {
    float: left;
  }

  /*  第2步 给父容器加内填充 -  放left和right 2个容器*/
  #parent {
    padding: 0 200px;
  }

  /* 第3步: 把left移动到原本的位置  -  left 在center（100%）的前面
  把right移动到原本的位置 -  right 在center的后面
  技巧: margin负值  -  移动
  定位方位    -  移动
    */
  #left {
    margin-left: -100%;
    position: relative;
    left: -200px;
  }
  #right {
    margin-left: -200px;
    position: relative;
    right: -200px;
  }
</style>

<body>
  <div id="parent">
    <div id="center">中间</div>
    <div id="left">左边</div>
    <div id="right">右边</div>
  </div>
</body>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 双飞翼布局

<style>
  * {
    margin: 0;
    padding: 0;
  }
  #right {
    width: 200px;
    height: 500px;
    background-color: greenyellow;
  }
  #left {
    width: 200px;
    height: 500px;
    background-color: blue;
  }
  #center {
    width: 100%;
  }

  /* 第1步: float 让三个水平排列 */
  #left,
  #center,
  #right {
    float: left;
  }

  /* 第2步: 给中间的容器的子容器设置margin外间距 => left和right 的位置给留出来*/
  #inner {
    margin: 0 200px;
    height: 500px;
    background-color: purple;
  }

  /* 第3步: 把left移动到原本的位置  -  left 在center（100%）的前面
      把right移动到原本的位置 -  right 在center的后面
       技巧: margin负值  -  移动  
    */
  #left {
    margin-left: -100%;
  }
  #right {
    margin-left: -200px;
  }

  /* 总结：
     双飞翼把圣杯的定位位移的属性给优化掉了  margin + padding
  */
</style>

<body>
  <div id="parent">
    <div id="center">
      <div id="inner">中间</div>
    </div>
    <div id="left">左边</div>
    <div id="right">右边</div>
  </div>
</body>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 等分布局

<!-- 1.float -->
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .col1 {
    background-color: hotpink;
  }

  .col2 {
    background-color: lightblue;
  }

  .col3 {
    background-color: green;
  }

  .col4 {
    background-color: yellow;
  }

  .col5 {
    background-color: pink;
  }

  /* float / display:inline-block
    盒子模型    width/height/padding/border/margin box-sizing:border-box/content-box
    盒模型布局  display:box / flex
    */
  #parent {
    margin-left: -10px;
  }
  #parent > div {
    float: left;
    width: 20%;
    height: 400px;
    /* padding + border */
    box-sizing: border-box;
    padding-left: 10px;
  }
  .col1,
  .col2,
  .col3,
  .col4,
  .col5 {
    height: 400px;
  }
</style>

<body>
  <!-- 作为父级容器 -->
  <div id="parent" class="clearfix">
    <div><div class="col1"></div></div>
    <div><div class="col2"></div></div>
    <div><div class="col3"></div></div>
    <div><div class="col4"></div></div>
    <div><div class="col5"></div></div>
  </div>
</body>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!-- 2.table -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent > div:nth-child(2n) {
    background-color: greenyellow;
  }
  #parent > div:nth-child(2n + 1) {
    background-color: gold;
  }
  /* width:100%;margin-left:-10px;   => 100%  - 10px */
  .wrap {
    margin-left: -10px;
  }
  #parent {
    display: table;
    width: 100%;
  }
  #parent > div {
    display: table-cell;
    height: 500px;
    border-left: 10px solid #fff;
  }
</style>

<body>
  <!-- 作为父级容器 -->
  <div class="wrap">
    <div id="parent">
      <div class="col1"></div>
      <div class="col2"></div>
      <div class="col3"></div>
      <div class="col4"></div>
    </div>
  </div>
</body>
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
38
<!-- 3.flex -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #parent > div:nth-child(2n) {
    background-color: greenyellow;
  }
  #parent > div:nth-child(2n + 1) {
    background-color: gold;
  }

  #parent {
    display: flex;
    margin-left: -10px;
  }
  #parent > div {
    flex: 1;
    height: 500px;
    border-left: 10px solid #fff;
  }
</style>

<body>
  <!-- 作为父级容器 -->
  <div id="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
  </div>
</body>
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

# 等高布局

<!-- 1.table -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #left {
    background-color: gold;
  }
  #right {
    background-color: blue;
  }

  #parent {
    display: table;
  }
  #left,
  #right {
    display: table-cell;
  }
</style>

<body>
  <div id="parent">
    <div id="left">zhfueng</div>
    <div id="right">
      Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing
      well.Never underestimate your power to change?Whatever is worth doing is worth doing well.
    </div>
  </div>
</body>
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
<!-- 2.margin + padding -->
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #left {
    background-color: gold;
  }
  #right {
    background-color: blue;
  }
  /* margin 负值技巧  margin-top/bottom/left/right :  负值
       padding : 计算在实际宽度里面

       overflow: hidden;   伪等高布局
      1.清除浮动
      2.溢出隐藏
    */
  #parent {
    overflow: hidden;
  }
  #left,
  #right {
    float: left;
    width: 400px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
</style>

<body>
  <div id="parent">
    <div id="left">zhfueng</div>
    <div id="right">
      Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing
      well.Never underestimate your power to change?Whatever is worth doing is worth doing wellNever underestimate your power to change?Whatever is worth doing is worth doing
      well.Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing
      well.
    </div>
  </div>
</body>
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
38
39
40
41
42

# 全屏布局

<style>
  /*  定位 - 同时设置方位  fixed/absolute */
  * {
    margin: 0;
    padding: 0;
  }
  /* left:0;right:0; = width:100% */
  header,
  footer {
    position: fixed;
    left: 0;
    right: 0;
    height: 80px;
    background-color: rosybrown;
  }
  header {
    top: 0;
  }
  footer {
    bottom: 0;
  }
  /* left:0;right:0;top:80px;bottom:80px;   =  width:100%;height:100% - 80px - 80px */
  .content {
    position: fixed;
    left: 0;
    right: 0;
    top: 80px;
    bottom: 80px;
    background-color: royalblue;
  }
  .left {
    width: 80px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>

<body>
  <header></header>
  <div class="content">
    <!-- 左定宽  右自适应 -->
    <div class="left">
      <ul>
        <li></li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
        <li>Margin</li>
      </ul>
    </div>
    <div class="right"></div>
  </div>
  <footer></footer>
</body>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

# 其他

<!-- pc
-  div+css (html+css)
-  浮动 + 定位
-  table / inline-block
-   px + %


移动端
- div+css （html5+css3）
- flexbox (box + flex)
- rem + vw + vh + vmin + vmax

display:
- inline 行元素
- block  块级元素
- inline-block 行内块元素 (IFC)
- none 隐藏
- table /table-cell / table-row
- box  盒模型
- flex 弹性盒模型

display:box
- box-orident 
- box-pack
- box-align

- box-flex = flex 等分
 -->
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

# 只要一行代码，实现五种 CSS 经典布局

http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html (opens new window)

  • 空间居中布局

    不管容器的大小，项目总是占据中心点

  • 并列式布局

    多个项目并列，如果宽度不够，放不下的项目就自动折行

  • 两栏式布局

    一个边栏，一个主栏。边栏始终存在，主栏根据设备宽度，变宽或者变窄

  • 三明治布局

    页面在垂直方向上，分成三部分：页眉、内容区、页脚。

  • 圣杯布局

    最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。

# 实现左右分栏宽度拉伸

<div class="column">
  <div class="column-left">
    <div class="resize-bar"></div>
    <div class="resize-line"></div>
    <div class="resize-save">左侧的内容，左侧的内容，左侧的内容，左侧的内容</div>
  </div>
  <div class="column-right">右侧的内容，右侧的内容，右侧的内容，右侧的内容</div>
</div>
1
2
3
4
5
6
7
8
.column {
  overflow: hidden;
}
.column-left {
  height: 400px;
  background-color: #fff;
  position: relative;
  float: left;
}
.column-right {
  height: 400px;
  padding: 16px;
  background-color: #eee;
  box-sizing: border-box;
  overflow: hidden;
}
.resize-save {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  left: 0;
  padding: 16px;
  overflow-x: hidden;
}
.resize-bar {
  width: 200px;
  height: inherit;
  resize: horizontal;
  cursor: ew-resize;
  cursor: col-resize;
  opacity: 0;
  overflow: scroll;
}
/* 拖拽线 */
.resize-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #eee;
  border-left: 1px solid #bbb;
  pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
  border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
  width: 200px;
  height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
@supports (-moz-user-select: none) {
  .resize-bar:hover ~ .resize-line,
  .resize-bar:active ~ .resize-line {
    border-left: 1px solid #bbb;
  }
  .resize-bar:hover ~ .resize-line::after,
  .resize-bar:active ~ .resize-line::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: -8px;
    background: url(./resize.svg);
    background-size: 100% 100%;
  }
}
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

纯 CSS 实现分栏宽度拉伸调整 (opens new window)

编辑 (opens new window)
上次更新: 2023/09/17, 23:41:49
左右分栏宽度拉伸调整
解构赋值

← 解构赋值→

最近更新
01
KnockoutJS
11-12
02
综述
10-17
03
前言
10-12
更多文章>
Theme by Vdoing | Copyright © 2019-2024 MarginLon | MIT License