display值的分类
整体来讲,display
的值可以分为6
个大类,1
个全局类,一共是7
大类:
- 外部值
- 内部值
- 列表值
- 属性值
- 显示值
- 混合值
- 全局值
外部值,指的是这些值只会直接影响一个元素的外部表现,而不影响元素里面的儿子级孙子级元素的表现;常见的外部值有 display:block; display:inline; display:run-in;
display:block; 块级元素,css
初学者都知道的概念,只要是容器类型的元素基本都是这个值。除div之外,h1-h6、p、form、header、footer、section、artical等天生都是这个值
、del、strong、em、code等等
都属于这一类型
display:run-in; 这个值基本上不会有人用,但你可以对它进行一下了解;因为除了IE
和Opera
支持它以外,其他所有主流浏览器包括Chrome
, Safari
, Firefox
全都对它置若罔闻。这东西说白了也没什么神秘,
它的意思就是说如果我们命令一个元素run-in
,中文意思就是『闯入
』!那么这个元素就直接闯入下一行,鉴于此值和中国男足一样如此无用,我们弃之不理即可,不用浪费过多时间。。。
内部值:主要是用来规定子级元素布局排列的,规定它们要么排成S
形,要么排成B
形,再或者排成S-B这样队形的;在css3
如火如荼的今天,你要玩不转这些值,怕是哪儿也找不到工作的;常见的值主要有:
display:flow; display:flex;
display: flex; 弹性盒布局,作为新一代的全栈工程师,2009
年诞生的这个属性可以说不亚于css
界一场工业革命,它的诞生标志着马车一样的float
被彻底抛进历史的垃圾堆,所以这个属性你
必须烂熟于你的胸(衣)中;display: flex;
以及它的六大属性:flex-direction
, flex-wrap
, flex-flow
, justify-content
, align-items
, align-content
,包括所有这些属性
的值,都是你需要反复推敲的;关于它的详情,可以参考阮一峰的这篇文章,但我认为,格式编排的更好还是csstrick
上的这篇文章
前言:会flex
很吊吗?会grid
更吊哦!也许这就是下次前端面试的重点!
display: grid; grid
布局,中文翻译为网格布局;
学习grid
布局有两个重点:一个重点是grid
布局引入了一个全新的单位:fr
,它是fraction
(分数
)的缩写,所以从此以后,你的兵器库里除了px
, em
, rem
,
百
分
比
这些常见兵器以及vw
, vh
这些新式武器之外,又多了一样旁门暗器fr
,要想用好grid
,必须充分掌握fr
。另一个重点是斜杠操作符
,这可不是分数
哦。它表示的是起始位置
和结束位置
。比
如说3 / 4
,这可不是四分之三
的意思,这是指一个元素从第3
行开始,到第4
行结束,但又不包括第4
行。
同样,与grid
相关联的也有一大堆旁门属性,是在学习display: grid;
的同时必须掌握的。包括grid
, grid-column-start
, grid-column-end
, grid-row-start
, grid-row-end
, grid-template
, grid-template-columns
,
grid-template-rows
, grid-template-areas
, grid-gap
, grid-column-gap
, grid-row-gap
, grid-auto-columns
, grid-auto-rows
, grid-auto-flow
, grid-column
, grid-row
。不能详述,关于这个写起来又是一大篇文章。
详情还是参考csstrick上这篇文章,讲得非常细致非常清楚,以下是对网格布局的应用:
display: subgrid; 2015
年8
月6
日,W3C
的级联样式单(CSS
)工作组(Cascading Style Sheets Working Group
)发布了CSS网格布局模块第一级
(CSS Grid Layout Module Level 1
)的工作草案。在这个草案里规定了上一节我们讲到
的display: grid;
的方案。而display: subgrid;
是属于2017
年11
月9
日发布的非正式的CSS网格布局模块第二级的内容。所以这是一个非常新的草案,并且围绕它的争议从来也没有断过。subgrid
总的思想是说大网格
里还可以套小网格,互相不影响。但如果grid
里可以再套subgrid
的话,那我subgrid
里还想再套subgrid
怎么办?subsubgrid
吗?况且,到底是grid: subgrid;
还是display: subgrid;
这个也没有达成共识,关于此一
系列的争议,感兴趣的同学可以看看这篇文章,英语好的可以看这篇。
display: table; 这一个属性,以及下面的另外8
个与table
相关的属性,都是用来控制如何把div
显示成table
样式的,因为我们不喜欢<table>这个标签嘛,所以我们想把所有的<table>标签都换成<div>标签。<div>有什么好?无非就是能自动
换行而已,但其实你完全可以做一个<table><tr><td>标签,把它全都替换成display: block;
也可以自动折行,只不过略微麻烦而已。关于display: table;
的详细用法,大家可以参考这篇文章。
目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢?(即DIV+CSS布局优势)
1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个table和1000个div比比看哪个文件大
2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示
3、非表格内容用table来装,不符合标签语义化要求,不利于SEO
4、table的嵌套性太多,用DIV代码会比较简洁
display: flow; 含义不清,实验室阶段产品,Chrome
不支持。如果还不够说服你暂时不要碰它的话,试着理解以下英文原文:
If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
display: flow-root; 不同于刚才谈到的flow
,现在用flow-root
的渐渐多起来了,因为它可以撑起被你float
掉的块级元素的高度。外容器本来是有高度的,就像这样:
Example one
.container {
border: 2px solid #3bc9db;
border-radius: 5px;
background-color: #e3fafc;
width: 400px;
padding: 5px;
}
.item {
height: 100px;
width: 100px;
background-color: #1098ad;
border: 1px solid #0b7285;
border-radius: 5px;
}
.item
加了一个float: left;
结果就成这样了,外容器高度掉了,这不是很多人常犯的错误吗?现在我们给.container
加上display: flow-root;
再看一下:
喏,外容器高度又回来了,这效果是不是杠杠的?
那位同学说,我们用clear: both;
不是一样可以达到这效果吗?
.container::after {
content: '';
clear: both;
display: table;
}
二狗子,你变了,请你离开这里好吗!我们在讲display: flow-root;
,不是在讲clear: both;
!
display: ruby; 旁注标记 ruby
这个取值对于我们亚洲人来说其实是非常有用的一个东西,但是目前除了Firefox
以外其它浏览器对它的支持都不太好。简而言之,display: ruby;
的作用就是可以做出下面这样的东西:
很好的东西,对吧?如果可以用的话,对我国的小学教育可以有极大的促进。但可惜我们现在暂时还用不了。
ruby
这个词在英语里的意思是红宝石
,但在日语里是ルビ
,翻译成中文是旁注标记
的意思,我们中文的旁注标记就是汉语拼音。可以想见,这个标准的制定者肯定是日本人,如果是我们中国人的话,那这个标签就不是ruby
,
而是pinyin
了。还有一个ruby
语言,发明者也是一个日本人,和html
里这个ruby
是两码事,不要搞混了。
ruby
的语法大致如下:
列表值 display:list-item; 和display: table;
一样,痛恨各种html
标签,只想使用div标签来搞出类似ul-li的效果,如下:
说白了就是,你用ul-li能实现的效果,他可以用div实现出来,就是这个作用,这个很少使用,了解即可,不用过多浪费时间。
属性值:一般附属于主值,比如主值里设置了display: table;
,就可以在子元素里使用display: table-row-group;
等等属性,不过并不绝对;关于它们的作用,主要参考主值就够了。
display: table-row-group; 详情参考display: table;。
display: table-header-group; 详情参考display: table;。
display: table-footer-group; 详情参考display: table;。
display: table-row; 详情参考display: table;。
display: table-cell; 详情参考display: table;。这个属性有必要详细说说,因为它完全可以单独应用,用在高度不固定元素的垂直居中上,详情请见张鑫旭的这篇文章。效果如下图所示:
display: table-column-group; 详情参考display: table;
display: table-column; 详情参考display: table;
display: ruby-base; 详情参考display: ruby;。
display: ruby-text; 详情参考display: ruby;。
display: ruby-base-container; 详情参考display: ruby;。
display: ruby-text-container; 详情参考display: ruby;。
盒子值
display: contents; 让子元素拥有和父元素一样的布局方式,仅此而已。
这大概是2018
年年初最令人喜大普达的一件大事了:Chrome 65版本终于要支持display: contents;了!Firefox
早就支持了,而Chrome
直到现在才开始支持,这么重要的特性,它到底有什么功能呢?结果恐怕会令你大失所望。原来的布局是这样的:
你给中间那个div
加上display: contents;
之后,它就变成这样了:
display: none; 使元素从文档流中消失,声明远播,一般面试题中会用来和visibility:hidden;做比较
混合值
display: inline-block; 行内块元素,关于display: inline-block;
的作用恐怕只要做过3
天以上前端的工程师都应该知道。什么也不说了,上一张著名的图片作总结吧:
display: inline-table; 你要能理解inline-block
,你就能理解inline-table
。在行内显示一个表格,就像这样:
display: inline-flex; 这个就不用多说了吧?跟上面一样,在行内进行弹性布局,参考display: flex;。
display: inline-grid; 同上,在行内进行网格布局,参考display: grid;。
全局值:这些值不是display
属性的专利,几乎其它任意属性都可以用,列在这里凑个数。
display: inherit; 继承父元素的display
属性。
display: initial; 不管父元素怎么设定,恢复到浏览器最初始时的display
属性。
display: unset; unset
混合了inherit
和initial
。如果父元素设值了,就用父元素的设定,如果父元素没设值,就用浏览器的缺省设定。直接看图最明白:
获取更多前端知识,请关注下方公众号 ↓↓↓↓↓↓
display值的分类的更多相关文章
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- 左右值无限级分类 MVC + EntityFramework 的简单实现
在度娘上查了大半个月的资料,最后发现每个网友分享的文章都有一定的错误(PS:大家是故意的么?).最后是在看了一个ASP版本后知道了大概流程:看了一个存储过程实现的文章后知道了大概需要的功能:看了一个S ...
- 二十五:XSS跨站值原理分类及攻击手法
HTML DOM树 XSS跨站产生原理,危害,特点 本质,产生层面,函数类,漏洞操作对应层,危害影响,浏览器内核版本 XSS是什么? XSS全称跨站脚本(Cross Site Scripting),为 ...
- Orchard分类Taxonomies图文教程
Orchard分类和标签都实现对内容的分类管理,两者区别是分类的子项之间是具有级别(同级.上下级)关系,而标签是很随意的,子项之间可以有关系也可以没有,今天给大家分享分类的使用方法. 一.环境说明 O ...
- Mawawa CSS 学习之旅 Display
CSS 类型之 Display 更新时间: 2018-2-10: 一个良好的布局结构从 display 开始! 分类:外部值.内部值.列表值.属性值.混合值.显示值.全局值: 一.外部值 作用:主要用 ...
- CS231n课程笔记翻译3:线性分类笔记
译者注:本文智能单元首发,译自斯坦福CS231n课程笔记Linear Classification Note,课程教师Andrej Karpathy授权翻译.本篇教程由杜客翻译完成,巩子嘉和堃堃进行校 ...
- wordpress 获取分类ID,分类标题,分类描述,分类链接url函数
get_cat_ID() 根据分类名称获取分类ID ///// get_cat_name() 根据分类ID获取分类名称 用法:<?phpget_cat_ID( $cat_name ...
- 前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...
- Farseer.net轻量级开源框架 入门篇:分类逻辑层
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 缓存逻辑层 下一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 ...
随机推荐
- day3 基本语句
代码缩进为一个tab键 就是四个空格 断点 在代码首行前空白处,双击 然后点右上角臭虫 然后点下面箭头朝下的 1.if 语句 if 判断条件: ...
- 自建本地服务器,自建Web服务器——保姆级教程!
搭建本地服务器,Web服务器--保姆级教程! 本文首发于https://blog.chens.life/How-to-build-your-own-server.html. 先上图!大致思路就是如此. ...
- Java 泛型(参数化类型)
Java 泛型 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说所 ...
- ansible实现批量建立互信
Ansible:自动化运维工具 为什么要建立互信:ansible批量配置管理的前提是管理机和被管理机ssh互信,即通过将管理主机的公钥(id_rsa.pub)添加到目标主机上,实现管理机不通过交互式输 ...
- 更换git远程仓库地址
通过命令直接修改远程仓库地址 git remote 查看所有远程仓库 git remote xxx 查看指定远程仓库地址 git remote set-url origin 你新的远程仓库地址 先删除 ...
- 牛哄哄的celery
一.什么是Celery 1.1.celery是什么 Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度. Celery的架构由三部分组成, ...
- 洛谷 P4343 [SHOI2015]自动刷题机
思路 二分答案 显然的二分答案,但是因为二分判定条件 \(\text{wa}\) 了好几遍-- 可以发现,\(n\) 越大,\(k\) 就越小,所以答案是有单调性的,因此可以用两个二分,一次求最大值, ...
- 用Java写编译器(1)- 词法和语法分析
词法和语法分析器构建 ANTLR简介 ANTLR全称ANother Tool for Languate Recognition,是基于LL(*)算法实现的语法分析器生成器和词法分析器生成器,由旧金山大 ...
- Apache Pulsar 在 BIGO 的性能调优实战(上)
背景 在人工智能技术的支持下,BIGO 基于视频的产品和服务受到广泛欢迎,在 150 多个国家/地区拥有用户,其中包括 Bigo Live(直播)和 Likee(短视频).Bigo Live 在 15 ...
- 【Flutter 实战】全局点击空白处隐藏键盘
老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 T ...