`
lzj0470
  • 浏览: 1276688 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS display 属性

    博客分类:
  • css
CSS 
阅读更多
display在CSS中是一个重要的属性。作用是规定元素应该生成的框的类型。
我们知道框类型分两类:
一类是块级框(block),此元素前后带有换行符,如<div>,<p>;
一类是行级框(inline),此元素前后没有换行符,如<span>
利用display可以使转换框类型,也就是说让block转换为inline,inline转换为block。
1.   display值

描述

none
此元素不会被显示。

block
此元素将显示为块级元素,此元素前后会带有换行符。

inline
默认。此元素会被显示为内联元素,元素前后没有换行符。
2.    例子
2.1      段落元素设置为内联元素:
<html>

<head>

<style type="text/css">

p {display: inline}

div {display: none}

</style>

</head>

<body>

<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来!</p>

<div>div 元素的内容不会显示出来!</div>

</body>

</html>
2.1 段落元素设置为内联元素:
<html>

<head>

<style type="text/css">

span

{

display: block

}

</style>

</head>


<body>

<span>本例中的样式表把span 元素设置为块级元素。</span>

<span>两个span 元素之间产生了一个换行行为。</span>

</body>

</html>

分享到:
评论
2 楼 lzj0470 2013-02-18  
  
1 楼 jj871231 2013-02-06  
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

相关推荐

    CSS display属性的table表格布局

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

    HTML之CSS 布局 - display 属性

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

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

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

    css收缩功能

    1. **CSS Display 属性**:CSS中的`display`属性是控制元素收缩与展开的关键。`none`值可以隐藏元素,使其不占用任何空间;而`block`或`inline`则可以使元素显示出来。通过改变这个属性,可以实现元素的显示与隐藏,...

    CSS常用属性列表

    本文将深入探讨CSS的常用属性,帮助您更好地理解和掌握这一核心技能。 1. **选择器**:CSS的选择器是用于匹配HTML元素的方式,如`class`、`id`、`tag name`等。例如,`.myClass`代表具有特定类名的元素,`#myID`...

    display属性.doc

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

    Css所有属性

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

    display属性练习.zip

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

    display属性介绍和使用

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

    css属性查询手册

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

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

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

    详解css中的display属性

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

    CSS中如何把Span标签设置为固定宽度.docx

    要将`&lt;span&gt;`标签设置为固定宽度,可以将其CSS display属性更改为“inline-block”或“block”。下面是具体的CSS代码示例: ```css span { display: inline-block; width: 100px; /* 设置你想要的固定宽度 */ } `...

    CSS之display引用运用

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

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

    在本案例中,我们重点探讨的是CSS中的`display`属性,它用于控制XML元素在页面上的呈现方式。这个属性对于理解和优化XML文档的视觉效果至关重要。 首先,我们需要了解`display`属性的基本用法。`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文档通常用于存储结构化的数据,如电影信息,而CSS则负责定义这些数据的视觉样式。 XML文档结构如下: ```xml &lt;!-- 电影详细...

Global site tag (gtag.js) - Google Analytics