谁能帮我解释一下Dreamweaver中的CSS的display属性的none、block、inline等都用在什么场合?

在参考别人写的CSS中看到类似的display=none或者是block,能给我具体说明一下,他们的用途吗?最好举例说明一下。... 在参考别人写的CSS中看到类似的display=none或者是block,能给我具体说明一下,他们的用途吗?最好举例说明一下。 展开
 我来答
百度网友160cd97c4
2013-12-30 · TA获得超过241个赞
知道小有建树答主
回答量:171
采纳率:100%
帮助的人:129万
展开全部

dispaly :none -------隐藏元素

            :block -------块级元素

            :inline -------内联元素

            :inline-block ------- 行内块元素

这几个都是比较常用到的。


        none这个值可以从它了解释来说也不难理解就是隐藏某些东西,比如说Tab切换就会用到这个值如图 第三格的内容显示了 第一、第二内容隐藏,当鼠标经过哪个时哪个就显示 而其中两个就隐藏就是用到这个属性的none值。


        block这个值可以有两种理解:


①上面说到的隐藏,既然说到隐藏那就有显示,所以block可以理解为显示;


②第二种理解重要点——块级元素,所谓块级元素用另一个简单的理解就是在浏览器里面显示整一块,它会随着浏览器的变大而变宽,变小面变窄,在同一级别的不管你在它后面添加再多的内容,也只是会在它的下面显示出来而不绝对不会在同一块内显示,比如说div、p、h1~h6等等标签都是块级元素,

块级元素还有一种特殊的地方就是可以定义height和width,只有该标签为默认的块级元素和被定义了这个属性的block值 才可以定义高和宽。


        inline这个值是内联元素的意思,上面说到是一块一块占满整一行的,那有没有可以在一行内显示多个这样的内容的,答案是有的就是这个值inline;内联元素就是可以在一行内有足够的空间的情况下它都会排成一排,不会换行,比如:a、span、b、em、strong、del、i、img、等等很多标签属于内联元素,

内联元素是不支持定义高和宽的,所以要想定义高和宽的时候,就必须要写dispaly:block只有这样把内联变成块级元素才可以定高和宽。


        inline-block这个值 是行内块元素;上面有说过想定义高和宽就一定要块级元素,想要在排成一排就要内联元素,那我想要排成一排又想定义高和宽的方法有没有,答案是有的,可以用到inline-block这个值 ,这个行内块元素是指这个其实是内联元素但是它具有定义高和宽这两个属性。

这个值唯一一个不足的地方就是IE6不支持这个值,如果是想排成一排又可以定高和宽还有兼容IE6的就要配合到float了


    当你读懂了CSS就什么知道了,display这几个常用的值意思就是这

75384220
推荐于2017-05-16 · TA获得超过546个赞
知道小有建树答主
回答量:705
采纳率:0%
帮助的人:270万
展开全部
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
书香学编程
2020-12-18 · 贡献了超过775个回答
知道答主
回答量:775
采纳率:25%
帮助的人:54.8万
展开全部

Vue实践-CSS样式position/display/float属性对比使用

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式