display属性
display 属性规定元素应该生成的框的类型。
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
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的默认值是inline;如果规定了 !DOCTYPE,则 IE8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
inline-block和inline是有区别的,前者仍属于block,所以有高宽的属性,而后者没有。
display:list-item;表示此元素会作为列表显示。
<p style="display:list-item;list-style:inside square;">这是display:list-item属性</p> |
效果: · 这是display:list-item属性(由于浏览器不支持粘贴图片,这个效果左边的点是我手动敲上去的=-=)
display:list-item;可与list-style-type属性共同使用,效果和列表标签一样。
由于其他元素暂未使用,等使用了再说。
display属性的更多相关文章
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- 深入理解和应用display属性(二)
四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- 深入理解display属性
display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 di ...
- Code笔记之:CSS+HTML display 属性
display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- CSS display 属性
实例 使段落生出行内框: p.inline { display:inline; } 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explor ...
- 对CSS进行wxss思路学习,display属性。
先来概要一下学习思路: 本系列内容,将针对微信小程序中的WXSS学习,所以在学习CSS时每一个知识点都在小程序IDE中进行实践,达到最好的学习效果. 由于wxss与CSS有些许不同,在学习CSS过程中 ...
- 转: 详解css中的display属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...
- CSS visibility与display 属性
所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...
随机推荐
- 【BZOJ2816】【ZJOI2012】网络(Link-Cut Tree)
[BZOJ2816][ZJOI2012]网络(Link-Cut Tree) 题面 题目描述 有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相 ...
- Oracle-数据类型为date 日期查询技巧
date类型是oracle中存储日期类的一种常用类型,其处理也是在数据库使用中比较多需要注意的地方.如我们可以使用to_char函数将其转化为任意时间格式的字符串,也可使用to_date函数转化相应的 ...
- C#多线程编程(7)--锁
一提到线程同步,就会提到锁,作为线程同步的手段之一,锁总是饱受质疑.一方面锁的使用很简单,只要在代码不想被重入的地方(多个线程同时执行的地方)加上锁,就可以保证无论何时,该段代码最多有一个线程在执行: ...
- JS如何判断滚动条是否滚到底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...
- null和undefined的异同
相同点: 都表示值得空缺,二者往往可以互换,用“==”相等运算符判断两个是相等的,要用“===”判断. 在希望值是布尔类型的地方,他们的值都是假值,和“false”类似. 都不包含属性和方法. 使用& ...
- centos上的grub文件修改
centos上的grub文件修改 author:headsen chen 2017-10-10 17:36:42 个人原创,转载请注明作者和出处,否则追究法律责任 1,centos6上的修改:vim ...
- Angular.js学习范例及笔记
一.AngularJs 1.row in order.rows <ng-bind="row.name"> 2.ng-form <form action=" ...
- Quikapp快应用开发入门
快应诞生背景 微信的小程序使得很多原来需要调动APP的场景不复存在,正式由于微信小程序的冲击,3月20日,华为联手九大手机厂商,共同举办了“快应用”标准启动发布会.“快应用”是几家手机厂商基于硬件平台 ...
- ASP.NET Core 2.0 : 八.图说管道
本文通过一张GIF动图来继续聊一下ASP.NET Core的请求处理管道,从管道的配置.构建以及请求处理流程等方面做一下详细的研究.(ASP.NET Core系列目录) 一.概述 上文说到,请求是经过 ...
- centos下mongodb备份(dump)与还原(restore)
数据服务器,数据库采用mongodb数据库 安装:通过增加配置安装mongodb-org,版本为3.0.7,yum安装 yum install mongodb-org 数据备份与 ...