一个 HTML 元素，需要占用页面的布局空间，这个空间由以下几个部分组成：
- content 内容区域 元素本身的大小
- padding 内间距 元素内容与边框之间的距离
- border 元素的边框
- margin 外间距 元素与元素之间的距离
涉及到四个方向 left 左 right 右 top 上 bottom 下
外间距 （margin）
外间距的写法：
- margin-bottom: 50px; 设置单侧外间距（top上 / right右 / bottom下/ left左）
- margin:10px; 四个方向都是 10px
- margin:10px 20px; 上下 10px 左右 20px
- margin:10px 20px 30px; 上 10px 左右 20px 下 30px
- margin:10px 20px 30px 40px; 上 10px 右 20px 下 30px 左 40px
- margin: 0 auto; 上下 0 左右居中
块级元素左右外间距计算成等值，能实现水平居中效果
规律：按照 上右下左 顺时针 依次赋值 没有的找对门
外间距指的元素外部与其它元素之间的距离
- 块级与行内块元素四个方向的外间距均生效
- 行内元素的左右外间距可以用，上下外间距不生效
- 父子贴边问题：给父元素加 BFC 结界 overflow:hidden；
第 1 个子元素的上外间距与最后 1 个子元素的下外间距都会包裹在父元素范围之内 - 相邻兄弟间在垂直方向上如果有重叠的外间距，取最大值显示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外间距测试</title>
<style>
body {
/*可以去掉body默认四个方向的8px外间距*/
margin: 0;
}
/* div默认宽度为其父级宽度的100% 默认高度为0 */
.fu {
background-color: rgba(255,255,0,.3); /*不透明度.3 0透明 1不透明*/
/*给父元素设置BFC结界 把首尾元素超出的外间距包裹在内*/
overflow: hidden;
}
.fu>div {
width: 100px;
height: 100px;
background-color: rgba(0,0,255,.6);
border: 2px solid #00f;
color: #fff;
}
/* 相邻兄弟垂直方向的外间距取大值显示,不会叠加 */
.z1 {
margin-bottom: 30px;
margin-top: 50px;/*第1个子元素的上外间距会超出父元素的范围*/
}
.z2 {
margin-top: 50px;
}
.z4 {
margin-bottom: 50px;/*最后1个子元素的下外间距会超出父元素的范围*/
}
.z3 {
/* 上 右 下 左 顺时针依次赋值 没有值就找对门的值 */
margin: 10px 20px 30px 40px;
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
/*上下0 左右auto让浏览器自动计算为相等的值 实现块级元素的水平居中 */
margin: 0 auto;
}
span {
border: 2px solid #f00;
}
.s2 {
/* 行内元素垂直方向的外间距不生效,不要使用! */
margin: 30px 20px;
}
</style>
</head>
<body>
<span>span1</span><span class="s2">span2</span><span>span3</span>
<!-- .fu>.z*4 -->
<div class="fu">
<div class="z1">子元素div1</div>
<div class="z2">子元素div2</div>
<div class="z3">子元素div3</div>
<div class="z4">子元素div4</div>
</div>
</body>
</html>边框 （border）
设置边框：border:1px solid #000； 粗细 线型 颜色
设置某一个方向的边框：border-top: 1px solid #000； 设置上边框的粗细 线型 颜色
去掉边框： border:none； 或者 border:0；
线型：solid 单实线 dashed 虚线 dotted 点状线 double 双实线...
边框圆角： border-radius: 100px；
- 数值越大，角越圆
- 边框圆角为正方形高度的一半，可以切圆形
内间距 （padding）
内间距的写法：
- padding-top: 50px; 设置单侧内间距（top 上/right 右/bottom 下/left 左）
- padding:10px; 四个方向都是 10px
- padding:10px 20px; 上下 10px 左右 20px
- padding:10px 20px 30px; 上 10px 左右 20px 下 30px
- padding:10px 20px 30px 40px; 上 10px 右 20px 下 30px 左 40px
规律：按照 上右下左 顺时针 依次赋值 没有的找对门
内间距指的是元素内容与边框之间的距离
- 块级与行内块元素的四个方向的内间距均生效
- 行内元素的左右内间距正常生效，但上下内间距不生效
内间距使用场景
让元素内部距离外层父级元素的边有点距离，主要为了美化，如：
- 输入框的文字不要贴边显示
- 文本卡片内容不要贴边显示
切换盒子模型计算方案： box-sizing: border-box;边框盒子- 效果：加内间距与边框都不会让元素变大，都算在元素设置的 width 与 height 中
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框与内间距</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: #0aa1ed;
/* 设置四个方向的 粗细 线型 颜色*/
border: 5px solid #f00;
/* 设置单方向的边框 */
border-top: 8px solid #ff0;
/* 边框圆角 值越大 角越圆 值为正方形宽高的一半是圆形 */
border-radius: 100px;
}
.d2 {
width: 200px;
height: 200px;
border: 5px solid #f0f;
padding-left: 50px;
padding-top: 50px;
/*默认的计算方案:加内间距与边框都会让元素变大*/
/*切换成"边框盒子"计算方案后,内间距与边框都会算在预设的大小里,是固定大小*/
box-sizing: border-box;
margin: 50px; /*外间距不算在元素本身的大小里,但是会占据页面布局空间*/
}
span {
border: 3px solid #f00;
}
.s2 {
/* 行内元素垂直方向的内外间距都不能使用! 水平方向可以正常生效 */
padding: 50px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">内间距测试</div>
<hr>
<span>我是span</span>
<span class="s2">我是span</span>
<span>我是span</span>
<h1>我是标题</h1>
</body>
</html>