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 ...
随机推荐
- 【BZOJ1717】产奶的模式(后缀数组)
[BZOJ1717]产奶的模式(后缀数组) 题面 权限题 hihocoder 洛谷 题解 \(hihocoder\)里面讲的非常好了 这题要求的就是最长可重叠重复K次子串 所谓相同的子串 我们可以理解 ...
- 【洛谷2744 】【CJOJ1804】[USACO5.3]量取牛奶Milk Measuring
题面 Description 农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位--译者注) 他的最好的牛奶,并把它装入一个大瓶子中卖出.消费者要多少 ...
- 【BZOJ3223】文艺平衡树(Splay)
题面 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 ...
- CF484E Sign on Fence
题意 给定一个长度为n的数列,有m次询问,询问形如l r k 要你在区间[l,r]内选一个长度为k的区间,求区间最小数的最大值 Sol 二分答案 怎么判定,每种数字开一棵线段树 某个位置上的数大于等于 ...
- MPTCP iperf 发包方式
之前用的发包方式是发送大文件,用NC监测. 今天改了另外一种发包方式iperf,简单记录下. iperf发包,具体方法: 1.在终端中运行拓扑脚本: 运行py脚本:sudo python topy.p ...
- 在 HTML5 中捕获音频和视频
简介 长久以来,音频/视频捕获都是网络开发中的"圣杯".多年来,我们总是依赖于浏览器插件(Flash 或 Silverlight)实现这一点.快来看看吧! 现在轮到 HTML5 大 ...
- java map遍历、排序,根据value获取key
Map 四种遍历: Map<String,String> map = new HashMap<String, String>(); map.put("one" ...
- JavaScript中的execCommand
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用 如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) , ...
- PAT乙级-1036.跟奥巴马一起编程(15)
题解 题解: 注意"行数是列数的50%(四舍五入)" #include<iostream> using namespace std; int main() { int ...
- asp.net中http接口的开发
第一篇博客,如有不足请大家多多谅解. 最近一段时间主导着一个app的开发.所有功能都交给后台接口进行处理.采用http,传输的数据类型为json. http接口是一种基于基于TCP.http服务的ap ...