61 lines
1.7 KiB
Markdown
61 lines
1.7 KiB
Markdown
# 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的上下宽度 |