css中display属性的用法示例

小编给大家分享一下css中display属性的用法示例,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联企业建站,十年网站建设经验,专注于网站建设技术,精于网页设计,有多年建站和网站代运营经验,设计师为客户打造网络企业风格,提供周到的建站售前咨询和贴心的售后服务。对于成都网站设计、做网站中不同领域进行深入了解和探索,创新互联在网站建设中充分了解客户行业的需求,以灵动的思维在网页中充分展现,通过对客户行业精准市场调研,为客户提供的解决方案。

    css定位属性Positioning

    display:none

    不再页面渲染元素

   

   

   

   

   

   

    css-test

   

   

   

   

这一段落不会被显示出来

   

这个段落会被显示出来

   

当一个元素中的display属性是none时,浏览器不会渲染这个元素里的任何内容,不会占据浏览器窗口空间,但它存在与文档流当中。

   

   

    display:block

    块级元素

   

   

   

   

   

   

    css-test

   

   

   

   

p元素默认是block块级元素

   

div默认也是block块级元素

   

块级元素的特点:元素的内容会充满整行

   

   

    display:inline

    行内元素

   

   

   

   

   

   

    css-test

   

   

   

   

display属性为inline的元素被称为内连元素。

   

相邻元素也是inline属性时,如果内容不够撑开整行。相邻元素的内容会显示在它傍边,当窗口整行不够显示时,内容会换行显示。

   

   

    display:inline-block

    行内块级元素

   

   

   

   

   

   

    css-test

   

   

   

   

display属性为inline-block的元素被称为行内块级元素。

   

行内块级元素的特性是独占一行,内容不会撑开整行

   

   

    display:list-item

    列表属性

   

   

   

   

   

   

    css-test

   

   

   

   

display属性为list-item时元素会作为列表显示

   

下班要买菜

   

回家要做饭

   

   

    display:inherit

    继承父级元素的属性

   

   

   

   

   

   

    css-test

   

   

   

   

    正常的span元素效果,内容不会撑开整行

    继承父级属性的效果,父级的display属性值是block继承后内容撑开整行

   

   

   


css中display属性的用法示例css中display属性的用法示例

看完了这篇文章,相信你对“css中display属性的用法示例”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


新闻标题:css中display属性的用法示例
本文链接:http://myzitong.com/article/joidic.html