css中显示使用的方法

　　

css中显示使用的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

我们一般在css布局制作时候,常常会用到显示属性中的值,没有,内联,inline-block那么今天我们来学习如何使用它们

<强>显示属性

显示属性可以有多个值,但常常用到的如下所示

没有:此元素不会被显示。

块:此元素将显示为块级元素,此元素前后会带有换行符。

内联:此元素会被显示为内联元素,元素前后没有换行符。

inline-block:行内块元素,既有块级属性又有行级属性。

所以在这篇文章中,我将详细介绍块,内联,inline-block以及没有,这些常用的属性值

<强>显示:块

特点:独自占用一行,可以通过css改变宽高

常用的块级元素:div, p, ul, li ol,形式,地址

<强>显示:内联

特点:内容决定大小,不可以通过css改变宽高

常用的行级元素:跨度,强壮,哦,,德尔

& lt; style> 　　div { 　　背景颜色:粉色; 　　} 　　跨度{ 　　背景颜色:黄色; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div> 123 & lt;/div>//块级元素 　　& lt; p> & lt;跨类=皊pan"祝辞hello world

//行级元素

如上图所示可以看出块元素占据了一行的全宽,想当与宽度:100%,下面的内容要以新行开始

而行级元素就是只显示自己那部分的内容,并不占用一行

<强>行块级元素转换

(1)块级元素转行级元素

给块级元素设置显示:内联

(2)行级元素转换成块级

给行级元素设置显示:块

<强>显示:inline-block

常见的行内块元素:img,输入

特点:内容决定大小,可以改变宽高

& lt; style> 　　跨度{ 　　背景颜色:黄色; 　　显示:inline-block;//设置行块级元素 　　宽度:100 px; 　　高度:30 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p> & lt;跨类=皊pan"祝辞hello world

<强>显示:没有与可见性:隐藏区别

显示:没有一个用来隐藏元素,不仅看不见还不占用任何空间大小

可见性:隐藏也可以用来隐藏元素,但是虽然看不见仍存在,保留一个空位

例

显示:没有

.span { 　　background - color:海蓝宝石; 　　显示:没有;} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p> & lt;跨类=皊pan"祝辞hello world

你好被隐藏但是并没有留下任何空位

可见性:隐藏

& lt; style> 　　.span { 　　背景颜色:粉色; 　　可见性:隐藏;} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p> & lt;跨类=皊pan"祝辞hello world

你好被隐藏但仍然空出一个位置

感谢各位的阅读!看完上述内容,你们对css中显示使用的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。

css中显示使用的方法