您当前的位置:首页 > 建站常识 > css强化

详解css中的display属性

2014-09-14

  在一般的CSS布局制作时候,我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例讲解方法来学习和了解DIV CSS display。fHz七七世界-网站建设|UI设计|人资系统|二次开发

  首先,所有主流浏览器都支持 display 属性。其次,我们都知道display 属性规定元素应该生成的框的类型。默认值:inline.fHz七七世界-网站建设|UI设计|人资系统|二次开发

  我们常用的display属性值有:fHz七七世界-网站建设|UI设计|人资系统|二次开发

  inlinefHz七七世界-网站建设|UI设计|人资系统|二次开发

  blockfHz七七世界-网站建设|UI设计|人资系统|二次开发

  inline-blockfHz七七世界-网站建设|UI设计|人资系统|二次开发

  nonefHz七七世界-网站建设|UI设计|人资系统|二次开发

  把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留。fHz七七世界-网站建设|UI设计|人资系统|二次开发

  那么,display:inline、display:block和display:inline-block有什么区别呢?fHz七七世界-网站建设|UI设计|人资系统|二次开发

     代码如下:fHz七七世界-网站建设|UI设计|人资系统|二次开发
     <style>fHz七七世界-网站建设|UI设计|人资系统|二次开发
     .inline{fHz七七世界-网站建设|UI设计|人资系统|二次开发
     display:inline;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     width:100px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     height:100px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     padding:5px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     background-color:#F00;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     }fHz七七世界-网站建设|UI设计|人资系统|二次开发
     .block{fHz七七世界-网站建设|UI设计|人资系统|二次开发
     display:block;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     width:100px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     height:100px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     padding:5px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     background-color:#0f0;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     }fHz七七世界-网站建设|UI设计|人资系统|二次开发
     .inline-block{fHz七七世界-网站建设|UI设计|人资系统|二次开发
     display:inline-block;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     width:100px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     height:100px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     padding:5px;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     background-color:#00f;fHz七七世界-网站建设|UI设计|人资系统|二次开发
     }fHz七七世界-网站建设|UI设计|人资系统|二次开发
     </style>fHz七七世界-网站建设|UI设计|人资系统|二次开发
     <body>fHz七七世界-网站建设|UI设计|人资系统|二次开发
     <span class="inline">fHz七七世界-网站建设|UI设计|人资系统|二次开发
     inlinefHz七七世界-网站建设|UI设计|人资系统|二次开发
     </span>inlinefHz七七世界-网站建设|UI设计|人资系统|二次开发
     <span class="block">fHz七七世界-网站建设|UI设计|人资系统|二次开发
     blockfHz七七世界-网站建设|UI设计|人资系统|二次开发
     </span> blockfHz七七世界-网站建设|UI设计|人资系统|二次开发
     <span class="inline-block">fHz七七世界-网站建设|UI设计|人资系统|二次开发
     inline-blockfHz七七世界-网站建设|UI设计|人资系统|二次开发
     </span>inline-blockfHz七七世界-网站建设|UI设计|人资系统|二次开发
     </body>fHz七七世界-网站建设|UI设计|人资系统|二次开发

  我们发现内联对象`inline`给它设置属性`height`和`width`是没有用的,致使它变宽变大的fHz七七世界-网站建设|UI设计|人资系统|二次开发

  原因是内部元素的宽高`+padding`。观察inline对象的前后元素我们会发现`inline`不单独占一行,fHz七七世界-网站建设|UI设计|人资系统|二次开发

  其它元素会紧跟其后。fHz七七世界-网站建设|UI设计|人资系统|二次开发

  而块对象`block`是可以设置宽高的,但是它的实际宽高是本身宽高`+padding`。fHz七七世界-网站建设|UI设计|人资系统|二次开发

  观察`block`的前后元素我们会发现`block`要单独占一行。fHz七七世界-网站建设|UI设计|人资系统|二次开发

  然而,当我们即需要div有宽高,又不希望它独占一行怎么办?fHz七七世界-网站建设|UI设计|人资系统|二次开发

  这个时候我们就需要使用`inline-block`了,再观察一下上面的demo,我们会发现`inline-block`fHz七七世界-网站建设|UI设计|人资系统|二次开发

  即具有`block`的宽高特性又具有`inline`的同行元素特性。fHz七七世界-网站建设|UI设计|人资系统|二次开发

  然而,在IE6/7下padding对inline的宽高是对其没影响的。fHz七七世界-网站建设|UI设计|人资系统|二次开发

  那么,display的其他属性值呢?fHz七七世界-网站建设|UI设计|人资系统|二次开发

fHz七七世界-网站建设|UI设计|人资系统|二次开发

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

 fHz七七世界-网站建设|UI设计|人资系统|二次开发

本文关键词:详解css中的display属性  时候  学习  常会  布局  实例  下面  三个  方法  制作  知识  属性  

一切精彩源自七七网络!我们倾力打造时尚潮流第一线!

© 2012-2024七七世界网站建设     20707.net 1125w.com 版权所有     豫ICP备14018694号-1