display属性概述
别小看了CSS里的display属性，它能让你随心所欲地调整网页元素的样子！具体来说，它主要有这几种显示模式：块级、内联、隐藏（none）、内联-块级、弹性布局、网格布局、表格布局、内联表格和列表项。每种模式都有自己的特点，适合不同的场景。下面我们就来详细说说它们都是啥意思，以及如何使用！
block：块级元素
你们知道display属性吗？是的，没错，给它加个block参数就能让元素变身块状，排列整齐，不和其他内容混在一起。特别的是，它还能占据整个父容器空间！像是文章标题、段落之类的，都是这个道理……
哈喽，想把什么玩意儿变成块级元素吗？太容易！只用给它添个display:block就OK了！特别适合要占满整行的情况。
想要把字填满一整行？别忘了给它加上display:block。这个小招在网页设计中很实用，能够让页面看起来更加整洁！
你知道吗？块级元素就像玩积木，可以随意调整自己的宽和高、外边距和内边距，这样就能轻松控制元素的大小和位置。这可是网页布局里很流行的小技巧喔！
inline：内联元素
显示为内联的元素就变成了小型团队，不同于大型组织。它们靠得近点，不把整个行都包揽下来，而且也可以和其他小伙伴组队并肩作战。更妙的是，这些小伙伴们懂得调整自己的大小，不会因为别人而突然掉线换行。
那些“啊”“啦”之类的小尾巴，只要让他们显示为内联的样式（display:inline），就可以跟正文放在一块了！
网页上看到导航栏了吗？那些小菜单都是“inline”属性加上其他字堆起来的哟~
聊聊内联元素。这玩意儿不能变大缩小，但能调间距和字体颜色啥的，挺有用的。记住了，千万别想让它变大变小，做不到。想要好看的字排版？就用Inline元素，保准你喜欢！
none：隐藏元素
不想让元素消失？用display:none！这个方法比直接删除好使多了，可以让元素完全看不见。
你知道吗？偷偷放几个DOM节点，然后换下展示方式，比如说隐藏起来或者改个数值，网页就会变得活灵活现！这样既可以调整布局又可以适应各种用户操作，简直太神奇了！
记住，如果你hide某个元素设置为display:none，那么这个东西真的会消失掉，连带着关联的事件监听器都没啥用。想让人跟看不到的东西互动，这玩意儿可真够难受的！
inline-block：内联块级元素
听说过？CSS中有个超赞的命令叫inline-block。这个命令只要一用，就可以让元素占据整个竖线，还能贴紧其他文字！
评论0