display属性,及其区别

标签(空格分隔): 未分类


所有属性

MDN中所有display的值
/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

主要的几个属性inline,block,inline-block,none.

inline: 多个内联元素占同一行,直到放不下才换行。 block: 单独占一行 inline-block: 像inline一样放置(比如和它相邻的元素处在同一行),像block一样表现。 none: 隐藏该区域,不占实际空间。但却真实存在,可以通过js获取被隐藏的元素

区别

设置了inline的元素不能设置宽高,有自身内容决定大小,margin值只有margin-left和margin-right值,设置margin-top和margin-bottom无效,对padding值也一样

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		div{
			width: 300px;  /*无效*/
			height: 300px;  /*无效*/
			background-color: #CA6666;  /*因没有内容填充所以没有显示出背景颜色*/
			display: inline;
			margin-top: 100px;   /*无效*/
			margin-bottom: 100px;  /*无效*/
			margin-left: 100px;
			margin-right: 100px;
			border: 1px solid #CB5757;  /*因没有内容填充所以只显示出1px的边框*/
		}
	</style>
</head>
<body>
	<span>sfaegaergeargerar</span>
	<div></div>
</body>
</html>

设置了inline-block的元素虽然会有内联元素的效果,但是却可以设置宽高margin,padding值等

其他

display:block的元素和块级元素并不是一个概念。例如,< li>元素默认的display值是list-item,< table>元素默认的display值是table,但是它们均是“块级元素”,因为它们都符合块级元素的基本特征,也就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示

display:inline-block的元素为什么可以设置宽高? 其实可以把每个元素理解为两个盒子,一个外在盒子,一个内在盒子。外在盒子负责元素可以一行显示,还是只能换行显示。内在盒子负责内容和宽高。于是,值为block的元素实际由外在的“块级盒子”和内在的“块级盒子”组成,值为inline-block的元素则由外在的“内联盒子”和内在的“块级盒子”组成,值为inline的元素则内外均是“内联盒子”

参考链接: display知识点总结 display属性值block,inline和inline-block概念和区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python

jQuery基础

一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。...

2196
来自专栏coding for love

CSS入门3-认识html之元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

863
来自专栏大数据钻研

你不得不了解的HTML知识

这次要细说的只是块级元素和行内元素的内容,如有不对,请轻喷。 块级元素和行内元素 默认情况下块级元素会始终占居一行,而行内元素并不会。除了 table 元素的 ...

2776
来自专栏前端知识分享

第70天:jQuery基本选择器(一)

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

771
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

3534
来自专栏天天

面向对象编程(随机点名)

1532
来自专栏小古哥的博客园

标签语义化之常用HTML标签

一、布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个...

3415
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

1243
来自专栏前端架构与工程

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:bef...

2069
来自专栏程序员的知识天地

前端学习之HTML【一】

块级元素默认占一行,一行内添加一个块元素后一般无法添加其他的元素,其宽度自动填满其父元素宽度

1211

扫码关注云+社区

领取腾讯云代金券