首页 > 编程知识 正文

display有哪些属性,display 属性

时间:2023-05-03 20:53:40 阅读:268678 作者:4582

display的属性值

display所有的取值在下图中:

常用的几种取值 1. display:none

此元素不会被显示,并且不占据页面空间

与visibility:hidden的区别

hidden占实际空间,其后的元素仍在该有的位置,而none后的元素占none原有的位置

2. display:block

块级元素,会独占一行

块级元素的特点

(1) 每个块级元素都从新的一行开始,并且其后的元素也另起一行;
(2) 如果不设置宽度,其宽度会自动填满父元素的宽度;
(3) 元素的高度、宽度、行高以及margin上下左右都可设置;

3. display:inline

多个行内元素占同一行,直到放不下才换行

行内元素的特点

(1) 元素会在一行内显示,超出屏幕宽度自动换行;
(2) 元素的高度、宽度、行高都不可设置,只能设置margin和padding左右的值;
(3) 元素的宽度就是它包含的文字或图片的宽度,只能是靠元素内的内容撑开;

4. display:inline-block

行内块元素,与行内元素一样可以在一行内显示

行内块元素的特点

(1)和其他元素都在一行上;
(2) 元素的高度、宽度、行高以及顶和底边距都可设置;

5. display:flex

多栏多列布局,比较适合移动端开发使用
可以参考能干的宝贝的博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

行内元素与块级元素的区别

嵌套

行内元素:行内元素只能嵌套行内元素,不能嵌套块级元素。(示例元素:span,b,i,a,u,sub,sup,strong,em)
块级元素:块级元素可以嵌套行内元素,但是行内元素不可以嵌套块级元素。(示例元素:div,h1-h6,ul,ol,dl,p)

margin和padding

行内元素:有margin和padding,但是只能够设置左右的值,设置上下的值是无效的。
块级元素:可以设置margin和padding上下左右的四个值,margin可以有负值,padding不允许有负值。

设置宽高

行内元素:不允许设置宽高,行内元素的宽高只能是由行内元素内的内容撑起来。
块级元素:允许设置宽高,如果不设置,默认宽度是父元素的100%,高度是由内容撑起来的。

总结

以前用display时挺懵逼的,所以就专门写了这篇,相关的用法如果忘记了就翻一翻这篇文章吧!

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。