当前位置:优德中文版 > 外国军情 > 慎用 CSS display 属性

慎用 CSS display 属性

文章作者:外国军情 上传时间:2019-10-09

display:block 会导致换行,原本未留心读过其详细文书档案,今日遇上类似难题分外费了一番武功。
将有毛病的页面代码拷贝如下:

实例

使段落生骑行内框:

p.inline
  {
  display:inline;
  }

持有主流浏览器都扶助 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"。

*<html>
<table width=80>
<tr>
  <td nowrap>
     <font style="display:block">abcdefghigklmnopqrstuvwxyz 1234567890</font>
     <font style="display:block">abcdefghigklmnopqrstuvwxyz 1234567890</font>
  </td>
</tr>
</table>
</html>

概念和用法

display 属性规定成分应该调换的框的体系。

  • 自我并不期待几个font中的字体成为两行。修改时直接考虑改换TD的CSS属性,一贯未见什么遵从。后来察觉是font的style="display:block"。修改后就好了。
    修改后:
    <html>
    <table width=80>
    <tr>
      <td nowrap>
         <font style="display:inline">abcdefghigklmnopqrstuvwxyz 1234567890</font>
         <font style="display:
    inline">abcdefghigklmnopqrstuvwxyz 1234567890</font>
      </td>
    </tr>
    </table>
    </html>

说明

那个个性用于定义组建布局时成分生成的彰显框类型。对于 HTML 等文书档案类型,假设采取 display 不不敢越雷池一步会很惊恐,因为大概违反 HTML 中早已定义的来得档期的顺序结构。对于 XML,由于 XML 未有松手的这种等级次序结构,全部 display 是纯属少不了的。

证明:CSS2 中有值 compact 和 marker,可是鉴于缺乏普遍的支撑,已经从 CSS2.1 中去除了。

默认值: inline
继承性: no
版本: CSS1
JavaScript 语法: object.style.display="inline"

 


或者的值

描述
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 属性的值。

小结:经常非常多个人会由此调用javascript,修改成分的CSS属性:display:block和display:none,来设置其出示和遮盖。一定毫无忽略了display:block会促成换行这一主题素材。

附录:
1,display 全数参数:
display
属性设置是不是及如何体现存分。

继承性:No

说明

其一本性用于定义建立布局时成分生成的显示框类型。对于 HTML 等文书档案类型,假使采纳 display 不谨小慎微会很凶险,因为或许违反 HTML 中已经定义的显得档期的顺序结构。对于 XML,由于 XML 未有内置的这种档案的次序结构,全体 display 是纯属需要的。

表明:CSS2 中有值 compact 和 marker,但是由于贫乏广泛的支撑,已经从 CSS2.1 中去除了。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地退换。

剧本语法:

object.style.display="none"

在大家的 HTML DOM 教程中,您能够找到更加多关于 display 属性 的细节。

在大家的 HTML DOM 教程中,您也能够找到完整的 Style 对象参谋手册。

例子

p
  {
  display: block
  }

li
  {
  display: list-item
  }

table
  {
  display: table
  }

td, th
  {
  display: table-cell
  }

或者的值

描述
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>)

原文:
2 ,display:block 导致的换行

#divHeader #divNav #divLogo{margin-right:5px; width:205px; height:72px; float:left;position:relative;}

#divHeader #divNav #divLogo a:link, a:visited,a:hover,a:active{
width:200px;
height:67px;
text-decoration:none;
display:inline;
float:left;
position:relative;
border:#f00 0px solid;
}

大多数人很轻巧将CSS属性display和visibility混淆,它们看似未有怎么分歧,其实它们的距离却是比不小的。
visibility属性用来规定因素是显得仍旧隐敝,这用visibility="visible|hidden"来表示,visible代表呈现, hidden代表遮掩。当visibility被设置为"hidden"的时候,成分即便被埋伏了,但它照旧占领它原来所在的职位。

表格

明亮表格相关的变现属性值最好的主意想象html表格。table是早先时期的表现,你能够接纳table-row模拟table-cell模拟td。

display属性更上一层楼,能够通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。今后能够直接动用 columns创设表格,比在html中运用行创设急速。

最后,inline-table设定表格前后不换行。

应用CSS表格会严重加害可用性。HTML应该用来传递语意,所以假设你有报表数据,那能够动用HTML表格。使用CSS表格仅仅会发生不佳的数目若无CSS数据将不可读。

display:none和visibility:hidden;的分裂在于display:none完全撤销成分的展现,visibility: hidden保持成分地点但视觉上的内容不可知。比方,如果3的第二段设置为display:none,第一段将仅跟在第三段,假如设置为 visibility:hidden,段落间就能够空出。

inline与bolck的界别在于
display: inline; 在同一行
display:block; 前后换行

在DW中文版中翻译为“定位”,常用的特性有relative(绝对)与 absolute(相对)。

有数不胜数爱人对那条指令的 用法照旧不知情,这里做料定留神的上书:position:relative; 表示相对固化,被固定了那个天性的价签在所属的限定内足以扩充上下左右的移,这里的移动与padding或是margin所发出的岗位变动是区别的。 padding与margin是因素本人的一种边距与填充距离而不是实在的移动,而被定义为relative的要素是的确的活动,那所爆发的位移距离是从 margin的外场到父级标签内侧之间这一段。

position:absolute; 表示相对定位,假若定义了那天天性的因素,其岗位将依靠浏览器左上角的0点开首总结,而且是变化不荒谬成分之上的。那么当您供给某些成分定位在浏览器内容区的某部地方就足以用到那个性格。

那正是说有个难题发出了,未来大家做的网页大多数是居中的,那么本人索要那个元素跟着网页中的有个别成分地点不论分辨率是稍稍他的岗位一直是对准页内的有个别元素的,那么单纯的absolute是特别的。

是的的缓和措施就是在要素的父级成分定义为position:relative;(改良:这里能够是祖父级,也得以是position: absolute;,谢谢谢old9的建议)要求相对定位的因素设为position:absolute;那样再设定top,right,bottom, left的值就可以了,那样其稳定的参谋标准正是父级的左上角padding的左上侧。
原文:

本文由优德中文版发布于外国军情,转载请注明出处:慎用 CSS display 属性

关键词: