【前端】CSS(3) —— CSS的盒模型与弹性布局

JavaEE传送门

JavaEE

【前端】CSS(1) —— CSS的基本语法和一些简单的选择器

【前端】CSS(2) —— CSS的基本属性

---

---

元素的显示模式

• 独占一行的: 块级元素 (div, h1-h6, 怕, table, tr …)
• 不独占一行的: 行内元素 (span, a, u, b, stong …)

可以使用 display 属性针对行内/ 块级元素相互转换

(绝大多数都是把行内元素转换为块级元素, 几乎不会把块级元素转成行内元素)

display: inline;
display: block;

display 还有个用途, 让元素隐藏

display: none;

---

CSS 中的盒模型

页面上的 html 元素都是一个一个的矩形, 每个矩形就可以视为是一个 "盒子"吗盒子里面就可以装东西 (文字, 链接, 图片, 表格…其他任意元素)

每个盒子, 除了内容之外, 还有一些其他的部分.

• 内容: content (最中间的)
• 内边距: padding
• 边框: border
• 外边框: margin

# 注意 # html 中的每个元素都是按照上述这样的规则来进行展开的.

---

在 CSS 中就可以通过一些属性来设置这里和盒子模型相关的

border

通过 border 给元素设置边框

border: 边框宽度 边框颜色 线条样式;

我们需要加上一个特殊的属性. 设置的这个属性会保证尺寸不变, 如果再有边框就不会把整个占地面积给撑大.