深入理解display属性
前面的话
display属性在网页布局中非常常见,但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值,本文将详细介绍display属性的各个方面
定义
display属性用于规定元素生成的框类型,影响显示方式
值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit
初始值: inline
应用于: 所有元素
继承性: 无
[注意]IE7-浏览器不支持table类属性值及inherit
分类
block
【特征】
[1]不设置宽度时,宽度撑满一行
[2]独占一行
[3]支持宽高
【标签】
<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>
[注意]menuitem标签只有firefox支持
【不支持的样式】
[1]vertical-align
inline
【特征】
[1]内容撑开宽度
[2]非独占一行
[3]不支持宽高
[4]代码换行被解析成空格
【标签】
<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>
【不支持的样式】
[1]background-position
[2]clear
[3]clip
[4]height | max-height | min-height
[5]width | max-width | min-width
[6]overflow
[7]text-align
[8]text-indent
[9]text-overflow
inline-block
【特征】
[1]不设置宽度时,内容撑开宽度
[2]非独占一行
[3]支持宽高
[4]代码换行被解析成空格
【标签】
<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress><select><textarea><video>
【不支持的样式】
[1]clear
【IE兼容】
IE7-浏览器不支持给块级元素设置inline-block样式,解决方法如下:首先将其变成行内元素,使用具有行内元素的特性,然后触发haslayout,使其具体块级元素的特性,如此就可以模拟出inline-block的效果
div{display:inline-block;*display: inline;zoom: 1;
none
【特征】
隐藏元素并脱离文档流
【标签】
<base><link><meta><title><datalist><dialog><param><script><source><style>
list-item
【特征】
[1]不设置宽度时,宽度撑满一行
[2]独占一行
[3]支持宽高
run-in
run-in是一个有意思的块/行内元素混合,可以使某些块级元素成为下一个元素的行内部分。如果一个元素生成run-in框,而且该框后面是一个块级框,那么该run-in元素将成为块级框开始处的一个行内框,run-in框格式化成另一个元素中的行内框,但它们仍从文档中的父元素继承属性
[注意]只有safari和IE8+支持
<h3 style="display:run-in">run-in test</h3> <p>paragraph</p>
![](/assets/blank.gif)
若run-in框后面不是块级框时,run-in框本身将成为块级框
<span style="display:run-in">run-in test</span> <span>paragraph</span>
![](/assets/blank.gif)
表格类元素
table{display: table;} thead{display: table-header-group;} tbody{display: table-row-group;} tfoot{display: table-footer-group;} tr{display: table-row;} td,th{display: table-cell;} col{display: table-column;} colgroup{display: table-column-group;} caption{display: table-caption;}
表格类元素的display共有以上几种,<thead><tbody><tfoot><tr><col><colgroup>因为无法设置margin和padding用的较少,下面将着重介绍下<table>、<td>、<th>、<caption>这四个标签对应的display属性
table
【特征】
[1]不设置宽度时,宽度由内容撑开
[2]独占一行
[3]支持宽高
[4]默认具有表格特征,可设置table-layout、border-collapse、border-spacing等表格专有属性
inline-table
【特征】
[1]不设置宽度时,宽度由内容撑开
[2]非独占一行
[3]支持宽高
[4]默认具有表格特征,可设置table-layout、border-collapse、border-spacing等表格专有属性
table-cell
【特征】
[1]不设置宽度时,宽度由内容撑开
[2]非独占一行
[3]支持宽高
[4]垂直对齐
[5]同级等高
table-caption
【特征】
[1]不设置宽度时,宽度由内容撑开
[2]独占一行
[3]支持宽高
注意事项
【1】如果一个元素是绝对定位元素,float的值设置为none,对于浮动元素或绝对定位元素,计算值由声明值确定
【2】对于根元素,如果声明为值inline-table或table,都会得到计算值table,声明为none时则会得到同样的计算值none,所有其他display值都计算为block
原文地址:http://www.cnblogs.com/xiaohuochai/p/5202761.html?utm_source=tuicool&utm_medium=referral#anchor2
转载于:https://www.cnblogs.com/purplefox2008/p/5397945.html
深入理解display属性相关推荐
- 【CSS 定位之 display 属性】
CSS 定位之 display 属性 1. display 属性: 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局) ⑴ 设置 元素的显示类型 ( 框的类型 ) ⑵ 元素的显示类型 ⑶ 显 ...
- css display属性理解
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- html display布局,Web布局:display属性
经过CSS盒模型和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念.即在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子):都有自己的视觉格式化(不同的盒子).而其中CSS ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
- html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法
当你查看别人写的css代码的时候,经常会看到display:block.none.inline.table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底 ...
- html中display属性是什么意思,HTML中display属性的属性值有哪些
HTML中display属性的属性值有哪些 发布时间:2020-09-26 14:35:20 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍了HTML中display属性的属性值有哪些,具有 ...
- java display html_css html布局之display属性_动力节点Java学院整理
1.HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素. 内联元素(inline) ①元素显示方式:"文本方式",1个挨着1个,不独自占有1行: ...
- CSS display 属性
定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 ...
- 浅谈CSS3中display属性的Flex布局,关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
最新文章
- 【计算机图形学】实验:VB.net环境下的绘制贝赛尔(Bezier)自由曲线完整实验操作步骤
- !doctype html报错h5,【Web前端问题】javascript import 报错
- 为何不精通C? 03 深入剖析声明
- 去除字符串最后一位的几种方法
- Redmi Note 10配备NFC 3.0功能:首次支持封闭式门卡
- Protobuf报错Protocol message tag had invalid wire type
- php字符型和数字型的注入,Sql注入的分类:数字型+字符型
- Windows server 2016 / Windows 10关于域管理员帐号权限不足的问题
- IOS测试版全版本固件下载集合
- esxi能直通的显卡型号_显卡刷bios教程
- 在windows下安装 Ruby on rails 的血泪史
- 如何判断一家软件公司是否靠谱
- 快速学习法:一年搞定MIT计算机课程
- 最新ECS阿里云服务器租用价格表,优惠活动(实时更新)
- 阿里云实现短信验证码登录
- developer 开启双重验证 your appid needs to be updated
- 编译原理及其实践教程(第二版)总结
- java租车_Java 哒哒租车系统(控制台)
- 10、Kafka 消息订阅系统
- 【修真院“善良”系列之十八】WEB程序员从零开始到就业的全资料V1.0——只看这一篇就够了!
热门文章
- boost::contract模块实现union的测试程序
- Boost::context模块callcc的jump_void测试程序
- DCMTK:测试字符串OFString实用程序
- VTK:Qt之ImageDataToQImage
- OpenCV创建校准图案calibration pattern
- QDoc状态status
- C++将数字A转换为数字B所需的翻转次数算法实现(附完整源码)
- c++Numerical string sort数字字符串排序的实现算法(附完整源码)
- 经典C语言程序100例之四八
- php如何实现添加到购物车_PHP实现添加购物车功能