当前位置：首页 > news >正文

javaEE 初阶 — CSS 元素的显示模式与盒模型

news 2025/7/2 12:25:43

文章目录

1. 元素的显示模式
- 1.1 块级元素
- 1.2 行内元素
- 1.3 行内元素和块级元素的区别
- 1.4 改变显示模式
2. 盒模型
- 2.1 边框
- - 2.1.1 边框的粗细
  - 2.1.2 边框的颜色
  - 2.1.3 边框的风格
- 2.2 内边距
- 2.3 外边距
- - 2.3.1 margin 的特殊情况

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 是不可以形成垂直居中的。