css

最新推荐文章于 2025-08-13 10:33:36 发布
原创 最新推荐文章于 2025-08-13 10:33:36 发布 · 282 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解了CSS布局的各种技巧，包括浮动的原理与清除方法、多列布局的实现方式，如使用float、margin、table、flex等不同方法，并探讨了等分布局、全屏布局的解决方案，以及定宽+自适应+等高的实现策略。

1.浮动的原理  和清除浮动的方式

   脱离正常的文档流，不占据空间。对其他元素的位置和大小都有影响。

方式：（1）使用空标签：  在每个浮动元素后面加一个空的标签，定义css clear:both 

          （2）使用overflow：给包含浮动元素的父标签添加css属性 overflow:auto:zoom:1;zoom:1用来兼容IE6

          （3）使用after伪标签：                            

.clearfix:after{
  visibility:hidden;
  display:block;
  font-size:0;
  content:'';
  clear:both;
  height:0
}

2.css布局

多列布局

定宽 + 自适应

1.使用float + overflow：

  • 原理: 通过将左边子元素脱离文档流,设置右边子元素规定当内容溢出元素框时发生的事情以达到多列布局;
  • 用法：先将左边子元素设置为float:left;再设置右边子元素为overflow:hidden;
  • 示例：
1
2
3
4

<div class='parent'>
	<div class='left'>我是内容</div>
	<div class='right'>我是内容</div>
</div>

1
2
3
4
5
6
7
8

.left {
	float: left;
	width: 100px;
	margin-right: 20px;
}
.right {
	overflow: hidden;
}
  • 优点:简单。
  • 缺点:不支持IE6。

2.使用float + margin

  • 原理:通过将左边子元素脱离文档流,右边子元素向右移动一定的距离,以达到视觉上的多列布局;
  • 用法:左边子元素设置为float:left,再设置右边子元素margin-left;
  • 示例:
1
2
3
4

<div class='parent'>
	<div class='left'>我是内容</div>
	<div class='right'>我是内容</div>
</div>

1
2
3
4
5
6
7

.left {
	float: left;
	width: 100px;
}
.right {
	margin-left: 120px;
}
  • 优点:简单;
  • 缺点:兼容性存在一定的问题,IE6下有3px的bug;right下的p清除浮动将产生bug;

3.使用float + margin (改良版)

  • 原理:在1的基础上,通过向右边子元素添加一个父元素,再加上设置左边子元素、右边父元素属性使之产生BFC以去除bug。

  • 示例:

1
2
3
4
5
6
7
8

<div class='parent'>
	<div class='left'>我是内容</div>
	<div class='right-fix'>
		<div class='right'>
			我是内容
		</div>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

.left {
	float: left;
	width: 100px;
	position: relative;
}
.right-fix {
	float: right;
	width: 100%;
	margin-left: -100px;
}
.right {
	margin-left: 120px;
}

4.使用table

  • 原理:通过将父元素设置为表格,将左右子元素转化为类似于同一行的td,从而达到多列布局

  • 用法:先将父元素设置为display:table;width:100%;table-layout:fixed;,再设置左右子元素display:table-cell;最后设置左子元素的width、padding-right;

  • 示例:

1
2
3
4
5
6
7
8

<div class='parent'>
	<div class='left'>
		我是内容
	</div>
	<div class='right'>
		我是内容
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

.parent {
	display:table;
	width:100%;
	table-layout:fixed;
}
.left {
	width: 100%;
	padding-right: 20px;
}
.right,
.left {
	display:table-cell;
}

5.使用flex

  • 原理:通过设置flex属性,从而达到多列布局

  • 用法:先将父元素设置为display:flex;再设置左边子元素flex:1;最后设置左边子元素的width/margin-right;

  • 示例:

1
2
3
4
5
6
7
8

<div class='parent'>
	<div class='left'>
		我是内容
	</div>
	<div class='right'>
		我是内容
	</div>
</div>

1
2
3
4
5
6
7
8
9
10

.parent {
	display:flex;
}
.left {
	width: 100;
	margin-right: 20px;
}
.right {
	flex:1;
}
  • 优点:flex很强大;
  • 缺点:兼容性和性能方面存在一定问题;

两列定宽 + 一列自适应

  • 这种情况和两列定宽差不多,先将左边子元素和中间子元素设置为float:left;width;margin-right;再设置右边子元素overflow:hidden;
1
2
3
4
5
6
7
8
9
10
11

<div class='parent'>
	<div class='left'>
		我是左侧内容
	</div>
	<div class='center'>
		我是中间内容
	</div>
	<div class='right'>
		我是右侧内容
	</div>
</div>

1
2
3
4
5
6
7
8
9

.left,
.center {
	float:left;
	width:100px;
	margin-right:20px;
}
.right {
	overflow:hidden;
}

不定宽 + 自适应

使用float + overflow

  • 原理:类似于两列定宽;

  • 用法:将左侧框设置为float:left、margin-right:xx,再设置右侧框overflow:hidden,最后设置左侧框的内容宽度;

  • 示例:

1
2
3
4
5
6
7
8

<div class='parent'>
	<div class='left'>
		我是内容
	</div>
	<div class='right'>
		我是内容
	</div>
</div>

1
2
3
4
5
6
7
8
9
10

.left {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
.left p {
    width: 200px;
}
  • 优点: 简单;
  • 缺点: IE6下兼容性存在问题;

使用table

  • 原理: 通过将父元素改变为表格,将左右框转换为类似于同一行的td以达到多列布局,设置父元素宽度100%,给左框子元素一个固定宽度从而达到自适应.
  • 用法: 将父元素设置为display:table;width:100%;再设置左右侧子元素display:table-cell;最后设置左侧子元素width:0.1%;padding-right:xx;以及左侧子元素中的内容宽度width:xxx;
  • 示例:
1
2
3
4
5
6
7
8
9

<div class='parent'>
	<div class='left'>
		<p>我是left内容</p>
	</div>
	<div class='right'>
		<p>我是right内容</p>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.parent {
    display: table;
    width: 100%;
}
.left,
.right {
    display: table-cell;
}
.left {
    width: 0.1%;
    padding-right: 20px;
}
.left p {
    width: 200px;
}
  • 注意: IE6/7不支持;

使用flex

  • 原理: 通过设置CSS3中flex属性达到多列布局,加上给左侧子元素的内容定宽,给右侧子元素设置flex达到不定宽+自适应;
  • 用法: 父元素设置display:flex;右侧子元素设置flex:1;左侧子元素margin-right:00px;内容设置宽度;
  • 示例:
1
2
3
4
5
6
7
8

<div class='parent'>
	<div class='left'>
		<p>我是left内容</p>
	</div>
	<div class='right'>
		<p>我是right内容</p>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

.parnet {
  display:flex;
}
.left {
  margin-right: 20px;
}
.right {
  flex: 1;
}
.left p {
  width: 200px;
}
  • 优缺点: flex很强大,但是兼容性和性能都存在一些问题;

两列不定宽 + 一列自适应

  • 原理: 类似于一列不定宽+一列自适应
  • 用法: 左、中设置为float:left;margin-right:xxx;并设置内容宽度,右设置overflow:hidden;
  • 示例: 
    1
2
3
4
5
6
7
8
9
10
11

    <div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="center">
    <p>center</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

.left,
.center {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}
.left p,
.center p {
  width: 100px;
}

等分布局

  • 公式转化:
  • 总宽度 = 子元素宽度 n + 间隙宽度 (n - 1)
  • 总宽度 = 子元素宽度 n + 间隙宽度 n - 间隙宽度
  • 总宽度 + 间隙宽度 =( 子元素宽度 + 间隙宽度 ) * n
  • 两个问题: 如何让总宽度增加间隙宽度 如何让每个子元素宽度包含间隙宽度

使用float

  • 原理: 增大父元素的实际宽度,使用CSS3属性box-sizing进行辅助布局;
  • 用法: 父元素margin-left:-px;子元素float:left;width:25%;padding-left:px;box-sizing:border-box;
  • 示例: 
    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

    <div class="parent">
  <div class="column"><p>1</p></div>
  <div class="column"><p>2</p></div>
  <div class="column"><p>3</p></div>
  <div class="column"><p>4</p></div>
</div>

``` 
```css
.parent {
  margin-left: -20px;
}
.column {
  float:left;
  width: 25%;
  padding-left: 20px;
  box-sizing: border-box;
}
```  
- 注意: IE6/7兼容性存在一些问题; 

#### 使用table
- 原理: 通过增加一个父元素的修正框,增加其宽度,并将父元素转换为table,将子元素转换为table-cell进行布局;
- 用法: 父元素修正框设置为margin-left:-**px;父元素display:table;width:100%;table-layout:fixed;子元素display:table-cell;padding-left:**px;
- 示例;
```html
<div class="parent-fix">
  <div class="parent">
    <div class="column">
      <p>111</p>
    </div>
    <div class="column">
      <p>222</p>
    </div>
    <div class="column">
      <p>333</p>
    </div>
    <div class="column">
      <p>444</p>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

.parent-fix {
  margin-left: -20px;
}
.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.column {
  display: table-cell;
  padding-left: 20px;
}
  • 优点: 结构和块数无关联;
  • 缺点: 嵌套层数增加;

使用flex

  • 原理: 通过设置CSS3中的flex属性达到等分布局;
  • 用法: 父元素display:flex;子元素flex:1;并设置间距;
  • 示例: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <div class="parent">
   <div class="column">
     <p>111</p>
   </div>
   <div class="column">
     <p>222</p>
   </div>
   <div class="column">
     <p>333</p>
   </div>
   <div class="column">
     <p>444</p>
   </div>
</div>

1
2
3
4
5
6
7
8
9

.parent {
  display: flex;
}
.column {
  flex: 1;
}
.column+.column {
  margin-left: 20px;
}
  • 优点: 代码量少,与块数无关;
  • 缺点: 低版本浏览器兼容性存在问题;

定宽 + 自适应 + 两块高度相同

使用float

  • 原理: 通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。
  • 用法: 父元素overflow: hidden，左右子元素padding-bottom: 9999px、margin-bottom: -9999px，左子元素float: left、width、margin-right，右子元素overflow: hidden;
  • 示例: 
    1
2
3
4

    <div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

p{
    background: none!important;
}
.left,.right{
    background: #444;
}
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    
    float: left; 
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
  • 优点: 兼容性好;
  • 缺点: 伪等高,不是真正意义上的等高;

使用table

  • 原理：将父框转化为tabel，将子框转化为tabel-cell布局，以达到定宽+自适应+两块高度一样高。
  • 用法：父元素display:table、width:100%、table-layout:fixed，左右子元素display:table-cell，左子元素width、padding-right。
  • 示例: 
    1
2
3
4

    <div class="parent">
<div class="left">left</div>
<div class="right">.right</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left {
  width: 100px;
  padding-right: 20px;
}
.right,
.left {
  display: table-cell;
}

使用flex

  • 原理: 通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。
  • 用法：父元素display: flex，左子元素width、margin-right;右子元素flex:1。
  • 示例: 
    1
2
3
4

    <div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>

1
2
3
4
5
6
7
8
9
10

.parent {
  display: flex;
}
.left {
  width: 100px;
  margin-right: 20px;
}
.right {
  flex: 1;
}
  • 优缺点: 代码量少,简洁,但是兼容性存在一些问题;

使用display

  • 原理: 通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。
  • 用法: 父元素display: -webkit-box、width:100%，左子元素width、margin-right，右子元素-webkit-box-flex: 1;
  • 示例: 
    1
2
3
4

    <div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>

1
2
3
4
5
6
7
8
9
10
11

.parent {
  width: 100%;
  display: -webkit-box;
}
.left {
  width: 100px;
  margin-right: 20px;
}
.right {
  -webkit-box-flex: 1;
}
  • 缺点: 兼容性存在较大问题;

全屏布局

全屏布局的特点:

  • 滚动条不是全局滚动条,而是出现在内容区域里,一般是主内容区域;
  • 浏览器变大时,撑满窗口;

全屏布局的方法

使用position

  • 原理: 将上下部分固定,中间部分使用定宽+自适应+等高;
  • 用法: 见示例;
  • 示例: 
    1
2
3
4
5
6
7
8

    <div class="parent">
  <div class="top">top</div>
  <div class="left">left</div>
  <div class="right">
    <div class="inner">right-inner</div>
  </div>
  <div class="bottom">bottom</div>
</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

html,
body,
.parent {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  color: white;
}
.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: blue;
}
.left {
  position: absolute;
  left: 0;
  top: 100px;
  bottom: 50px;
  width: 200px;
  background-color: red;
}
.right {
  position: absolute;
  left: 200px;
  top: 100px;
  bottom: 50px;
  right: 0;
  background-color: pink;
  overflow: auto;
}
.right .inner {
  min-height: 1000px;
}
.bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: black;
}
  • 优缺点: 兼容性好,IE6以下不支持;

使用flex

  • 原理: 通过CSS3中flex属性和flex-direction属性;
  • 用法: 见示例;
  • 示例: 
    1
2
3
4
5
6
7
8
9
10

    <div class="parent">
  <div class="top">top</div>
  <div class="middle">
    <div class="left">left</div>
    <div class="right">
      <div class="inner">right</div>
    </div>
  </div>
  <div class="bottom">bottom</div>
</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

html,
body,
.parent {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  color: white;
}
.parent {
  display: flex;
  flex-direction: column;
}
.top {
  height: 100px;
  background-color: blue;
}
.bottom {
  height: 50px;
  background-color: black;
}
.middle {
  flex: 1;
  display: flex;
}
.left {
  width: 200px;
  background-color: red;
}
.right {
  flex: 1;
  overflow: auto;
  background-color: pink;
}
.right .inner {
  min-height: 1000px;
}
  • 优缺点: 兼容性差,IE9及以下不兼容;
Caroline_33
关注
CSS3 多列布局
weixin_43073401的博客
05-18 722
CSS3 多列布局是一种实现网页内容分为多个列的技术，类似于报纸或杂志的排版。它可以让网页的文本更加紧凑和易读，而不需要使用浮动或定位等复杂的布局方法。要创建CSS3多列布局，我们需要指定要添加多列效果的容器元素和容器元素的多列属性。我们还可以使用其他属性来控制多列样式和折断方式。
《CSS3实战》笔记--多列布局
后乐的博客
04-29 9359
书籍《CSS3实战》总结 多列布局
CSS 多列布局（Multi-column Layout）：快速上手指南
最新发布
胡西风的博客
08-13 1641
CSS 多列布局（Multi-column Layout）是一种将内容流式分布到多个列中的布局方式，类似报纸、杂志的排版效果。与网格布局（Grid）不同，多列布局中子元素保持正常文档流，列会根据可用空间自动调整数量或宽度，无需手动指定每个元素的位置。：设置列的理想宽度（最小宽度），浏览器会根据容器宽度自动计算列数。（列宽至少 12em，数量自适应容器宽度）。：明确指定列的数量，列宽会根据容器宽度自动分配。（固定 2 列，列宽随容器变化）。columns和的简写属性。columns: 2;
CSS布局之多列布局
wangwangwanglichao的博客
03-31 9830
前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架搭建之中，又有居中布局/多列布局/全局布局。本文介绍一下多列布局的一些技巧。多列布局定宽 + 自适应1.使用float + overflow：原理: 通过将左边子元素脱离文档流,设置右边子元素规定当内容溢出元素框时发生的事情以达到多列布局;用法：先将左边子元素设置为float:left;再设置右边子元素为overflow:hid...
【CSS 布局】-多列布局
我有满天星辰的博客
02-10 2720
(2)设置 grid 属性, grid-template-columns: auto 1fr auto;两列布局：一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(1)左右两列脱离文档流，并通过偏移的方式到达自己的区域。(3)使中间自适应的宽度为父级容器减去两个定宽的列。(2)使中间自适应的宽度为父级容器减去两个定宽的列。(2)设置 flex 属性,flex : 1。
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
精选资源
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
vscode-tailwindcss-0.14.25.vsix
07-19
1. 插件名称：Tailwind CSS IntelliSense 2. Marketplace地址：https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss 3. Github地址：...
精选资源
htmlcss:C语言中的轻量级HTML和CSS解析器
05-26
HTMLCSS HTMLCSS是用C编写的轻...CSS 3样式表解析器 OFC / OFF / TTC / TTF字体文件解析器（仅元数据和指标） GIF / JPG / PNG图像文件解析器（仅限元数据） 计算HTML文档中给定节点CSS属性的函数 提取HTML“运行”
精选资源
leaflet.css样式文件
02-18
leaflet.css样式文件
CSS3-多列布局
GTC的博客
09-16 1990
CSS3使用columns属性定义多列布局，属性初始值根据元素个别属性而定，适用于不可替换的块元素、行内块元素、单元格，表格除外。
CSS3 之 多列布局
程序员小白的博客
07-16 645
是由浮点数和单位标识符组成的长度值，不可为负值；auto根据浏览器计算自动设置；属性定义多列布局中每列的宽度，可单独使用，也能和其他多列布局属性组合使用；表示值是一个整数，用来定义栏目的列数，取值大于0的整数，不可以为。属性能指定多列布局的列数，不需要通过列宽度自动调整列数；auto属性值表示根据浏览器计算值自动设置；...
CSS多列布局
a716121的专栏
08-10 694
效果： index.html 我的爸爸 CSS3多列布局 我的爸爸 --> 我的爸爸 第一段内容 我的爸爸刚刚30出头，他的面容，要比他的年龄，成熟稳重的多，但是，他可没有苍老憔悴哦！爸爸的身高有180公分，体重75公斤，是个标准的型男身材。如果，我说我爸爸是个大帅哥，可一点也没有撒谎呢！ 第二段内容 爸爸不仅，打篮球a
使用 CSS 实现多列布局
前端开发
07-11 1036
使用 CSS 实现多列布局
CSS 的多列布局是什么？
Learn-anything.cn
12-10 909
一、多列布局是什么？ 就是用 CSS 的 column-count、column-width、column-gap、break-inside、page-break-inside 等实现多列显示的功能。 二、应用场景 1、文字多列显示 通过 column-count、column-gap、column-rule 就能做出下面多列显示效果。 新建 index.html 文件并复制下面代码到文件中，保存后用浏览器打开即可看效果。 <!DOCTYPE html> <html> <
css_多列布局
xuchaoxin1375的博客
01-22 335
文章目录reference试验代码previewbreak-inlinehtml codecss code reference Multiple-column layout - Learn web development | MDN (mozilla.org) A basic example Styling the columns Spanning columns Columns and fragmentation 试验代码 preview break-inline html code &lt
CSS布局--多列布局
clhdtzhh的博客
03-02 385
1、三列布局 HTML <div class="main"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. .
CSS“多列布局”
m0_70547044的博客
06-11 1019
CSS多列布局允许我们将内容分成多个垂直列，使页面布局更加灵活和多样化。多列布局的主要属性包括 ​​、​​ 和 ​​，这些属性可以单独或结合使用，以实现所需的列布局效果。
CSS边界特效学习包
CSS（层叠样式表）是一种用于描述网页呈现样式的计算机语言，它能够让开发者通过简单的代码来改变网页的布局、颜色、字体等多种视觉效果。而标题“css-border-effects.zip”指示了一个关于CSS边框效果的压缩包，其中...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值