-
①盒子水平居中注意
可以让一个盒子实现水平居中，需要满足一下两个条件：
必须是块级元素。
盒子必须指定了宽度（width）
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
line-height: 文字垂直居中;
text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
width: 300px;
height: 100px;
background-color: pink;
/*写法一*/
/* margin: 0 auto; 通俗写法 0 auto 上下是 0 左右是auto 自动 水平居中对齐 */
/*写法二*/
/* margin-left: auto;
margin-right: auto; 自动充满*/
/*写法三*/
/* margin: auto; 上下左右都是auto*/
margin: 100px auto;
}
</style>
</head>
<body>
<div>
我是盒子
</div>
</body>
</html>
效果
效果
-
②相邻块元素垂直外边距的合并
有 A 盒子 与 B 盒子
给A盒子底部设置margin-bottom: 100px;
给B盒子顶部设置margin-top: 150px
则AB 之间的垂直距离不会相加为 250px 要以大的距离为准为150px
示例图
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
background-color: purple;
}
.xiongda {
margin-bottom: 100px;
}
.xionger {
background-color: pink;
margin-top: 150px; /*最终两个盒子的距离是 最大的那个为准 150*/
}
</style>
</head>
<body>
<div class="xiongda">1</div>
<div class="xionger">2</div>
</body>
</html>
效果
效果
-
③padding不会撑开盒子
如果一个盒子和父亲一样宽,占满父亲的宽度, 如果此盒子没有给定宽度 则padding 不会影响本盒子大小
如果给定了宽度则盒子会受影响.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 200px;
height: 300px;
background-color: pink;
/*padding-left : 30px;因为父盒子有宽度给定值了 则padding会撑开*/
}
.son {
padding-left : 30px
/*儿子 没有给定宽度 ,用的是默认的 ,所以padding不会被撑开*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
-
④嵌套元素垂直外边距合并
问题描述 :
B盒子在A盒子之内 ,B盒子想距离A盒子下方50px 采用 margin-top: 50px失效
但是对于左右则好用margin-left: 50px
示例图
问题代码
.father {
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
margin-left: 50px;
}
问题效果
解决方法
- 可以为父元素定义1像素的上边框或上内边距。(padding)
- 可以为父元素添加overflow:hidden。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*padding-top: 50px;*/
/*border-top: 1px solid pink; 1. 用border*/
/*padding-top: 1px; 2 用padding */
overflow: hidden; /* 3. 用这个单词可以解决，具体单词的意思我们后面讲*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
修改后效果
修改后效果
