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 ...
随机推荐
- 安卓-活动Activity
Android有4大组件,活动 Activity,服务 Service ,广播接收器 Brostcast receiver,内容提供器 Content Provider 安卓活动的生命周期有7种, o ...
- 为什么不建议用table进行布局
本文部分内容转载自:http://www.html5tricks.com/why-not-table-layout.html 刚刚接触html的时候,利用table进行页面布局是比较容易的.但是,在实 ...
- c#邮件发送服务
邮件发送服务 项目中会遇到定时给某人发送邮件的功能要求,这里是京东的一段代码,当然也是我同事找的,我记录学习一下,以免忘记. 这是解决方案 这里主要是工具:日志工具,链接数据库工具,发送邮件工具 这里 ...
- Nodemailer 报错
{ [Error: connect ECONNREFUSED] code: ‘ECONNREFUSED’, errno: ‘ECONNREFUSED’, syscall: ‘connect’ } 如果 ...
- JavaScript学习——JS事件总结
回顾之前已经使用过的事件 (onsubmit.onclick.onload.onfocus.onblur.onmouseover.onmouseout) onfocus/onblur:聚焦离焦事件,用 ...
- QT笔记 -- (1) .ui文件
刚开始写QT,designer用的不习惯,打开.ui文件看了一下,很容易读的xml文件,记录一下. 大体框架如下 <?xml version="1.0" encoding=& ...
- PHP mysql_fetch_array得不到数据
好久没写PHP了...为了数据库课设开始了PHP速成之旅... 光是简单的注册功能就坑了我好几个小时,不过万事开头难嘛...之后应该会快起来的. 先说一下昨天遇到的小坑, 我的表单是这么写的 < ...
- 定时清理clientmqueue目录垃圾文件防止占满磁盘空间
RedHat/CentOS 5.8 默认就有sendmail,而6.4默认没有. 手动清理方法: find /var/spool/clientmqueue/ -type f|xargs rm -f ...
- [Debug]SpaceVim中neomake报错 Error while trying to load a compilation database
回家装上archlinux,突发奇想装个SpaceVim写题 安装配置一路可以说是没有太大问题 最后在写题时出现如下问题 Error while trying to load a compilatio ...
- 15个开发者最亲睐的Android代码编辑器
如果你希望你的Android设备,如智能手机和平板电脑,在任何时间和任何地方都能够编写代码,那么,不妨看看下面我将介绍的15款Android代码编辑器,它们必将成为你的理想工具. 1.Deuter I ...