CSS详解-day04（块级元素与行内元素）

---

前言

本文主要介绍CSS的元素显示形式，重点讲述块级元素和行内模元素

---

块级元素

常见的元素:

h1 - h6
p
div
ul
ol
li

特点：
独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
块级元素是一个容器(盒子), 里面可以放行内和块级元素.
文字类的元素内不能使用块级元素
p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

---

行内元素

常见的元素

a
strong
b
em
i
del
s
ins
u
span

特点：
不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

行内元素和块级元素的区别
块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.

---

更改显示模式

display: block /*改成块级元素*/
display: inline /*改成行内元素 */
display: inline-block /*改成行内块元素*/

---

感谢您对大饼的支持，今天的你也很努力呦