display属性的深入理解和总结

最新推荐文章于 2022-05-29 14:18:13 发布
最新推荐文章于 2022-05-29 14:18:13 发布
阅读量418 收藏 1
点赞数 1
文章标签： class CSS

定义

　　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]非独占一行，这是与block非常不同的一点

    　　[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>

    若run-in框后面不是块级框时，run-in框本身将成为块级框

    <span style="display:run-in">run-in test</span>
<span>paragraph</span>

    表格类元素
    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
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS属性display:inline-block用法深入理解
09-25
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在...
《三》CSS 中的 display 属性
花铛
03-13 8922
display属性可以设置元素的外部和内部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或行内元素）；元素的内部显示类型可以控制其子元素的布局（flex、grid等）。行内元素设置上下外边距无效，左右外边距有效。行内元素设置上下内边距，只对自身有效，不会撑开父元素，也不会对周围元素的布局产生任何影响。设置左右内边距有效。但是，标准毕竟只是标准，不规范的写法也是可能通过浏览器认证的。...
css3 之 display 属性
liudanyang_21的博客
08-18 1065
1、定义 　　语法：display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box |
理解与应用css中的display属性
Liuqz2009的专栏
02-12 3726
　　display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：noneblockinlineinline-blockinherit　　下面，我将按照顺序将上述几种属性做一个完整的讲解。第一部分：display:none　　none这个值表示此元素将不被显示。比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例...
用ENSP华为模拟器组建一个完整的校园网
qq_62466609的博客
05-29 1万+
用ENSP华为模拟器组建一个完整的校园网，，测试结果都没有问题主要实现了远程控制，动态路由，DHCP，无线，防火墙，服务器集群的配置，网络规划，服务器的配置和设置后续发，有问题或者想要拓扑图的留邮箱就行，本人也才大学，不太会写，想讨论的可以说，也可以留下问题。
CSS布局之display: tables布局
aomiano55778的博客
07-24 231
首先来看看display: table的兼容性： 可以看到，除非你还要跟IE6/7较劲，否则display: table不需考虑兼容性。 接下来看看关于table的display可选值： table：指定对象作为块元素级的表格，相当于html标签<table> inline-table：指定对象作为内联元素级的表格，相当于ht...
css(display,float,position)深入理解
12-13
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否...
深入理解css中vertical-align属性
12-13
两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？ <meta charset="utf-8"/> <style> div{ width: 100px; height: 100px; ...
深入理解DIV和SPAN的区别
12-13
深入理解DIV和SPAN的区别 DIV 块元素，span是行内元素 Span的宽度依照包围着对象的宽度而定，所以不能用宽度属性width设置span标记内对象的宽度，但可以设置span的margin（外补丁）值，span中的对象位置与父对象的...
HTML div display定义,css3 之 display 属性
weixin_30315143的博客
06-30 698
1、定义语的格近一响近一响近一响近一响近一响近一响法：display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-grou...
谈谈你对display的理解
haha-zhao的博客
04-09 1086
Display 这个单词本身时是否显示的意思，但是我们用的时候主要有两种功能： 第一种功能是用来控制页面元素的显示和隐藏的。 第二种功能是在块元素和内联元素进行切换的，如果是用来控制元素的隐藏，用display：none和block之间切换的话内联元素切换成块元素直接用display=block； 是行内元素具有了块元素的特征，而且不独占一行，正是有了display以后会实现行内元素和块元素的任意...
深入理解Display类的使用
爪哇米工作室陈跃峰的移动开发博客
01-01 7892
深入理解Display类的使用作者：陈跃峰Email：[email protected]          熟悉了MIDlet类的使用以后，下面来熟悉一下Display类的使用，这个类也是进行J2ME编程中经常要使用到的类之一。       Display类有两个最主要的作用：1、  获得屏幕的属性。例如屏幕是否是彩色的，以及支持的颜色数量等信息。2、  控制
基于CSS属性display:table的表格布局的使用
weixin_30321449的博客
03-23 1673
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用<table> HTML标签即...
多选下拉框xmSelect
qq_45473377的博客
12-24 761
效果图 Html <div class="layui-inline"> <div id="payedEnum" class="xm-select-demo" style="width: 100%;display: inline-block;padding-right: 60px"></div> </div> js 引入xmSelect控件（使用的的layui的前端框架，项目导入xmSelect文件后配置vision 指向xmSelect地址，
display:table 标签使用
哮天犬的博客
06-04 1694
&lt;display:table name="list"  id="row" requestURI="${rfid}/ordRpt/ywData/list.do" class="list" cellspacing="0" style="width:180%" pagesize="${pageSize }" export="true" 
html —— table 标签 与 display:table 样式
永远的北极光
04-01 1万+
目录：一、table 相关标签介绍及使用二、div 布局设置display：table一、table 相关标签介绍及使用相关标签按包含关系从大到小排序：table ——&gt; col | colgroup | thead | tbody | tfoot；thead | tbody | tfoot ——&gt; tr；tr ——&gt; th | td；说明：table：重要属性有border（单...
HTML5中网页布局及display属性重点总结
热门推荐
妖精小狗的博客
08-25 2万+
常见网页布局：   标准文档流： 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式   标准文档流组成： 块级元素（block）：&lt;h1&gt;…&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、列表 内联元素（inline）：&lt;span&gt;、&lt;a&gt;、&lt;img/&gt;、
css Table布局-display:table
qq_35396397的博客
11-22 693
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
Display属性学习总结
爱是与世界平行
04-19 982
HTMl元素根据表现形式，常见的可以分为两类。（1）块元素（block） （2）行内元素（inline)。 当然，除了以上两种元素类型外，还有inline-block、table-cell等元素类型。对于这些元素的运用，就需要通过display来编码，对于display学习的掌握，可以将网页做得更加完善和美观。
深入理解android displaycontent
最新发布
01-21
总而言之，深入理解Android的DisplayContent对于开发Android应用程序和优化用户体验非常重要。它是一个关键的系统组件，负责管理显示设备、窗口管理和显示帧率等内容，确保应用程序在不同显示设备上正常运行并提供...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值