Day5:
html和css
如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。然后数值为auto即可。
.dashu {
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; /*居中对齐*/
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 {
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 {
500px;
height: 500px;
border: 1px solid red;
background-color: red;
}
.son {
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;
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 {
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 {
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 {
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 {
200px;
height: 100px;
background-color: red;
float: left;
}
.down {
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 {
600px;
height: 600px;
background-color: blue;
}
.son {
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 {
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 |
元素不浮动（默认值） |
推荐
如果看了觉得不错
点赞！转发！
达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞