一、内边距padding不会撑开盒子的情况
情况一
下面这种情况,只指定了height,加上内边距padding后,只会将height撑开60px,不会撑开width
前面的做的那个新浪导航栏项目,没有设定width,但是可以被撑开,是因为a标签被转换成了行内块元素,而行内块元素本身有自己默认内容的宽度,所以可以左右可以被撑开。
如下是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav{
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a{
/* a属于行内元素,此时必须要转换 行内块元素 */
display: inline-block;
height: 41px;
/* 上下为0,左右为20px
这里使用padding撑开,是因为行内块元素本身就有本身内容大小的默认宽度,所以可以撑开*/
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover{
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航栏</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>
情况二
加了一个子元素p,虽然父亲规定了width和height,但是加上padding不会撑开盒子
给子元素加上width:100%后,盒子就被撑开了
二、盒子水平居中对齐(块级元素水平居中)
三、行内元素或者行内块元素水平居中
四、盒子外边距合并问题
浮动的盒子不会有外边距合并的问题
1、相邻元素垂直外边距的合并
给两个盒子分别加上外边距,结果两个盒子之间的距离不是外边距之和,而是较大的外边距。
如何解决呢?
2、嵌套块元素塌陷
**注意:**加上了float的子元素,不会造成塌陷
给子元素添加的外边距大于父类的外边距,父元素会被带着增大外边距。
解决方案
1、给父元素添加边框
添加红色边框不太好,改成了 透明边框,如下
2、给父亲添加内边距padding
3、给父元素添加overflow:hidden,这种方法不会额外增加父元素的大小,比较好。
五、清除内外边距
这是不清除
结果元素不能顶着,总有一段距离
清除后,
行内元素就算设置了上下外边距,也不会显示
css3盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3盒子模型</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<p>
小猪佩奇
</p>
</body>
</html>