Day5:html和css

标题图

Day5:html和css

如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。

.dashu {
 width: 100px;
 margin: 0 auto;
}

盒子的水平居中为

margin: auto;

而文字的水平居中为:

text-align: center;

text-align: center; // 文字水平居中
margin: auto; // 盒子的水平居中

盒子水平居中:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		text-align: center; /*居中对齐*/
		width: 100px;
		height: 100px;
		background-color: blue;
		 /* margin: 0 auto; 自动  水平居中对齐 */
		 /* margin: auto; 上下左右都是auto*/
	}
	</style>
</head>
<body>
	<div>
		达叔小生
	</div>
</body>
</html>

margin: 0 auto; // 通俗
// margin: auto; 上下不显示

清除内外边距

* {
 padding: 0;
 margin: 0;
}

外边距合并:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: blue;
	}
	.da{
		margin-bottom: 100px;
	}
	.shu{
		background-color: red;
		margin-top: 150px;
	}
	</style>
</head>
<body>
	<div class="da">1</div>
	<div class="shu">2</div>
</body>
</html>

外边距合并以合并的最大值为准.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		width: 500px;
		height: 500px;
                border: 1px solid red;
		background-color: red;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: blue;
		margin-top: 50px;
		margin-left: 50px;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

content宽度和高度

padding不会影响盒子的大小.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		height: 200px;
		background-color: pink;
		width: 300px;
		/* padding-left: 30px; 给定了宽度,所以padding会撑开*/
	}
	.son {
		padding-left: 30px;
		/*没有宽度不会撑开*/
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">dashu</div>
	</div>
</body>
</html>

padding内边距

圆角

border-radius: 50%;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 300px;
		height: 300px;
		background-color: red;
		margin: 100px auto;  
		border-radius: 50%; 
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	body {
		background-color: #ccc;
	}
	.radius a {
	   width: 170px;
	   height: 170px;
	   background-color: #fff;
	   display: inline-block;
	   margin: 30px;
	   border-radius: 50%;
	   text-align: center;
	   line-height: 170px;
	   color: red;
	   text-decoration: none;
	   font-weight: 700; 
	}
	.radius a:hover {
		background-color: red;
		color: #fff;
	}
	</style>
</head>
<body>
	<div class="radius">
		<a href="#">文字内容</a>
		<a href="#">文字内容</a>
		<a href="#">文字内容</a>
	</div>
</body>
</html>

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影

属性	说明
`h-shadow`	水平阴影的位置
`v-shadow`	垂直阴影的位置
`blur`	模糊距离
`spread`	阴影的尺寸
`color`	阴影的颜色
`inset`	将外部阴影改为内部阴影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 200px;
		height: 200px;
	}
	div:hover {
		box-shadow: 0 15px 15px rgba(0,0,0,0.1);
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

浮动

float浮动:标准流,浮动,定位.

float可以让多个div在同一行显示.

属性值	说明
`left`	元素向左浮动
`right`	元素向右浮动
`none`	元素不浮动

选择器 {float: 属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.up {
		width: 200px;
		height: 100px;
		background-color: red;
		float: left;
	}
	.down {
		width: 220px;
		height: 120px;
		background-color: purple;
	}
	</style>
</head>
<body>
	<div class="up"></div>
	<div class="down"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	.father {
		width: 600px;
		height: 600px;
		background-color: blue;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: red;
		float: right;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
	div {
		width: 100px;
		height: 100px;
	}
	.one {
		background-color: red;
		float: left;

	}
	.two {
		background-color: purple;
		
	}
	.three {
		background-color: blue;
		float: left;
	}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>

盒子模型布局稳定性

width >  padding  >   margin

浮动(`float`)

普通流（标准流）、浮动和定位

属性值	描述
`left`	元素向左浮动
`right`	元素向右浮动
`none`	元素不浮动（默认值）

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

来源：https://www.cnblogs.com/dashucoding/p/11140372.html

标签

html居中

css

圆角

浮动

浮动(float)

推荐

结语

浮动(`float`)