CSS布局小结

最新推荐文章于 2024-09-22 20:00:51 发布

TYW0823

最新推荐文章于 2024-09-22 20:00:51 发布

阅读量90

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/TYW0823/article/details/121535310

版权

本文总结了CSS布局的主要方法，包括盒子布局、浮动布局、定位布局、CSS3弹性盒子以及一些其他重要属性。在盒子布局中详细阐述了边框、边距、内边距等属性的用法。浮动布局介绍了float属性及清除浮动的方法。定位布局则讲解了position属性的静态、绝对和相对定位。CSS3弹性盒子部分讨论了flex属性及其相关方向设定。最后提到了align-items和align-content属性用于项目对齐。

摘要由CSDN通过智能技术生成

一.盒子布局

1.border-----边框属性，可取值：dotted—点状边框；dashed—虚线边框；solid-----实线边框；double—双线边框
2.border-width-----规定边框的宽度
3.border-style-----规定边框的样式
4.border-color-----规定边框的颜色
5.margin-----可用于定义边框的位置，取值：left center right
6.display-----将块级元素和内联元素进行相互转换，可取值：
在这里插入图片描述
7.padding:0;-----防止最初在网页显示时有边角距离
注：css隐藏元素的方式：display:none;width:0 height:0

二.浮动布局

1.float-----设置元素往哪个方向浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。可取值：
none ----- 不浮动
left -----对象向左浮动，而后面的内容会流向对象的右侧
right-----对象向右浮动，而后面的内容会流向对象的左侧
清除浮动：clear
2.代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子布局</title>
	<style type="text/css">
	/*防止最初在网页显示时有边角距离*/
	*{
		padding:0;

	}
	/*基本属性*/
	#one{
		margin:0 auto;
		width:100px;
		border-style:double;
		border-color:blue; 
	}
	/**/
	#two{

	}
	/*块级元素和内联元素*/
	.box1{
		width:200px;
		height:300px;
		background-color:red;
	}
	.box2{
		width:200px;
		height:300px;
		background-color:yellow;
	}
	.box3{
		width:200px;
		height:300px;
		background-color:blue;
		/*display:none;&width:0; height:0;*/
	}	
    a{
    	width:200px;
    	height:200px;
    	/*使a变成块级标签*/
    	display:block;
    }
    /*浮动布局*/
    #left{
		float:left;
		width:200px;
		height:300px;
		background-color:green;
	}
	#center{
		float:left;
		width:200px;
		height:300px;
		background-color:yellow;
		/*使之不并列左排*/
		clear:both;
	}
	#right{
		float:left;
		width:200px;
		height:300px;
		background-color:red;
	}
	</style>
</head>
<body>
	<div id="one">这是一个盒子</div>
	<div id="two">这还是一个div</div>	
	<div class="box1">这是第一个div</div>
	<div class="box2">这是第二个div</div>
	<div class="box3">这是第三个div</div>
	<a href="#">这是一个a标签</a>
	<a href="#">这是一个a标签</a>
	<a href="#">这是一个a标签</a>
    <div id="left">左</div>
	<div id="center">中</div>
	<div id="right">右</div>
	
</body>
</html>

三.定位布局

1.position-----属性规定元素的定位类型，任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。可取值：
在这里插入图片描述注：
static : 默认值
absolute: 绝对定位，会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上的
值相较于父级元素的绝对定位，如果不存在这样的父级元素，相较于body
relative: 相对定位，不会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上
的值进行相对定位
2.代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位布局</title>
	<style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	#main{
		margin:0 auto;
		width:300px;
		height:300px;
		border:1px solid black;	
		position:relative;
	}
	#left{
		width:100px;
		height:100px;
		background-color:green;		
		top:100px;
		left:200px;
		position:absolute;
	}
	#center{
		width:100px;
		height:100px;
		background-color:yellow;
	}
	#right{
		width:100px;
		height:100px;
		background-color:red;
	}
	</style>
</head>
<body>
	<div id="main">
	   <div id="left">左</div>
	   <div id="center">中</div>
	   <div id="right">右</div>
	</div>
</body>
</html>

四.CSS3弹性盒子

1.display:flex; ----- 弹性盒子，不管其内容如何，使所有弹性项目的长度均相同
2.flex-direction-----弹性盒子中子元素的排列方式，可取值：

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

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style type="text/css">
.flex-container{
width: 400px;
height: 250px;
background-color: lightgrey;
display: flex;
flex-direction:column-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
</div>
</body>
</html>

3.flex-wrap-----设置子元素超过父元素后是否自动换行
在这里插入图片描述
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style type="text/css">
.flex-container{
width: 400px;
height: 250px;
background-color: lightgrey;
display: flex;
flex-wrap:wrap-reverse;
/* margin-top: 400px;*/
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
<div class="flex-item">弹性盒子4</div>
<div class="flex-item">弹性盒子5</div>
<div class="flex-item">弹性盒子6</div>
<div class="flex-item">弹性盒子7</div>
<div class="flex-item">弹性盒子8</div>
<div class="flex-item">弹性盒子9</div>
</div>
</body>
</html>

4.flex-flow-----flex-direction和flex-wrap的简写
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子</title>
<style type="text/css">
.flex-container{
width: 400px;
height: 250px;
background-color: lightgrey;
display: flex;
/* flex-direction:row-reverse;
flex-wrap:wrap; */
flex-flow:row-reverse wrap;
/* margin-top: 400px;*/
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
<div class="flex-item">弹性盒子4</div>
<div class="flex-item">弹性盒子5</div>
<div class="flex-item">弹性盒子6</div>
<div class="flex-item">弹性盒子7</div>
<div class="flex-item">弹性盒子8</div>
<div class="flex-item">弹性盒子9</div>
</div>
</body>
</html>

5.代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3弹性盒子</title>
	<style type="text/css">
	.flex-container{
		width:400px;
		height:250;
		background-color:blue;
		/*设置弹性盒子*/
		display:flex;
		flex-direction:row;
	}
    .flex-item{
    	margin:10px;
    	width:100px;
    	height:100px;
        background-color:pink;
    }
	</style>
</head>
<body>
	<div class="flex-container">
	     <div class="flex-item">弹性盒子1</div>
		 <div class="flex-item">弹性盒子2</div>
		 <div class="flex-item">弹性盒子3</div>
	</div>
</body>
</html>

五.其他属性

1.align-items-----弹性容器内的项目指定默认对齐方式
在这里插入图片描述
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>align-items</title>
	<style type="text/css">
	#main{
		width:250px;
		height:200px;
		border:1px solid pink;
		display:flex;
		align-items:center;
	}
	#main div{
		flex:1;
	}
	</style>
</head>
<body>
	<div id="main">
		<div style="background-color:coral;">red</div>
		<div style="background-color:lightblue;">blue</div>
		<div style="background-color:lightgreen;">green</div>
	</div>
</body>
</html>

2.align-content-----修改 flex-wrap 属性的行为。它与 align-items 相似，但是它不对齐弹性项目，而是对齐弹性线。
注意：必须有多行项目，此属性才能生效！
提示：使用 justify-content 属性可将主轴上的项目（main-axis）水平对齐。
可取值：
在这里插入图片描述