在一般的CSS布局制作时候,我们常常会用到display对应值有block、none、inline这三个值。,display这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的,要了解display之前,来了解一些块级元素和内联元素。

  1、块级元素

  ①总是在新行上开始(块元素独占一行);

  ②高度,行高以及外边距和内边距都可控制;

  ③宽度缺省是它的容器的100%,除非设定一个宽度。

  ④它可以容纳内联元素和其他块元素

  比如:p、div、h1、ul等。

  1、内联元素

  ①和其他元素都在一行上;

  ②高,行高及外边距和内边距不可改变;

  ③宽度就是它的文字或图片的宽度,不可改变

  ④内联元素只能容纳文本或者其他内联元素

  比如:a、em、img、span等。

  而display就是改变这些元素的固有属性,规定元素应该生成的类型,以达到自己布局网站的效果。 经常用到有下面四个:

  none 此元素不会被显示

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

  inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

  inline-block 行内块元素。

  当然还有很多属性,一般比较少用,主要有以下方面:

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

  display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

display的属性的更多相关文章

  1. display:table- cell属性的练习

    display:table- cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说 sorry了,这一事实也是大大制 ...

  2. IE6/IE7不识别display:inline-block属性怎么办

    ie6,ie7的haslayout属性是个让人头疼的问题.在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行.还有一种方法就是设置li为display: ...

  3. <display:table>属性解释

    参考官方网站:http://www.displaytag.org/1.2/displaytag/tagreference.html 所有属性: cellpadding,cellspacing,clas ...

  4. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  5. display的属性值测试

    由于在学习CSS的display的属性值只针对block.inline.inline-block和flex进行过了解,并且自己观察得知列表中li的display属性是list-item,而想要触发BF ...

  6. display:box属性

    在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性 flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代dis ...

  7. 用jquery的.val() 给具有style="display:none;" 属性的标签写值的问题。

    今天写项目, 碰到奇怪现象, 用jquery的val()函数怎么都无法给标签赋值,而我确定是否赋值是通过浏览器控制台来看的.其实这种方式不准确,因为具有 style="display:non ...

  8. css的尺寸、display的属性、以及浮动和清除浮动的方法

    css的尺寸width heightline-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height ...

  9. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

随机推荐

  1. openresty开发系列13--lua基础语法2常用数据类型介绍

    openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...

  2. shell编程系列16--文本处理三剑客之awk模式匹配的两种方法

    shell编程系列16--文本处理三剑客之awk模式匹配的两种方法 awk的工作模式 第一种模式匹配:RegExp 第二种模式匹配:关系运算匹配 用法格式对照表 语法格式 含义 RegExp 按正则表 ...

  3. linux非root用户安装ncurses-devel依赖

    很明显,如果我们通过yum或rpm下载安装,始终无法绕开root用户,除非我们不用yum或rpm.嗯,我们直接用源码安装.下载源码包,到http://ftp.gnu.org/gnu/ncurses/我 ...

  4. 基于Broadcast 状态的Flink Etl Demo

    接上文: [翻译]The Broadcast State Pattern(广播状态) 最近尝试了一下Flink 的 Broadcase 功能,在Etl,流表关联场景非常适用:一个流数据量大,一个流数据 ...

  5. CSS控制元素背景透明度总结

    方法一:CSS3的background rgba filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColor ...

  6. web端自动化——unittest框架编写web测试用例

    1.前言: 对于初学者来说,python自带的IDLE,精简又方便,不过一个好的编辑器能让python编码变得更方便,更加优美些. 不过呢,也可以自己去下载其他更好用的代码编辑器,在这推荐: PyCh ...

  7. 异步I/O、事件驱动、单线程

    异步I/O.事件驱动.单线程 nodejs的特点总共有以下几点 异步I/O(非阻塞I/O) 事件驱动 单线程 擅长I/O密集型,不擅长CPU密集型 高并发 下面是一道很经典的面试题,描述了node的整 ...

  8. 十篇TED点击率最高演讲,带你重新认识大数据与人工智能

    我们通常过于专注于机器学习算法的实现,倾向于忽略这种技术本身的一些重要问题:如未来的应用和政治后果.在这篇文章中,我们从非常受欢迎的非营利组织TED上收集了一系列的视频(并非关注于选择什么语言或算法来 ...

  9. SpringBoot RequestBody ajax提交对象

    前端实现: var student = { "name":1, "age":2, "score":3 }; $.ajax({ url:&qu ...

  10. mysql大小写敏感配置

    mysql大小写敏感配置show global variables like '%lower_case%'; show global variables like '%lower_case%'; &l ...