对盒模型的理解
一.什么是盒模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
从盒子的内部到盒子的外围：
内容（图片、文本、视频、小盒子…）
内填充（补白）【相当于盒子里面的泡沫】
盒子本身（border）
外边距~
如图：
二.盒模型的css属性
内填充：padding属性
外边距：margin属性
边框：border
三.padding属性
- padding是在盒子里面，在盒子与内容之间
- padding的作用：控制子元素在父元素里面的位置关系
- padding会把盒子撑大
- 如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ）
- 如果给单一方向添加paddingpadding-top/bottom/left/right
- padding的设置特点：padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左 - padding不会对背景图的位置造成影响
- padding不能为负值
例子
让文本和盒子的周围产生间距
效果如图
四.margin属性
1.margin在元素外围，不会撑大元素的大小
2. 作用:控制元素与元素之间的间距。
3. 给单一方向添加marginmargin-left/right/top/bottom
4. margin设置方法：margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左 4.:
5. margin:0 auto;让当前元素在父元素里面左右居中。
6. margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top,会 错误放在父元素上面。
7. margin可以设置负值
例子
让两个盒子（同级的盒子）之间，产生一定距离
<!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; } .box{ width: 200px; height: 200px; background: slategrey; margin-top: 30px; margin-left: 40px; margin-right: 70px; margin-bottom: 20px; margin: 100px 40px 60px 70px; float: left; } .wrap{ width:300px; height:200px; background: chartreuse; float: left; } </style></head><body> <div class="box"> 半夜 </div> <div class="wrap"> 半夜 </div></body></html>
效果如下
五.边框属性
-
a: 默认情况下边框是长在元素宽高之外。
-
b: border:10px solid blue; ( 复合式写法 )
属性拆分：
border-width: 边框大小 border-color: 边框颜色 border-style: 边框类型 （ solid 实线 dashed 虚线 dotted 点状线 double 双线 none 没有线条 ） -
c:单独一个方向设置边框： border-left:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-top:10px solid red;
-
d: border-width/color/style : 属性值： 1个值： 四周都添加边框 2个值： 上下 左右 3个值： 上 左右 下 4个值： 上 右 下 左
-
e: 用边框画三角形： transparent 透明