26.CSS理论_盒子的类型_股票证券

创始人

2025-05-29 20:07:59

块级元素

在这里插入图片描述

● 这种标题被称为块级元素
● 这种元素被可视化为块
● 这种元素占据了父元素宽度的100%
● 默认情况下，元素是垂直堆叠的，一个接一个
● 如前所述，应用盒子模型

如下默认是块级元素：

display: block
body,main,header,footer,section,nav,aside,div,h1-h6,p,ul,ol,li,etc

在这里插入图片描述

● 内联元素仅占用内容所需的空间
● 内联元素不会导致前后换行
● 内联元素盒子中宽度和高度不在适用
● 内联元素填充和边距仅水平应用(左和右)

如下默认是内联元素：display: inline

a, img, strong, em, button, etc.

例如，以导航栏举例

nav a:link {background-color: orangered;margin: 20px;padding: 20px;
}

在这里插入图片描述

● 如图，内联元素margin元素并不会创造任何的垂直空间
● 填空看下去好像有一点变化，那是因为根据内容内部进行变化，并不会实际创造空间
● 我们可以尝试将其改为块级元素

nav a:link {background-color: orangered;margin: 20px;padding: 20px;display: block;
}

在这里插入图片描述

● 改为块级元素元素被变为垂直排列

● 外部表现的像内联元素，但是在内部表现的像块级元素
● 只占用内容空间
● 并不会导致换行
● 块级元素的模式可以被适用，设置高度、宽度、边距和填充

● 还是以导航栏举例

nav a:link {margin-right: 30px;margin-top: 10px;
}

在这里插入图片描述

● 因为是内联元素，故左右上的效果会被启用，但是上下并不会
我们将其改为内联块元素

nav a:link {margin-right: 30px;margin-top: 10px;display: inline-block;
}

在这里插入图片描述

● 块级元素的功能被应用，但是不是垂直排列，外部表现得像内联元素