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标签写成一行，空白符消失，菜单之间也就紧凑起来了。

　　解决方法：我们要明白空白符归根结底是一个字符，只要我们将ｕｌ中的字符的大小设置位０，那么空白符也就不会存在了，但是这是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元素带来的空白符问题。）

display详解的更多相关文章

  1. CSS display详解

    1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行 ...

  2. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  3. 详解CSS display:inline-block的应用（转）

    详解CSS display:inline-block的应用   阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-b ...

  4. html5的float属性超详解（display，position， float）（文本流）

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  5. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  6. [转]keil使用详解

    第一节 系统概述 Keil C51是美国Keil Software公司出品的51系列兼容单片机C语言软件开发系统,与汇编相比,C语言在功能上.结构性.可读性.可维护性上有明显的优势,因而易学易用.用过 ...

  7. Android PopupWindow Dialog 关于 is your activity running 崩溃详解

    Android PopupWindow Dialog 关于 is your activity running 崩溃详解 [TOC] 起因 对于 PopupWindow Dialog 需要 Activi ...

  8. Docker命令详解

    Docker命令详解   最近学习Docker,将docker所有命令实验了一番,特整理如下: # docker --help Usage: docker [OPTIONS] COMMAND [arg ...

  9. linux查看端口及端口详解

    今天现场查看了TCP端口的占用情况,如下图   红色部分是IP,现场那边问我是不是我的程序占用了tcp的链接,,我远程登陆现场查看了一下,这种类型的tcp链接占用了400多个,,后边查了一下资料,说E ...

随机推荐

  1. Coalesce (MS SQL Server)——取指定内容（列）中第一个不为空的值

    oalesce 获得参数中第一个不为空的表达式. 语法:        COALESCE ( expression [ ,...n ] ) 例子:CREATE TABLE wages          ...

  2. npm 和package.json 文件

    你可能还记得使用vue-cli 创建vue项目.当创建项目完成后,我们进入到项目目录,启动cmd命令窗口,输入npm install,它就会安装一堆东西(依赖),然后再输入npm run dev, 我 ...

  3. 二、Java多人博客系统-演变

    任何项目都是由小到大,逐步演变的.自己写的这个博客系统也不例外. 更新日志如下: 一.2014年底-2015年初 功能及技术: 1.定位为个人网站,介绍自己情况和发布文章等. 2.首页模块有:个人简介 ...

  4. Redis宕机的问题

    在主从模式下宕机要分为区分来看: slave从redis宕机 ​ 在Redis中从库重新启动后会自动加入到主从架构中,自动完成同步数据: ​ 如果从数据库实现了持久化,只要重新假如到主从架构中会实现增 ...

  5. Spring 使用介绍（十三）—— Bean的生命周期

    一.概述 Spring Bean的完整生命周期从创建Spring容器开始,直到最终Spring容器销毁Bean,生命周期时序图如下: 二.生命周期接口分类 Bean的生命周期经历了多个接口方法的调用, ...

  6. linux缺失gcc的安装方法

    linux安装gcc操作 1.查看linux是否有gcc文件 这个是没有挂载的 2. 使用df,查看系统光盘的挂载位置 3.卸载分区 umount /dev/sr0 4.将redhat系统光盘重新载入 ...

  7. Django ORM模型

    Object Relational Mapping(ORM) 一,ORM介绍 1, ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象 ...

  8. LOJ2251 [ZJOI2017] 树状数组【线段树】【树套树】

    题目分析: 对于一个$add$操作,它的特点是与树状数组的查询相同,会给$1$到它自己产生影响,而$query$操作则会途径所有包含它的树状数组点.现在$add$操作具有前向性(不会影响之后的点).所 ...

  9. 洛谷P1216数字三角形题解

    题目 这道题是一个典型的DP,可以用倒推,顺推的方法,来解这道题.当然用不同的方法他的循环次序是不一样的,所以我们一定要深刻地理解题目的大意,再采用状态转移方程与边界每次求出最优解,并记录循环一遍后就 ...

  10. 【XSY2759】coin DP 线性插值

    题目描述 有\(n\)种面值不同的硬币,每种有无限个,且任意两个\((x,y)\)要么\(x\)是\(y\)的倍数,要么\(y\)是\(x\)的倍数. 你要取\(m\)元钱,问你有多少种不同的取法. ...