css--盒子模型--塌陷问题及处理
盒子模型
1 绝大多数标签都可以看作盒子,可以设置宽高或设置内容;在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
content 盒子的内容
padding 内边距 内容到边框的距离
border 边框
margin 外边距 元素与元素的间距
2 盒子模型的属性
1) width 宽 height高 均指内容放入宽高,而非盒子的
2) padding 内边距 内容到边框的距离
padding:10px; 一个值相当于四个方向值相同(上 右 下 左)
padding:10px 20px; 上10px 右20px 下10px 左20px
padding:10px 20px 30px; 上 右 下 左20px
padding:10px 20px 30px 40px; 上 右 下 左
上 padding-top
右padding-right
下 padding-bottom
左padding-left
2)border 边框
按三要素:border-width 边框宽度
border-style 边框样式 solid实线 dashed虚线
border-color 边框颜色
按方向:border:10px solid blue 四个方向均同样设置
border-top
border-right
border-bottom
border-left
background-color:#000;黑
border-width:20px;
border-style:solid dashed dotted doble; 上右下左
border-color:red green blue pink; 上右下左
border-bottom:5px solid blue; 下边框设置3个样式
3)margin 外边距 元素与元素的间距
margin:20px 30px 上右下左 同padding
margin-top
margin-right
margin-bottom
margin-left
水平居中: text-align:center;
margin: 0 auto; 上下边距为0 auto让有宽度的块级元素水平居中 eg:div p
3 margin塌陷问题及解决
父子塌陷问题
父亲没有设置padding border 内容时,子元素垂直方向的margin会叠加给父亲
一旦发生塌陷,叠加规则:父亲最终垂直方向的margin为父子中最大的margin值,并非相加
解决方法: 1 把儿子的margin转换成父亲的padding 注意盒子总高度变化问题
2 给父亲增加一个属性 overflow:hidden; //触发了BFC
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> *{ margin: 0; padding: 0; } /*margin 父子塌陷问题 父亲没有设置padding border 内容时,子元素垂直方向的margin会叠加给父亲 一旦发生塌陷,叠加规则:父亲最终垂直方向的margin为父子中最大的margin值,并非相加 解决方法: 1 把儿子的margin转换成父亲的padding 注意盒子总高度变化问题 2 给父亲增加一个属性 overflow:hidden; //触发了BFC */ .box1{ width: 150px; height: 150px; background-color: pink; /* padding: 20px; */ /* overflow: hidden; */ } .p1{ width: 50px; /*内容的宽*/ height: 50px; /*内容的高*/ background-color: aqua; padding: 10px 20px; /*内边距 内容到边框的距离 上下为10px 左右20px*/ border: 2px dashed red; border-bottom: 2px solid blue; margin: 20px; } </style> </head> <body> <div class="box1"> <p class="p1">这是内容1</p> </div> </body> </html>
4 并列元素(兄弟塌陷)
垂直方向上相遇的盒子模型,会发生margin塌陷;现象就是元素二者之间的距离并非之和,而是二者之间最大的
解决方法:只配置一个方向即可
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> .box1,.box2{ width: 50px; height: 50px; background-color: red; } /* 并列元素(兄弟)塌陷:垂直方向上的盒子模型,会发生margin塌陷 即两个盒子模型的margin值选二者中最大的 解决方式:只设置一个方向 */ .box1{ margin-bottom: 50px; /*只在其中一个设置,即只设置margin-bottom 或margin-top*/ /* margin-bottom: 30px; */ /*会发生并列元素塌陷*/ } .box2{ margin-top: 0px; /* margin-top: 20; */ } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </htm
5 背景属性
1)背景颜色 background-color
2) 背景图片 background-img:url(xxx.jpeg); // 默认平铺
3)背景重复 background-repeat:repeat-x; //不写时默认图片平铺
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
/* 默认图片平铺
控制图片平铺:repeat x,y方向均重复; repeat-x x方向平铺;repeat-y y方向平铺;
no-repeat 不平铺;
*/
.box1{
width: 1500px;
height: 1500px;
/* background-image: url(../ddr.png);
background-repeat: no-repeat;
background-position: right bottom; */
/*简写 若不需要设置,后面四个属性值可以不写*/
background: grey url(../ddr.png) no-repeat center center fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
5 css元素的显示模式
元素根据表现的特性分为:块级元素、行内元素、行内块元素
默认特点:
块级元素 div p li dt dd h1~h6 ul dl
1)独占一行
2)设置宽高有效 (padding margin line-height)
3)不设置宽高,默认是父亲的100%
行内元素 span em i b strong
1)可以与其他行内元素并排
2)设置宽高无效 (行高 line-height可设置,不支持垂直方向 padding margin)
3)元素靠内容撑开
行内块元素 img
1)可以与其他行内元素 或 行内块元素并排
2)可以设置宽高
一般通过如下方法去除默认的padding margin
*{
padding:0;
margin:0;
}
6 display 改变元素的显示模式
display:block; 转化为块级元素
display:inline; 转化为行内元素
display:inline-block; 转化为行内块元素
display:none; 隐藏元素