首页 > web前端 > css教程 > 正文

CSS display (block inline none )常见属性和用法教程

零下一度
发布: 2017-06-06 10:37:54
原创
3094 人浏览过

display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

一. display属性的详细介绍

1.  CSS的Display属性可能的值的说明

下面小编就为大家带来一篇浅谈CSS的Display属性可能的值。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 none 此元素不会被显示。 
block 此元素将显示为块级元素,此元素前后会带有换行符。 

2. 详细介绍CSS中的display属性

所有主流浏览器都支持 display 属性。

注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

3. 详解display和visibility的区别

visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。

vilibility:hidden(隐藏)、visible(显示) style="vislbility:hidden"

display:none(隐藏)、block(显示) style="display:none"

4. css中(display,float,position)的深入理解

display 用来设置元素的显示方式

display : block | none | inline 

inline:指定对象为内联元素

block:指定对象为块元素

none:隐藏对象

二. displayblock属性的详细介绍

1.  在chrome下不能显示displayblock或者inlineblock的元素怎么办?

在chrome下不能正常显示一个display: inline-block或者display: block的元素怎么办 
DEMO页面只有一个输入框,当输入框有焦点时高度变大,并且显示 字数显示和回复按钮。 
现在问题是,chrome只能在第一次刷新之后点击输入框然后高度变大并显示 字数显示和回复按钮的元素,但是再点击第二次输入框就只有高度变大,却没有看到字数显示和回复按钮的元素了(firefox正常) 

2. 如何制作div的显示与隐藏

display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:
none 隐藏元素,不保留元素显示时的空间。
block块方式显示元素。
inline 以内嵌方式显示元素。

3. li inside-block在IE11换行无效的原因

1495356769316498.gif

近日在做一个网页标签列表,要求不能换行,一开始以为比较容易,三两下就把代码写完了,并且在Firefox和Chrome浏览器测试通过,不过,在IE11一看,却出人意料的没有达到预期效果,li inside-block 在IE11里竟然无效!照样换行!

三. display:inline属性的详细介绍

1. 详解CSS中的display:flex||inline-flex属性

1befcd841a661f327a5bbc52f40b7410-0.png

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

flex: 将对象作为弹性伸缩盒显示

inline-flex:将对象作为内联块级弹性伸缩盒显示

2. 如何在css布局中解决display:inline-block产生间隙的方法详解

7eb7aeb071777651136e466d9f153375-0.jpg

7b06da7d3f8ac81a5e6d9d2739b70f13-1.jpg

在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固定,需要实时设置其父元素的宽度,就要用到js,所以代码量增加了,也不是最好的选择。看来最好的解决办法就是用到display:inline-block;了,于是缝隙的问题就出现了

四. display:none属性的详细介绍

1. display:none与visibility:hidden之间有哪些区别

我当时回答的是,二者均能实现隐藏元素,但是将元素设置为display:none;之后,会同时取消该元素之前占据的文档流空间,但是visibility:hidden;使得该元素即使不显示,但是依旧会占据空间。
当时是电话面试,我回答了之后,对方也没有再继续问与display相关的知识。
现在想起来,真的是庆幸,如果人家问我与display相关的知识,display:inline-block使用时需要注意的地方。我肯定也打不上来。

2. CSS隐藏页面元素的5种方法说明

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。

你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点,让你根据不同情况选择上面这些方法中适合的方法来隐藏元素

3. 用css3显示隐藏div的实例教程

显示隐藏一个p特效的方法有很多,下为大家介绍下使用纯css3是如何实现的,感兴趣的朋友可以参考下

五. 相关问答

1. a{display:block;}与JS中的display有什么区别么?

2. li和ul是否都需要display:inline?

3. css - flex布局,display:flex,与display:-webkit-box差异的问题

【相关推荐】

1. 详解CSS BOX类型和display属性

2. 详解CSS3的display:box盒子模型属性

3. 布局display

以上是CSS display (block inline none )常见属性和用法教程的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!