Html中display的应用

display英文单词，名词、动词、形容词，作动词译为“显示；表现；陈列；

display在Html应用为排列的意思，Html中标签分为行内标签和块级标签，

行内标签（行内元素）

特点：多个标签存在一行，不能直接设置标签的高度、宽度、行高以及上下边距，但可以设置左右内外边距，依照内容撑开宽高。

块级标签（块级元素）

特点：独占一行，可以设置高度、宽度以及上下边距都可设置的属性值生效；如果不给宽度，块级标签就默认为浏览器的宽度，宽度就是100%；

而想让行内标签独占一行，或者块级标签并排显示，或者既要并排显示又要设置宽高就可以用到display属性了，

display中有三种常用的属性

display: inline; 将元素转化为行内元素，展示行内元素的特点

display: block; 将元素转化为块级元素，展示块级元素的特点

display: inline-block; 将元素转化为行内块元素，展示行内元素的并排显示的特点和块级元素可以设置宽高的特点

例：

在文档中写入两个块级标签，正常运行将会展示块级标签的特点：独占一行

这个时候如果想要它们并排显示呢，就要用到display属性了，

给两个div添加display: inline-block;就可以并排显示了

同样道理：

俩个span标签会并排显示，且宽高设置不可用

不过给span添加display: block;时，就可以设置宽高且独占一行

当给div设置 display: inline;属性时，设置的宽高将不再生效，且并排显示

好了，display属性常用的3种方法已经讲完了，欢迎大家进个人主页查看更多代码知识！！！

Html中display的应用相关推荐

浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
angularjs中ng-show与css中display:none的优先级问题
angular中ng-show 与 css的display:none 用过angular.js的童鞋都知道,ng-show指令在其条件符合时可以使元素显示,条件不符合时使元素隐藏. 我却在前两天写代码 ...
CSS中display:block和display:flax使用记录
CSS中display:block和display:flax使用记录代码: (css) .navigation ul li a{position:relative;width: 100%;text- ...
html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法
当你查看别人写的css代码的时候,经常会看到display:block.none.inline.table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底 ...
javascript中display方法或者visibility隐藏元素实现的效果
在前端开发html页面的时候,可以使用js中实现,修改元素的属性,达到隐藏元素,以及隐藏后的元素的显示的效果:需要修改元素的display方法或者visibility,两种方案实现的效果不同,可参考下 ...
ArcGIS engine中Display类库（局部刷新）
转自原文 ArcGIS engine中Display类库 (局部刷新) Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这个类库 ...
html中display属性是什么意思,HTML中display属性的属性值有哪些
HTML中display属性的属性值有哪些发布时间:2020-09-26 14:35:20 来源:亿速云阅读:102 作者:小新这篇文章主要介绍了HTML中display属性的属性值有哪些,具有 ...
CSS属性中Display与Visibility
visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征. visibility属性用来确定元素是显示还是隐藏,这用visibility="visi ...
CSS3中display属性的Flex布局
编译之后的效果很明显,界面的布局也很合理,看起来很清晰.那么究竟这个属性是干嘛用的呢? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. ...

Html中display的应用

Html中display的应用相关推荐

最新文章

热门文章