CSS布局总结（进来看看吧）

原创已于 2022-03-30 14:13:32 修改 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css

于 2021-12-03 12:07:38 首次发布

本文详细介绍了CSS中的浮动(float)和清除(clear)属性，以及它们在网页布局中的应用。通过实例展示了如何使用float属性实现元素左右浮动，以及clear属性避免元素被浮动元素影响。接着，讨论了定位布局中的position属性，包括absolute和relative定位。最后，重点讲解了CSS3的弹性盒子模型(flexbox)，包括flex-direction、flex-wrap、flex-flow、align-items、align-content和justify-content等属性，以及它们如何实现灵活的响应式布局。通过实例演示了不同属性组合下的布局效果。

浮动和清除

属性	描述
float	属性规定元素如何浮动
clear	属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float属性

值	描述
left	元素浮动到其容器的左侧
right	元素浮动在其容器的右侧
none	元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit	元素继承其父级的 float 值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       #one{
       	float: right;
       }
       #two{
       	float: left;
       }
	</style>
</head>
<body>
	<img src="哆啦A梦.jpg" id="one">
	<img src="pp.jpg" id="two">
</body>
</html>

效果图

clear属性

值	描述
none	允许两侧都有浮动元素。默认值
left	左侧不允许浮动元素
right	右侧不允许浮动元素
both	左侧或右侧均不允许浮动元素
inherit	元素继承其父级的 clear 值

未使用clear时：

使用clear时：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      img{
      	float: left;
        clear: both;
      }
     
	</style>
</head>
<body>
   <img src="pp.jpg" class="one"/>
   <img src="pp.jpg" class="two"/>
</body>
</html>

定位布局（总结常用两种）

属性：position

值	描述
absolute	绝对定位
relative	相对定位

absolute：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      img{
      	position: absolute;
      	left: 200px;
      	top: 200px;
      }
     
	</style>
</head>
<body>
   <img src="pp.jpg"/>
</body>
</html>

绝对定位以上面的粗红点相对与顶角来定位

relative:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      .one{
      	position: relative;
        left: 30px;
      }
      .two{
      	position:relative;
      	left: -30px;
      }
	</style>
</head>
<body>
  <h2>正常位置的标题</h2>
  <h2 class="one">这是一个相对正常位置向右移动的标题</h2>
  <h2 class="two">这是一个相对正常位置向左移动的标题</h2>
  <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
  <p>样式 "left:-30px" 从元素的原始左侧位置减去 30 像素。</p>
  <p>样式 "left:30px" 向元素的原始左侧位置增加 30 像素。</p>
</body>
</html>

CSS3弹性盒子：

**弹性盒子**
属性	值
dispaly	flex

**主要属性**
属性	描述
flex-direction	弹性盒子中子元素的排列方式
flex-wrap	设置子元素超过父元素后是否自动换行
flex-flow	flex-direction和flex-wrap的简写
align-items	设置弹性盒子在侧轴（纵轴）上的对齐方式
align-content	对flex-wrap的一个修改，和align-items相似，但不是设置对齐方式
justify-content	设置弹性盒子在横轴（主轴）上的对齐方式

flex-direction:

值	描述
row	默认值。作为一行，水平地显示弹性项目。
row-reverse	等同行，但方向相反。
column	作为列，垂直地显示弹性项目。
column-reverse	等同列，但方向相反。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		/*不加任何属性时，默认的是行排列*/
		display: flex;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

效果图：

加上flex-direction

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		/*不加任何属性时，默认的是行排列*/
		display: flex;
		/*加上flex-direction,让弹性盒子纵向排列*/
		flex-direction:column;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

效果图：

由代码可见，不加display的属性，会呈现下面的效果

现就可以知道弹性盒子的作用了，会自动调节盒子，使子盒子能在父盒子里面全部容纳

flex-wrap

值	描述
nowrap	默认值。规定弹性项目不会换行。
wrap	规定弹性项目会在需要时换行。
wrap-reverse	规定弹性项目会在需要时换行，以反方向。

上一张效果图加上flex-wrap属性就会换行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		 display: flex;
		/*换行属性*/
		flex-wrap: wrap;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

效果图:

flex-flow:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		 display: flex;
		/*把flex-direction和flex-wrap属性简写*/
		flex-flow: row wrap;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

效果图：

align-items

值	描述
stretch	默认。项目被拉伸以适合容器。
center	项目位于容器的中央。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的末端。
baseline	项目被定位到容器的基线

align-content

值	描述
stretch	默认值。行拉伸以占据剩余空间。
center	朝着弹性容器的中央对行打包。
flex-start	朝着弹性容器的开头对行打包。
flex-end	朝着弹性容器的结尾对行打包。
space-between	行均匀分布在弹性容器中。
space-around	行均匀分布在弹性容器中，两端各占一半。

justify-content

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器中央。
space-between	项目在行与行之间留有间隔。
space-around	项目在行之前、行之间和行之后留有空间。