文章目录
1. 元素的显示模式
1.1 块级元素
常见的元素:
h1 - h6 、p、div 、ul、ol、li…
特点：
- 独占一行
- 高度, 宽度, 内外边距, 行高都可以控制
- 宽度默认是父级元素宽度的 100%（和父元素一样宽）
- 是一个容器(盒子), 里面可以放行内和块级元素
1.2 行内元素
常见元素：
a、strong、b、em、i、del、s、ins、u、span…
特点：
- 不独占一行，一行可以显示多个
- 设置高度，宽度，行高无效
- 左右外边距有效(上下无效)，内边距有效
- 默认宽度就是本身的内容
- 行内元素只能容纳文本和其他行内元素，不能放块级元素
1.3 行内元素和块级元素的区别
- 块级元素独占一行，行内元素不独占一行
- 块级元素可以设置宽高，行内元素不能设置宽高
- 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置
1.4 改变显示模式
使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素
2. 盒模型
任何一个 html 元素都是一个矩形的盒子，而盒子里可以放内容（内容可以是文本或者其他元素）
content 指的是内容，padding 指的是内边距，border 指的是边框，margin 指的是外边距。
2.1 边框
通过 border 来设置边框的属性，直接使用 border 属性则是直接设置四个方向。
使用 border-left、border-right、border-top、border-bottom 来设置左边、右边、顶部、底部。
设置边框要设置三个方面：边框的粗细、颜色、风格。
先来设计一个简单的黑色边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我最帅</title>
<style>
div {
width: 200px;
height: 100px;
background-color: orange;
color: rgb(255, 255, 255);
text-align: center;
line-height: 100px;
border: 5px black solid;
}
</style>
</head>
<body>
<div>
这是一个div
</div>
</body>
</html>
border: 50px black solid 这是一个宽度为 5像素，颜色为黑色，风格为实线（solid）的边框。
将开发者工具打开，可以发现此时的尺寸是有一些问题的。
可以看到此时的尺寸并不是 200 * 100，而是 209.6 * 109.6 了。
此时多出来的尺寸就是边框的尺寸，这说明边框默认情况下会撑大盒子的，
换句话也就是 width 和 height 表示的是内容部分的尺寸。
但是我们更多的时候是不希望盒子被撑大的，因为会影响该元素的其他元素的相对位置。
此时就可以设置一个专门的属性来防止盒子被撑大。
box-sizing: border-box;
设置好上述的属性之后，盒子就不会被撑大了。
2.1.1 边框的粗细
可以改变像素大小来改变边框的粗细。
border: 10px black solid;
以上是 10 像素的边框。
border: 20px black solid;
以上就是 20 像素的边框。
2.1.2 边框的颜色
这里的更改颜色可以使用，英文单词、rgb、十六进制 的方式来更改颜色。
border: 5px green solid;
上面就是一个英文单词更改的绿色边框。
border: 5px #00ff00 solid;
以上就是一个十六进制更改的绿色边框。
border: 5px rgb(0, 255, 0) solid;
以上就是一个rgb更改的绿色边框。
2.1.3 边框的风格
上面演示的 solid 是一个 实线 的风格，下面演示其他的风格。
dashed 表示的是一个为虚线的风格。
dotted 的风格是一个由点组成的虚线。
具体有哪些风格可以打开 mdn 文档，查看 border
这里面就有一些可以参考的风格。
2.2 内边距
先来使用 padding给左边设置一个内边距，padding 设置的是 内容 和 边框 之间的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我最帅</title>
<style>
div {
width: 200px;
height: 100px;
background-color: orange;
color: rgb(255, 255, 255);
text-align: center;
line-height: 100px;
border: 5px rgb(0, 0, 0) solid;
box-sizing: border-box;
padding-left: 10px;
}
</style>
</head>
<body>
<div>
这是一个div
</div>
</body>
</html>
根据开发者工具观察盒子模型，可以很清楚的看到左边多了一条框框，并且是位于边框和内容之间的。
我们也可以不指定方向，此时就是四个方向（top、right、bottom、left）都会去添加一条内边距。
padding: 10px;
可以看到上述图片的内边距已经是 4 个方向都有了。
添加页边距的时候还有一些其他的写法：
padding: 10px 20px; 表示的是上下边距是 10，左右边距是 20。
padding: 10px 20px 30px 40px; 表示的分别是四个方向边距，顺序是 上右下左。
如果要使用 padding: 10px 20px; 的方式，设置一个上下边距是 10 ，左右边距是 20 。
可以看到左右边距比上下边距宽一些。
也可以使用 padding: 10px 20px 30px 40px; 的方式，分别给四个方向设置边距。
可以看到，按照从上右下左的顺序，边距逐渐增大。
2.3 外边距
先来观察没有设置外边距的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我最帅</title>
<style>
.two {
width: 200px;
height: 100px;
background-color: orange;
color: rgb(255, 255, 255);
text-align: center;
line-height: 100px;
border: 5px rgb(0, 0, 0) solid;
box-sizing: border-box;
padding: 10px 20px 30px 40px;
}
.one {
width: 200px;
height: 100px;
background-color: orange;
color: rgb(255, 255, 255);
text-align: center;
line-height: 100px;
border: 5px rgb(0, 0, 0) solid;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="one">
这是一个div
</div>
<div class="two">
这是另一个div
</div>
</body>
</html>
当此处并没有设置外边距的时候，两个 div 是连接到一起的。
下面设置底部为 10 像素的外边距。
margin-bottom: 10px;
设置成功后，两个 div 就分开了。
margin 的写法和 padding 差不多，也是可以分四个方向来设置。
margin: 10px; 表示四个方向都是 10像素。
margin: 10px 20px; 表示上下边距为 10 像素，左右边距为 20 像素。
margin: 10px 20px 30px 40px; 表示按照 上右下左 的顺序分别设置为 10像素、20像素、30像素、40像素。
2.3.1 margin 的特殊情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我最帅</title>
<style>
.two {
width: 200px;
height: 100px;
background-color: orange;
color: rgb(255, 255, 255);
text-align: center;
line-height: 100px;
border: 5px rgb(0, 0, 0) solid;
box-sizing: border-box;
}
.one {
width: 200px;
height: 100px;
background-color: orange;
color: rgb(255, 255, 255);
text-align: center;
line-height: 100px;
border: 5px rgb(0, 0, 0) solid;
box-sizing: border-box;
margin-bottom: 10px;
}
.three {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="one">
<div class="three">
</div>
</div>
<div class="two">
这是另一个div
</div>
</body>
</html>
根据上面的代码会得到下面的情况。
可以看到左上角有一个红色的矩形。
现在将 margin-left 和 margin-right 属性设置成 auto 就会形成一个水平居中的效果。
.three {
width: 50px;
height: 50px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
但是如果把 margin-top 和 margin-bottom 设置成 auto 是不可以形成垂直居中的。
