CSS display属性学习
---恢复内容开始---
http://www.w3school.com.cn/cssref/pr_class_display.asp
所有主流浏览器都支持 display 属性，如IE，Firefox，Chrome，Safari，Opera；
如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
display 属性规定元素应该生成的框的类型。
css语法 display:value;
js语法 Object.style.display=value；
可能的值
部分属性详解：
1. block
特点：1）独占一行；
2）元素的高度，宽度，行高以及顶和底边距均可设置；
3）不设置宽度时，宽度撑满一行；
块级元素有：<div> , <p> , <h1> .. <h6> , <ol> , <ul> , <dl> , <table> , <address> , <blockquote> , <form> , <article> , <header> , <footer> , <nav> , <section> , <html> , <body> 等；
不支持样式：vertical-align；
2. inline
特点：1）和其他元素在一行；
2）内容撑开宽度，即元素的宽度就是它包含的文字或图片的宽度，不可改变；
3）宽高不可设置；
4）代码换行被解析成空格；
内联元素有：<a> , <span> , <br> , <i> , <em> , <strong> , <label> , <q> , <var> , <cite> , <code> , <area> , <del> , <label> , <map> , <mark> , <output> , <pre> 等；
不支持样式：background-position ；clear ；clip ；height | max-height | min-height ；width | max-width | min-width ；overflow ；text-align ；text-indent ；text-overflow；
3. inline-block
特点：1）不设置宽高时，内容撑开高度；
2）非独占一行；
3）可设置宽高；
4）代码换行被解析成空格；
标签：<audio> ，<button>，<canvas>，<embed>，<iframe>，<img>，<input>，<keygen>，<meter>，<object>，<progress>，<select>，<textarea>，<video>
不支持样式：clear ;
4. none
特点：隐藏元素并脱离文档流；
标签：<base>，<link>，<meta>，<title>，<datalist>，<dialog>，<param>，<script>，<source>，<style>
5. list-item
特点：1）不设宽度时，宽度撑满一行；
2）独占一行；
3）可设置宽高；
6. table
特点：1）不设置宽度时，宽度由内容撑开；
2）非独占一行；
3）支持宽高；
4）默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性；
7. table-cell
特点：1）不设置宽度时，宽度由内容撑开；
2）非独占一行；
3）支持宽高；
4）垂直对齐；
5）同级等高；
---恢复内容结束---
CSS display属性学习的更多相关文章
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- CSS display 属性
实例 使段落生出行内框: p.inline { display:inline; } 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explor ...
- CSS display属性的值及作用
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...
- CSS Display属性与盒模型
由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...
- Display属性学习总结
HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...
- css display属性
C:内联元素加上display:block后被块级化.块级元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块级元素排斥其他元素与其位于同一行,width和height起作用.因此,可以定义其宽 ...
- CSS display 属性详解
定义display 属性设置是否及如何显示元素. 继承性: No 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不 谨慎会很危险,因为可能 ...
- CSS 3 属性学习 —— 2. RGBA
RGBA 是 CSS3 中用来控制颜色的单位,分别是 Red Green Blue 三原色和 Alpha 透明度的缩写. 也就是说该属性可以帮助我们在设置颜色的同时,也设置了其透明度. 其实就是 RG ...
- CSS 3 属性学习 —— 1. Gradient 渐变
CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数: <linear-gradient> = li ...
随机推荐
- 一天一个算法：C语言解答杨辉三角
杨辉三角形是形如:11 11 2 11 3 3 11 4 6 4 1的三角形,其实质是二项式(a+b)的n次方展开后各项的系数排成的三角形,它的特点是左右两边全 ...
- Linux mount挂载umount卸载
mount/umount挂载/卸载 对于Linux用户来讲,不论有几个分区,分别分给哪一个目录使用,它总归就是一个根目录.一个独立且唯一的文件结构 Linux中每个分区都是用来组成整个文件系统的一部分 ...
- Dos.ORM使用教程
Dos.C#.Net使用 Dos.ORM(原Hxj.Data)于2009年发布,并发布实体生成工具.在开发过程参考了多个ORM框架,特别是NBear,MySoft.EF.Dapper等.吸取了他们的一 ...
- sql 查询所有数据库-表-表结构
--查询数据库中的所有数据库名: SELECT * FROM Master..SysDatabases ORDER BY Name --查询某个数据库中所有的表名: select * from sys ...
- JavaScript 基础 if switch 弹窗 运算符
脚本语言最重要的几个部分: 数据类型 运算符 控制语句 数组 方法(函数) 一.基础知识 关键字:系统定义 有意义的名字如 background link 等 标识符:自己定 比如class的名字a ...
- POJ 3264 Balanced Lineup【线段树】
题意:给出n个数,a1,a2,a3,---,an,再给出q次询问区间al到ar之间的最大值和最小值的差 学习线段树的第一道题目 学习的这一篇 http://www.cnblogs.com/kuangb ...
- 3ds Max制作客厅场景实例教程
附件系列 (图01) 让我们回顾一下场景:一个房间包括下列一件件家具, 在中间的一张小桌子,在房间的角落的一个小桌子,有一个垃圾桶和一个带镜子的边桌,有一个烛台.还有一个挂钟,窗帘,沙发和带手臂的椅子 ...
- （2016北京集训十）【xsy1528】azelso - 概率期望dp
北京集训的题都是好题啊~~(于是我爆0了) 注意到一个重要的性质就是期望是线性的,也就是说每一段的期望步数可以直接加起来,那么dp求出每一段的期望就行了... 设$f_i$表示从$i$出发不回到$i$ ...
- Maven copy方式列举
maven copy有很多种方法: 1.maven-antrun-plugin (使用ant复制) <build> <finalName>flex</finalName& ...
- python list set dict的简单应用示例
list.count(x):返回指定元素x在列表中出现的次数 set(list):将list类型变量转换为set类型,去除重复值 dick:保存键值对 x=[1,2,2,3,3] s1=set(x) ...