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 ...
随机推荐
- [luogu P1776] 宝物筛选 解题报告(单调队列优化DP)
题目链接: https://www.luogu.org/problemnew/show/P1776 题目: 终于,破解了千年的难题.小FF找到了王室的宝物室,里面堆满了无数价值连城的宝物……这下小FF ...
- 8.boost_array_any
#include <iostream> #include <string> #include <boost/array.hpp> //异构的容器 #include ...
- 从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
- Kettle的四大不同环境工具
不多说,直接上干货! kettle里有不同工具,分别用于ETL的不同阶段. 初学者,建议送Spoon开始.高手,是四大工具都会用. Sqoop: 图形界面工具,快速设计和维护复杂的ETL工作流.集成开 ...
- WPF学习（三） － 依赖属性
学习WPF时,我在看一本叫做“深入浅出WPF”的书.整整20页都在讲依赖性性和附加属性,反复看了几遍居然还是不懂,真是郁闷. 上一篇中WPF绑定的例子,其实已经用到了依赖属性. // 作为被绑定的目标 ...
- Servlet学习(一)——Servlet的生命周期、执行过程、配置
1．什么是Servlet Servlet 运行在服务端的Java小程序,是sun公司提供一套规范(接口),用来处理客户端请求.响应给浏览器的动态资源.但servlet的实质就是java代码,通过jav ...
- ActiveMQ学习笔记（8）----ActiveMQ的消息存储持久化
1. 概述 ActiveMQ不仅支持persistent和non-persistent两种方式,还支持消息的恢复(recovery)方式. 2. PTP Queue的存储是很简单的,其实就是FIFO的 ...
- ActiveMQ学习笔记（2）----JMS的基本概念和模型
1. JMS 的基本概念 1. JMS是什么? JMS Java Message Service,Java消息服务,是Java EE中的一种技术. 2. JMS规范 JMS定义了Java中访问消息中间 ...
- 入门python:《Python编程快速上手让繁琐工作自动化》中英文PDF+代码
入门推荐学习<python编程快速上手>前6章是python的基础知识,通俗易懂地讲解基础,初学者容易犯错的地方,都会指出来.从第三章开始,每章都有一个实践项目,用来巩固前面所学的知识. ...
- 越努力越幸运--2-LD_PRELOAD, fork ,僵尸进程
开始新的工作了,做了爸爸之后感觉一直都是浑浑噩噩,希望老婆和宝宝一直健康开心~ 最近遇到的问题很多啊,哈哈 1. 装环境时候,需要的glibc 版本不对,我把本地的软链接改了个别名(惯性思维),然后一 ...