`
Virgo_S
  • 浏览: 1153950 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

12、CSS的display属性

    博客分类:
  • CSS
阅读更多
  操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成,本质上是显示类型。

  display属性基本上分为inline,block,和none。
  inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
  block元素前后换行。标题和段落元素是块元素。
  none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。

  设定表现可以更好运用在网页制作上。
h1 {
    display: inline;
    font-size: 2em;
}
#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

  设定标题h1为行元素,可以和后面的元素在同一行。
#navigation, #seeAlso, #comments, #standards {
    display: none;
}

  上面的代码可以使用在打印样式里,比如在导航使用,可以在打印时不显示导航这些无关紧要的东西。

  display:none和 visibility:hidden;的不同在于display:none完全取消元素的显示,visibility:hidden保持元素位置但视觉上的内容不可见。例如,如果3的第二段设置为display:none,第一段将仅跟在第三段,如果设置为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数据将不可读。

其他表现形式

  list-item列表项目,就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
  run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
  compat根据上下阿文决定表现形式,同样IE和Mozilla都不支持。
  maker仅仅使用在:before和:after伪元素,设定content属性的表现。content属性默认表现就是maker,所以它只有在覆盖原来属性时才有用。
  content属性,它的默认就是maker,所以只有在覆盖原来属性时使用。








分享到:
评论

相关推荐

    CSS display属性的table表格布局

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格...一、CSS display属性的表格布局相关属性的解释: table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。table-row-group 此元素会作为一个或多个

    HTML之CSS 布局 - display 属性

    `display` 属性是CSS中不可或缺的一部分,它对网页布局起着至关重要的作用。通过`display`属性,我们可以控制HTML元素的显示方式,从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其...

    CSS常用属性列表

    12. **响应式设计**:`@media`查询允许根据设备特性应用不同的CSS规则,实现响应式网页。 13. **Flexbox布局**:`display: flex`开启弹性布局,通过`flex-direction`、`justify-content`、`align-items`等属性实现...

    display属性.doc

    ### Display属性详解 #### 一、概述 `display` 属性是CSS中非常重要的一个属性,用于控制元素的呈现方式,决定了元素如何显示以及与其他元素的关系。它影响着页面布局和元素之间的相互作用。 #### 二、兼容性与...

    Css所有属性

    4. **布局属性**:`display`控制元素的显示方式,如块级、行内或Flexbox。`position`(静态、相对、绝对、固定)决定元素的位置,`float`用于浮动元素。 5. **文本属性**:`text-align`对齐文本,`text-decoration`...

    display属性练习.zip

    在给定的“display属性练习.zip”压缩包中,我们可以找到一个针对`display`属性,特别是关于`flex`(弹性布局)的实践教程。这个练习项目旨在帮助开发者更深入地理解并熟练掌握`flex`布局的各种用法。 `display: ...

    css属性查询手册

    1. 流动布局:CSS 2.0中的流体布局依赖于`display`属性,如`block`和`inline`,以及`width`和`height`来创建多列或多行布局。 2. 表格布局:`table`、`table-cell`等值可以将元素呈现为表格形式,便于对齐和布局。 ...

    display属性介绍和使用

    Display 属性是 CSS 中一个非常重要的属性,它用于设置元素的显示类型,控制元素是否被视为块元素或内联元素,并影响子元素的布局。下面是 Display 属性的详细介绍和使用方法。 Display 属性的作用 Display 属性的...

    别具光芒——CSS属性、浏览器兼容与网页布局

    例如,`color`属性用于设置文本颜色,`font-family`定义字体类型,`padding`和`margin`调整元素内外边距,`border`定义边框样式,`background-color`设置背景色,`display`控制元素的显示方式(如块级、行内或...

    CSS之display引用运用

    #### 一、display属性概述 在CSS中,`display`属性用于定义元素的类型以及该元素如何在其父容器中呈现。不同的`display`值会影响元素的盒模型、布局和定位方式等。 #### 二、display:inline-block详解 `display:...

    常用的CSS属性大全

    除了上述内容,CSS还有许多其他属性,如布局属性(如`margin`、`padding`、`border`等)、盒模型属性(`box-sizing`、`display`等)、定位属性(`position`、`z-index`等)、背景属性(`background-color`、`...

    XML应用开发(软件品牌)-1期 4.3 案例分析-使用CSS文本属性显示XML文档-显示属性display.doc

    在本案例中,我们重点探讨的是CSS中的`display`属性,它用于控制XML元素在页面上的呈现方式。这个属性对于理解和优化XML文档的视觉效果至关重要。 首先,我们需要了解`display`属性的基本用法。`display`属性主要有...

    CSS:Visibility 和 Display 属性的比较.pdf

    在CSS中,`visibility`和`display`两个属性都是用于控制HTML元素的可见性,但它们之间存在显著的差异。`visibility`属性主要控制元素是否可见,而`display`属性则涉及元素在页面布局中的存在与否。 `visibility`...

    XML应用开发(软件品牌)-1期 4.3 课堂实践-使用CSS文本属性显示XML文档-显示属性display.doc

    在本案例中,我们将探讨如何使用CSS的`display`属性来呈现XML文档中的数据。XML文档通常用于存储结构化的数据,如电影信息,而CSS则负责定义这些数据的视觉样式。 XML文档结构如下: ```xml <!-- 电影详细...

    css常用属性

    以下是对CSS常用属性的详细说明: 1. **CSS基本语法**: - 语句基本结构:CSS规则由一个选择器和一组属性声明组成,形如`HTML选择器 {属性1:值1; 属性2:值2; ...}`。 - 类和ID选择器:`.classname`用于选择具有...

    详解css中的display属性

    CSS中的`display`属性是一个非常重要的样式属性,用于定义元素的布局方式。它规定了元素应该生成的框的类型,从而影响元素的显示效果和周围的元素如何排列。在CSS布局中,`display`属性通常与`block`、`none`、`...

    浅谈CSS3中display属性的Flex布局的方法

    最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果...

    CSS:Visibility和Display属性的比较.pdf

    在CSS中,`visibility`和`display`两个属性都是用于控制HTML元素的可见性,但它们之间有着显著的差异。了解这些差异对于精确地管理页面布局和交互至关重要。 首先,`visibility`属性主要用来切换元素的可见状态。它...

    CSS属性大全截图pdf

    根据提供的文件信息“CSS属性大全截图pdf”,我们可以推断出这份文档主要涵盖了CSS(层叠样式表)的各种属性。CSS是一种用于定义HTML或XML文档中元素的呈现方式的语言,它被广泛应用于网页设计中,用来控制页面布局...

Global site tag (gtag.js) - Google Analytics