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 ...
随机推荐
- CAS算法
/** * CAS(Compare-And-Swap)算法保证了数据的原子性 * CAS算法是硬件对于并发操作共享数据的支持 * CAS包含了3个操作数: * 内存值 V 看成两步 读取内存值为1步 ...
- 判断一个整数是否是回文数C++实现 leetcode系列（九）
判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...
- @Query Annotation in Spring Data JPA--转
原文地址:http://javabeat.net/spring-data-jpa-query/ In my previous post on Spring Data, I have explained ...
- SSIS获取Oracle数据库数据
获取Oracle数据库步骤如下: 1.目标服务器获取连接Oracle数据库权限2.安装Oracle客户端,名称为win32_11gR2_client 安装管理员版本的.3.将配置文件tnsnames. ...
- jqGrid多级表格的实现
原博主链接:http://blog.csdn.net/dreamstar613/article/details/54616503 jqGrid多级表格(可N级) 主要用的方法: subGridRowE ...
- activity(工作流）初步学习记录
1.概念 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现某个预期 ...
- .startsWith和endsWith的使用方法与说明
a.startsWith(b) --判断字符串a,是不是以字符串b开头 a.endsWith(b) --判断字符串a,是不是以字符串b结尾
- CentOS 6.9 CentOS 7.4 自动安装系统 kickstart
通过ks文件 实现 CentOS 6.9 & 7.4 自动安装系统 环境: VMware 14.0 Pro版 光盘镜像: CentOS-6.9-x86_64-minimal.iso ks文件生 ...
- Python2x,3x源码的区别,编译型解释型,变量,注释,if,用户交互input,基本数据类型3种
cpu 内存 硬盘 操作系统 cpu: 计算机的运算和计算中心,相当于人类的大脑. 内存:暂时存储数据,临时加载数据应用程序,4G,8G,16G,32G #速度快,造价高,断电即消失 硬盘 ...
- UE4自学随笔（一）
本文及后续均为个人学习记录所用,难免毫无章法零零碎碎,希望看到此文的诸君勿怪. 一.Actor与Pawn Actor类 在UE4中,Actor类是可以放到游戏场景中的游戏对象的基本类型.你如果想放置任 ...