老鬼的博客 来都来啦,那就随便看看吧~
css之行内元素盒模型
发布于: 2020-08-13 更新于: 2020-08-13 分类于: Html 阅读次数: 

一:介绍

1
2
3
4
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding,但是垂直方向padding不影响页面的布局。
- 行内元素可以设置border,垂直方向的border不影响页面的布局。
- 行内元素可以设置margin,垂直方向的margin不影响页面的布局。

二:元素显示的类型

2.1 display

1
2
3
4
5
6
7
8
9
10
11
12
13
display是进行块元素和行内元素的互转,主要有如下几种属性:

- inline
- 将元素设置为行内元素
- block
- 将元素设置成块元素
- inline-block
- 将元素设置为行内块元素,行内块元素既可以设置宽度和高度
又不会独占一行。
- table
- 将元素设置为一个表格
- none
- 将元素隐藏

2.2 控制元素显示和隐藏

1
2
3
4
5
6
7
8
上面介绍到使用display设置成none可以将元素隐藏,下面介绍两外一种:

- visibility,对应值如下:
- visible : 默认值,默认是显示
- hideen :元素在页面隐藏不显示,但是依然占据其原来的位置。

display和visibility,的区别就是display隐藏后不会保留原来的位置,
visibility为保留原来的位置。
*************感谢您的阅读*************