Web端display属性

最新推荐文章于 2022-04-25 14:38:39 发布
最新推荐文章于 2022-04-25 14:38:39 发布
阅读量7.9k 收藏 15
点赞数 1
分类专栏： web前端 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoucanfa/article/details/78984802
版权

定义

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;
  • [注意]关于inline-block元素底部空隙的问题移步到此

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 test paragraph

若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等表格专有属性

[注意]对于display为table和inline-table，若处于分隔边框模型即border-collapse:separate;，margin和padding都可设置；若处于合并边框模型即border-collapse:collapse，只可设置margin

inline-table

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]非独占一行

[3]支持宽高

[4]默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性

table-cell

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]非独占一行

[3]支持宽高

[4]垂直对齐

[5]同级等高

[注意]display:table-cell的元素不可以设置margin，但可以设置padding

table-caption

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]独占一行

[3]支持宽高

[注意]display:table-caption的元素margin和padding都可设置

  • 注意事项

    【1】如果一个元素是绝对定位元素，float的值设置为none，对于浮动元素或绝对定位元素，计算值由声明值确定

    【2】对于根元素，如果声明为值inline-table或table，都会得到计算值table，声明为none时则会得到同样的计算值none，所有其他display值都计算为block

发哥Learning
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端入门到实战：css中display属性
软件开发-前端开发-IT
09-23 756
display属性共有4个值： blcok：块级元素 inline-block：行内块级元素 inline：行内元素 none：隐藏元素，不占据空间 1.块级元素 常见的块级元素有div,p,ul,ol,li,h1~h6等 块级元素会默认占满父元素的宽度且独占一行 <div> <p>尽可能的占满父元素的宽度</p> </div> 2.行内元...
web端图片滑动demo
06-21
在这个“web端图片滑动demo”中，主要利用了CSS3的一个强大特性——`transition`属性。接下来，我们将深入探讨这个知识点以及如何在实际项目中实现图片滑动效果。 首先，`transition`属性是CSS3中的一个关键功能，...
webdisplays：适用于Minecraft 1.12.2的WebDisplays mod
02-04
用于Minecraft 1.12.2的WebDisplay 这是Minecraft 1.12.2的WebDisplays mod。 即使源代码是公开的，它也不是“开放源代码”项目。 阅读“许可证”文件以获取更多信息。 维基 可以在我的网站上找到详细介绍所有块/项目的Wiki。 发布前的事情 准备发布。 预定发布日期：17/02/2018。 延迟的事情 插件API 商店 CC接口，如果CC得到更新... 使用键盘时将相机居中放置在屏幕上 minePad管理：检查GuiContainer.draggedStack中的minePad 游戏中命令，用于添加/删除列入黑名单的域 配置：RPMP（
CSS Display属性的双值写法
web前端开发教程htmlcssjs
11-07 217
display属性 display 属性用来控制一个元素及其子元素的 格式化上下文， 你应该在刚刚学习CSS的时候就知道，有些元素是块级元素，有些则是行内元素。 有了 display 属性，你就可以切换元素不同的状态。比如说，通常一个 h1 元素是一个块级元素，但是通过切换，它就能以内联元素展现。 这几年，我们也知道了Grid 布局和弹性盒布局。我们只需要将...
html5display属性,Web应用界面(display)
weixin_36272622的博客
06-04 673
Web应用界面(display)查看应用界面案例源码下载上节课的命令按钮是竖直排列，本节课通过把它设置为水平排列来学习display属性，深入了解行内元素、块元素和行内块元素。块元素的特点是独占一行，并且自动产生换行，多个行内元素可以排列在一行，只有一行无法容纳内容，溢出的时候才会换行。行内元素有一个特点，无法使用CSS样式设置高度和宽度，比如超链接a标签插入style="width: 100px...
web前端-CSS-display属性
jinchenpeng的博客
05-30 847
浅谈CSS3中display属性的Flex布局的方法
09-24
本文将深入探讨CSS3中`display`属性的`flex`布局方法，这是一种极具灵活性的页面布局技术，广泛应用于现代网页和应用开发，包括微信小程序的设计。`Flex布局`，全称`Flexible Box`，旨在为盒状模型提供更为便捷、...
Web-App开发入门.docx
12-04
在设计Web App时，应尽量避免依赖CSS的浮动布局，而是利用`display`属性来创建更灵活的布局。 对于复杂的UI效果，如按钮的高级渲染，虽然CSS3在某些方面有所限制，但它仍然提供了大量新功能，如渐变、阴影和边框...
web前端笔试题（含答案）.doc
07-02
答：使用虚拟 DOM 而不是真正的 DOM，可以用服务器端渲染，遵循单向数据流或数据绑定。 19. Ajax 处理跨域的方式有三种？ 答：代理、jsonp、XHR2。 20. angularJS 中两个不相干的控制器，怎么联系？ 答：用 ...
实现web网页的打印功能
12-28
例如，通过设置`<div>`的`id`，然后在`window.print()`前，用CSS的`display`属性临时显示或隐藏这些区域。 4. **C#服务器端支持**：虽然大部分工作在前端完成，但C#可以用来提供一些辅助功能，比如动态生成带有打印...
Web 的display标签分页使用说明
01-18
Java Web的应用，教你如何用display标签分页。
Web移动端布局那些事
09-27
3. rem在PC端的不稳定性：部分PC浏览器对rem支持不佳，可能导致设计效果与预期不符，建议避免在PC端使用rem。 1. 弹性盒子模型的兼容性问题：虽然大部分移动端浏览器支持旧版Flexbox语法，但不包括`wrap`属性，需要...
JS Web Flex弹性盒子模型代码实例
10-15
通过设置容器的`display`属性为`flex`或`-webkit-flex`（对于老版本浏览器的兼容），我们可以启用Flexbox布局。 1. `justify-content`属性 在上面的代码实例中，`.demo`类的样式中设置了`justify-content: space-...
简洁的web端和自适应移动端，聊天界面
07-26
在聊天界面中，CSS3可以实现好友列表的分组样式，如使用`display: flex`或`grid`布局来组织好友项，以及设置`float`属性使聊天窗口浮动在页面右侧。为了实现自适应移动端的效果，可以运用媒体查询(`@media`)来根据...
JS 实现web分页打印功能
11-09
JavaScript（简称JS）作为浏览器端的主要脚本语言，提供了这样的能力。本篇将详细介绍如何利用JS的`Window`对象的`print()`方法来实现一个具有强大兼容性的分页打印功能。 首先，`Window.print()`方法是JavaScript...
WEB display -复习用 如侵则删
qq_47632786的博客
04-25 1395
display display 属性规定元素在布局中应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。 属性名：display 属性值：inline|block| inline-block | table | inline-table | table-row-group
web前端之css中display属性，display:inline-block
过客匆匆，恍如烟
11-12 6053
display属性，display:inline-block display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身
【web初步】标签显示模式（display）
lzx's blog
04-07 589
块级元素(block-level) 独占一行 高度，宽度、外边距以及内边距都可以控制 宽度默认是容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或者块级元素。 p 里面不能放块级元素，特别是 p 不能放div h1~h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。 常见的块元素有<h1>~<h6>、<p>、...
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
热门推荐
胜天半子祁同伟
02-02 1万+
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
display: flex;什么功能
最新发布
06-08
2. **对齐和分布**：通过 `justify-content`、`align-items` 和 `align-self` 属性，开发者可以控制项目在容器内的水平和垂直对齐方式，如居中、两端对齐等。 3. **伸缩（flex-grow, flex-shrink, flex-basis）**：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值