如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为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 点赞