1.7 KiB
1.7 KiB
css 基础（二）
块级元素和内联元素
-
块级元素
-
特点：
- 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
- 每个盒子都会换行
- width和height 都可以发挥作用
- padding , margin, border 会将其他元素从当前盒子周围推开
-
-
内联元素
- 特点：
- 盒子不会换行
- width和height 不能发挥作用
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
- 特点：
块级元素display默认属性值为 block
内联元素 dipslay的属性默认值为inline
块级元素和内联元素可以通过display="inline"/"block" 实现互相转换
盒模型 （box model）
css 盒模型包括如下要素
- 元素内容 （content）
- 内边距 （border）
- 边框（border）
- 外边距（margin）
上图中 最内层的蓝色色块是 元素内容（content）
蓝色外侧的 绿色的是内边距（padding）
padding外侧的橙黄色的部分是边框（border）
border 外侧 也就是最外侧的部分是外边框（margin）
盒模型计算元素的总宽度和总高度：
元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度