css display属性理解
理解与应用css中的display属性
display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有:
- none
- block
- inline
- inline-block
- inherit
下面,我将按照顺序将上述几种属性做一个完整的讲解。
第一部分:display:none
none这个值表示此元素将不被显示。比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为可气的是,它还没有关闭的选项,这时(以chrome为例),我们就可以按下F12,打开开发者工具,点击element,然后使用左上角的选择工具选中想要删除的广告,可以看到element中会有高亮的一行或几行代码,右键,点击Add Attribute,然后输入:style="display:none",这时就可以发现广告不见啦! 当然display:none的用法绝不是专门用于这里的,它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none;,当鼠标滑过一级菜单时,再显示出来(详见《如何实现导航菜单中的二级下拉菜单》)。还可以用于登陆模态框的制作等等。
第二部分:display:block
使用了display:block;之后, 此元素将显示为块级元素,此元素前后会带有换行符。我们先来回顾以下块级元素是什么,他有什么特点。
既然要区分块级元素和行内元素,就得先说说标准文档流了。标准文档流:简称标准流,指的是在不使用其他的与排列和定位相关的css规则时,各种元素的排列规则。于是,我们将“各种元素”分为块级元素和行内元素。(注:实际上还有空元素,如<br>用于换行,<hr>为一条水平线,这里对空元素不做过多讨论)
块级元素特点:
- 总是以一个块的形式表现出来,占领一整行。若干同级块元素会从上之下依次排列(使用float属性除外)。
- 可以设置高度、宽度、各个方向外补丁(margin)以及各个方向的内补丁(padding)。
- 当宽度(width)缺省时,它的宽度时其容器的100%,除非我们给它设定了固定的宽度。
- 块级元素中可以容纳其他块级元素或行内元素。
- 常见的块级元素由<p><div><h1><li>等等。
- 块级元素的display属性值默认为block。
行内元素特点:
- 它不会单独占据一整行,而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右(即某个行内元素可以和其他行内元素共处一行),从上到下依次排列。
- 行内元素不可以设置高度、宽度,其高度一般由其字体的大小来决定,其宽度由内容的长度控制。
- 行内元素只能设置左右的margin值和左右的padding值,而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
- 常见的行内元素由<a><em><img>等等。
- 行内元素一般不可以包含块级元素。
- 块级元素的display属性值默认为inline。
ok!简单回顾了块级元素和行内元素之后,我们就可以进行下一步讲解了。
通过对一个行内元素设置display: block;可以将行内元素设置为块级元素,进而设置它的宽高和上下左右的padding和margin。
应用:
如果我们经常会制作导航栏,这时就要使用ul li 和a组合的方式,但是<a>是行内元素,我们无法设置它的宽和高,这时,就可以在<a>的样式表中,将之设置为display:block。这样就可以设置它的宽和高,以及上下左右的margin和padding以达到我们想要的效果了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >Title</ title >
< style >
*{padding: 0;margin:0;list-style: none;}
ul li{float: left;}
a{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
</ style >
</ head >
< body >
< ul >
< li >< a href="">1</ a ></ li >
< li >< a href="">2</ a ></ li >
< li >< a href="">3</ a ></ li >
< li >< a href="">4</ a ></ li >
< li >< a href="">5</ a ></ li >
</ ul >
</ body >
</ html >
|
效果如下:
第三部分:display:inline
此元素会被显示为内联元素,元素前后没有换行符。在第二部分中,我们介绍了行内元素和块级元素。显然,display:inline的作用即可以将一个块级元素转换成行内元素,那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。
第四部分:display:inline-block
display:inline-block是什么呢?大家对这个属性一定是不陌生的。根据名字,实际上我们就可以才出来它是结合了inline和block的特性于一身。即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性,又保持了inline元素不换行的特性。
举例说明,我们之前在做横向导航菜单的时候,一般是用ul li a组合,然后将li设置为float,这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现。
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >Title</ title >
< style >
ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
li{display: inline-block;border: thin solid red;}
</ style >
</ head >
< body >
< ul >
< li >< a href="">1</ a ></ li >
< li >< a href="">2</ a ></ li >
< li >< a href="">3</ a ></ li >
< li >< a href="">4</ a ></ li >
< li >< a href="">5</ a ></ li >
</ ul >
</ body >
</ html >
|
效果图如下:
确实实现了横向的排列,实际上,也可以设置宽和高,大家可以自己尝试。但是,很明显有一个问题---我将padding和margin的值都设置为0,为什么他们之间还会有距离呢?实际上,这是inline元素自身出现的问题,而inline-block结合了inline和block属性,当然也就存在这个问题了。这些空隙是空白符,在浏览器中,空白符是不会被浏览器忽略的,多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格,换行都会产生空白符。所以自然而然的两个元素之间会有空白符,如果将上述例子中的a标签写成一行,空白符消失,菜单之间也就紧凑起来了。
解决方法:我们要明白空白符归根结底是一个字符,只要我们将ul中的字符的大小设置位0,那么空白符也就不会存在了,但是这是a的字体大小也会继承ul的字体大小,那么就不见了,该怎么办,只需要将a中再设置一个字体不为0的大小覆盖
即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<! DOCTYPE html>
< html lang="en">
< head >
< meta charset="UTF-8">
< title >Title</ title >
< style >
< strong > ul{font-size: 0;}</ strong >
ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
li{display: inline-block;border: thin solid red;< strong >font-size: 15px;</ strong >}
</ style >
</ head >
< body >
< ul >
< li >< a href="">1</ a ></ li >
< li >< a href="">2</ a ></ li >
< li >< a href="">3</ a ></ li >
< li >< a href="">4</ a ></ li >
< li >< a href="">5</ a ></ li >
</ ul >
</ body >
</ html >
|
最终得到的效果图如下:
我们还可以通过inline-block完成一个常见的三列布局。
html代码如下:
1
2
3
4
5
6
7
|
< div id="header">我是header</ div >
< div id="content">
< div id="left">我是left</ div >
< div id="center">我是center</ div >
< div id="right">我是right</ div >
</ div >
< div id="footer">我是footer</ div >
|
css代码如下:
1
2
3
4
|
#header,#footer{height: 50px;width:800px;margin:0 auto;background: #ccc;text-align: center;line-height: 50px;}
#content{width:800px;height: 500px;margin: 0 auto;background: #aaa;< strong >font-size: 0;</ strong >}//解决inline元素产生的空白符问题
#left,#right{display: inline-block;width: 200px;height: 500px;background: #fadaac;font-size: 30px;}
#center{display: inline-block;width: 400px;height: 500px;background: #dadada;< strong >font-size: 30px;</ strong >}//这里一定要重新设置font-size。
|
最终效果图如下:
第五部分:display:inherit
规定应该从父元素继承 display 属性的值。举例如下:
html代码如下:
1
2
3
4
|
< div id="parent">
< div id="first_son"></ div >
< div id="second_son"></ div >
</ div >
|
css代码如下:
1
2
3
|
#parent{ < strong >display: inline-block;</ strong > font-size: 0; background: #cadafa;width: 400px;height: 300px;}
#first_son{< strong >display: inherit;</ strong > background: #eaedac;width: 200px;height: 100px;}
#second_son{< strong >display: inherit;</ strong > background: #da5dd8;width: 200px;height: 100px;}
|
效果图如下:
即我们先设置了id为parent的元素的display属性值为inline-block,然后将其子元素的display属性值设置为inherit(继承),于是,子div的display属性值继承了父元素的display属性值为inline-block。(注意,我在id为parent的div元素中设置了font-size:0px;这样可以有效解决由inline元素带来的空白符问题。)
转载于:https://www.cnblogs.com/duanzexun/p/10869892.html
css display属性理解相关推荐
- CSS display 属性的重叠覆盖
原文详解:CSS display 属性的重叠覆盖 原文链接: http://licocom.com/archives/1168 CSS display属性,一般为隐藏某个标签的显示, 并列N个div或 ...
- CSS display 属性
定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 ...
- CSS display属性的值及作用
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...
- css display属性及使用方法
1.display的取值 浏览器支持 IE Firefox Chrome Safari Opera 支持 支持 支持 支持 支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DO ...
- 【css】css display属性的值及用法
浏览器支持 表格中的数字注明了完全支持该属性的首个浏览器版本. 如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-tabl ...
- CSS display属性--笔记
display属性 规定是否/如何显示元素 每个HTML元素都有一个默认的display值,具体取决于它的元素类型, 大多数元素的display默认值为block或inline display : b ...
- css display属性
display是css中最重要的用于控制布局的属性,它的取值有很多,主要有以下几个: none: block: inline: inline-block: 要想更好的使用这个属性值,首先要了解什么是块 ...
- html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
- html中display属性含义,css中display是什么意思?
display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到.下面本篇文章就来给大家介绍一下CSS display属性,希望对大家有所帮助. display属性规 ...
最新文章
- struts2 ajax请求发现执行action两次原因
- 计算机应用基础dos,计算机应用基础2(带答案)
- VMD_test matlab仿真
- saiku添加mysql数据源_Saiku连接mysql数据库(二)
- 宝石世界1.0游戏发布
- mvc html 生成图片,asp.net mvc5 cs代码中获取视图生成后的HTML
- 996页阿里Android面试真题解析火爆全网,全网首发!
- Xamarin.Android 引导页
- Android中设置位移动画的停止
- 深入解析Windows操作系统(笔记1)
- c语言程序设计考试流程图,c语言程序设计流程图详解.pdf
- 夸计算机老师的成语,赞美老师的成语句子
- 计算机网络基础知识框架
- ps怎么更改背景图层大小_ps怎么修改图层大小
- Linux | 记一次Linux服务器被入侵后的检测过程
- 电脑“开始-运行”的常用命令及用法!很有用!
- matlab 求公切线方程,【原创】绘制两圆公切线MATLAB代码
- 超大日志文件分割方法
- 解决透视变换后图片信息丢失的问题,附程序
- 计算机专业在广东省的录取分数线,深圳大学广东本科批稳居广东高校前4!2019各省录取分数线发布!...
热门文章
- 51nod 1536不一样的猜数游戏 思路:O(n)素数筛选法。同Codeforces 576A Vasya and Petya‘s Game。
- C++代码片段(四)萃取模板类的模板参数类型
- 关于计算机的使用方法中心,关于新校区行政楼和活动中心楼网络使用的说明
- mysql慢查询单位_MySQL慢查询
- fatal error C1070: mismatched wabtags.h
- WriteFile写UNICODE字符串 TxT显示乱码
- matlab下三维dla模型模拟,Matlab下三维DLA模型模拟
- Excel酷炫技能,批量修改工作表名称,让你的工作事半功倍
- 设计模式大纲整理——编目、分类、选择与使用
- 软件工程转计算机科学与技术,计算机与软件工程学院本科生转专业实施方案