十三 The Display Property,display属性

操作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:nonevisibility: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元素。它们需要嵌套在

  1. 元素里面显示。

run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。

compat根据上下阿文决定表现形式,同样IE和Mozilla都不支持。

maker仅仅使用在:before:after伪元素,设定content属性的表现。content属性默认表现就是maker,所以它只有在覆盖原来属性时才有用。

content属性,它的默认就是maker,所以只有在覆盖原来属性时使用。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索表格
, display
, 样式
, inline
, 属性
元素
spring property属性、property 属性、meta property属性、property ref属性、mybatis property属性,以便于您获取更多的相关知识。

时间: 2024-08-30 14:56:53

十三 The Display Property,display属性的相关文章

以下代码的display和EnableClientScript属性各代表什么含义啊

问题描述 <asp:RequiredFieldValidatorID="StateReqValidator"ControlToValidate="StateTextBox"ErrorMessage="<br/>Pleaseenterastate."Display="Dynamic"EnableClientScript="False"runat="server"/>

Silverlight:Dependency Property(依赖属性)学习笔记

1.定义依赖属性:           #region Text        public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ImageButton), new PropertyMetadata(default(string), new PropertyChangedCallback(TextPrope

WPF and Silverlight学习笔记(十三):依赖项属性和路由事件

一.依赖项属性(Dependency Property) Windows Presentation Foundation (WPF) 提供了一组服务,这些服务可用于扩展公共语言运行时 (CLR) 属性的功能.这些服务通常统称为 WPF 属性系统.由 WPF 属性系统支持 的属性称为依赖项属性.本概述介绍 WPF 属性系统以及依赖项属性的功能,这 包括如何在可扩展应用程序标记语言 (XAML) 中和代码中使用现有的依赖项属性 . 依赖项属性的用途在于提供一种方法来基于其他输入的值计算属性值 .这些

property rid-propertyGrid 属性排序

问题描述 propertyGrid 属性排序 propertyGrid 属性排序如何不为按照字母排序,就按照我自己写的排序呢? CProperty spT0 = new CProperty("环境温度(K)", 298); spT0.Category = "环境"; CProperty spP0 = new CProperty("环境压力(Pa)", 100000); spP0.Category = "环境"; CProper

学习CSS教程:学习CSS网页布局

文章简介:你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则,在工作的时候,你依然陷入迷惘的泥潭中苦苦挣扎. 这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础. 你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则

js将控件隐藏及display属性的使用介绍

 用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性,下面详细为大家介绍下具体的使用 用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性.当style.display="block"或style.visibility="visible"时控件

js将控件隐藏及display属性的使用介绍_javascript技巧

用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性.当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"

关于display: box 和 box-flex

这两天做手机项目,使用到这个css3新属性.现在还不为所有浏览器支持,所以使用的时候要加上前缀.使用方法见下面: html代码: <div class="s-indLine">             <div class="s-indNav s-indIntro">                 <span class="s-icon"></span>                 <p

使用SWT中Display的Post方法控制键盘

最近在实现一个图片压缩的功能,想在Eclipse.org上看有没有办法能够通过SWT的API能 够改变图片的分辨率,Eclipse.org上面提供了好些SWT的例子,发现了Display的post方法挺 有趣的,以前没有注意到,现在赶快把它记录下来,post方法的参数为Event,通过制定这个 Events的属性,可以控制系统的键盘事件,比如保持shift键一直按着.下面是代码: 1 import org.eclipse.swt.*; 2 import org.eclipse.swt.widge