新手来简单学习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,所以只有在覆盖原来属性时使用。

时间: 2024-08-24 20:04:05

新手来简单学习CSS的display属性的相关文章

简单学习CSS实现网页布局的基础知识

css|网页 使用CSS布局非常简单,如果你习惯使用tables布局,可能开始时有点困难,但其实很容易,事实上只是观念的不同. 你需要把网页的每个部分看成独立的块,你可以绝对或相对定位块. Positioning 定位 positon属性可以指定元素为absolute,relative,static或是fixed. static是元素默认属性,按HTML出现的先后顺序. relative比较像static,但元素可以使用top,right,bottom和left设定初始属性. absolute把

简单学习CSS的优势、规则、形式和应用范围

css Cascading Style Sheets(简称CSS),翻译为"层叠样式单"或"级联样式单",又简称"样式表". CSS的引入是用来扩展HTML的,而不是用来替代HTML的.也就是说CSS离不开HTML,它只是一项辅助工具,是对HTML功能的一种补充. CSS的优势 在CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小.颜色等:更加入了重叠文字.区块变化及任意位置放置等多项新属性.通过CSS可以使用更丰富.更灵活的样式,更简

css display属性值求解

问题描述 css display属性值求解 display属性值求解 run-in:根据上下文决定对象是内联对象还是块级对象.(CSS3) box:将对象作为弹性伸缩盒显示.(伸缩盒最老版本)(CSS3) inline-box:将对象作为内联块级弹性伸缩盒显示.(伸缩盒最老版本)(CSS3) flexbox:将对象作为弹性伸缩盒显示.(伸缩盒过渡版本)(CSS3) inline-flexbox:将对象作为内联块级弹性伸缩盒显示.(伸缩盒过渡版本)(CSS3) flex:将对象作为弹性伸缩盒显示.

详细学习CSS的Margin和Padding属性

css margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. 例子h2: h2 {    font-size: 1.5em;    background-color: #ccc;    margin: 1em;    padding: 3em;} 元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding

入门:新手学习CSS样式表基础知识

css|样式表 关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html). 2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Dreamweaver8在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的CSS手册,你就可以轻松自如的在网页中运用

初学入门简单了解学习CSS的伪类

类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value].此时.value只能严格的应用于HTML中的class属性,所以此类选择符叫类选择符.在CSS中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构.例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它.所以,CSS引进了伪类(pseu

CSS中display:inline-block属性妙用

  CSS中display:inline-block属性用法 在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊. display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 但对于这个属性不是所有浏览器都识别. 支持的浏览器有:Opera.Safari 但很遗憾,最流行的IE和Firefox却不支持

css中visibility与display属性区别比较

浏览器支持 所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 internet explorer (包括 ie8)都不支持 "inherit" 和 "collaps教程e" 属性值. 所有主流浏览器都支持 display 属性. 注释:任何版本的 internet explorer (包括 ie8)都不支持 "inherit"."inline-table"."run-in"."

学习CSS的背景图像属性background

CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看background提供的属性值: background : background-color  | background-image  | background-repeat  | background-attachment  | background-position 从属性值的名字就可以很明白的看出来,分别是:颜色.图像.铺排.滚动.定位,其中backgrou