css - 元素的显示模式

块元素（block）

块元素是指：

1.独占一行

2.div、ul、form上下之间没有间隙，而p、h等元素有一定的默认间距

2.可设置宽高、内外边距，默认宽度是其父块元素的宽度、默认高度是自身内容的高度（不会继承高），如果自身内容是空的，则高度为0

3.如果块元素明确设置的宽高小于它包含的元素的宽高，那么它包含的元素会溢出，而它自己不会被撑大

5.text-align对块元素居中无效

6.设置未指定宽度的子块元素的margin后，子块元素的宽度=父元素宽-子元素左右margin。但高度无法这样计算

.box{
    width:100px;    
    height:100px;
    background:#000;
}

.box>div{
    height:20px;
    background:#b6ff00;
    margin:0 15px;
}

<div class="box">      
    <div></div>
</div>

7.设置未指定宽度的子块元素的padding后，子块元素的原始宽度=父元素宽-padding

.box{
    width:100px;    
    height:100px;
    background:#000;
}

.box>div{
    height:20px;
    background:#b6ff00;
    padding:0 15px;
}

8.div、li可以包含任何显示模式的元素、但p和h不能包含块元素，它们只能包含行/行内块元素（如果强行在p里包含div，查看浏览器的源代码会发现会生成多余的标签）

9.块元素：div、p、h、ul、ol、dl、form、fieldset 、hr、pre

行内元素（inline）

行内元素是指：

1.并排一行。

2.每个行内元素之间会保持几像素的空白间隙。

存在空白间距是由于在源代码中每个结束标签之后有回车换行符，换行符虽然是空格，但也存在继承的fontsize，解决办法就是将该行的fontsize设为0（即父元素的fontsize设为0，使空白回车符从这个父元素继承fontsize=0），再单独为子行内元素设置fontsize即可。

span {
  font-size:16px;
}
 
.box {
    font-size: 0;       
}
<div class="box">
    <span>aaa</span>
    <span>bbb</span>
</div>

3.块元素与行内元素上下之间没有空白间隙

4.text-align设置在块、行内块元素上，对行内、行内块元素有效

5.可设置左右的内外边距，设置上下间距无效。建议禁止使用margin、padding，因为这很可能会导致布局混乱

6.只能包行内元素、不能包含块、行内块元素，当行内元素包含块、行内块时，内容会溢出

7.手动设置宽高无效，img除外。

8.默认宽高是在它包含了内容的前提下等于它自身的font-size大小，它存在以下两种情况：

1.它的子元素高于它

由于行内元素一旦包含内容，那么它的高度就来自于它自身的font-size。所以，一旦它包含内容的高度大于它自己的高度，它子元素的第一行文本、包括文本的行高顶底边距就会溢出

1.它的行高小于它的font-size时，那么文本在线顶的行高区域内就无法装载得下，文本会在定死的行高限定区域内被挤压

9.行内元素：span、a、img、b、s、u 、i、super、sub、label

*a元素是行内标签，根据规范是不能包含块元素的，但很多时候都需要在a元素中插入一些块元素，而浏览器对此有不同的解释。最佳实践应该是在需要a元素包含块元素时，将a元素display为block或inline block，而inline-block和block又有很大的区别，看下面的代码

a{
     display:inline-block;
     background: #001c9f;
 }

div{
    height:20px;
}

<a href="#" class="link">
    <div></div>
</a>

将a元素设为行内块后，它的默认宽高来自于它包含的内容，而它包含的内容只有高没有宽，所以在浏览器上就看不见这两个元素。

a{
     display:block;
     background: #001c9f;
 }

div{
    height:20px;
}

把a元素改为块元素后，它会独占一行，它的默认宽度就是浏览器的宽度，而它里面的div则从它的宽度上继承。

行内块元素（inline-block）

行内块元素是指：

1.并排一行。

2.行内块元素之间会保持几个像素的空白间隙。行内元素与行内块之间也会保持几个像素的空白间隙。

3.块元素与行内块元素上下之间没有空白间隙

4.默认宽高为其内容的宽高，它的内容包括文本或其它行内、行内块元素。

5.可设置宽高、内外边距

6.text-align设置在块、行内块元素上，对行内、行内块元素有效

7.行内块元素：input、select、textarea、button

原生的行内块

div{
    display:inline;
    display:inline-block;
}

span{
    display:inline-block;
}

为了方便理解，可以把文本、span、img、del、u、b、a、input、select、textarea、button、td等行内、行内块元素称为原生的行内、行内块元素，而把那些通过display:inline或inline-block转换成行内、行内块的容器元素（span、div）称为非原生的行内、行内块元素。

切换显示模式 display

取值：block（显示为块元素） | inline（显示为行内元素） | inline-block（显示为行内块元素） | none（不显示该元素，隐藏后连其位置也不保留）

设置：所有元素

应用：所有元素

作用：设置元素的显示模式

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            color: #ffffff;
            text-decoration: none;
        }

ul {
            width: 900px;
            padding: 0 30px;
            overflow: hidden;
            background: #000000;
            margin: 10px auto;
        }

ul li {
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            background: #ff6a00;
        }

ul li a {
            display: inline-block; /*a标签是行内元素，为了使它的宽高和li一样，必须转换为块/行内块元素*/
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">寒食</a></li>
        <li><a href="#">1984</a></li>
        <li><a href="#">山魈</a></li>
        <li><a href="#">月蚀</a></li>
        <li><a href="#">邪教</a></li>
        <li><a href="#">暴政</a></li>
    </ul>
</body>

替换元素

img、input属于替换元素，img的内容来自图片的替换，它仅是一个占位的符号，而object、video、textarea、input、buttob也靠指定的内容（如input的单选、多选、提交按钮等）对其进行替换 。

非替换元素

非img、input的元素都是非替换元素

Css - 学习总目录

Css - 元素的显示模式的更多相关文章

  1. 课时92.CSS元素显示模式转换（掌握）

    我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...

  2. CSS中元素的显示模式

     在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level).块级元素(block-level). 1,首先介绍什么是行内元素,什么又是块级元素? 1.1,行内元素就 ...

  3. CSS元素显示模式

    CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...

  4. CSS复合选择器，元素的显示模式，CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  5. CSS元素的几种显示模式

    元素的显示模式 元素的显示模式就是元素以生么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>. HTML元素一般分为块元素和行内元素. 块元素 常见的块元 ...

  6. H5 30-CSS元素的显示模式

    30-CSS元素的显示模式 我是div 我是段落 我是标题 我是span 我是加粗 我是强调 <!DOCTYPE html><html lang="en"> ...

  7. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  8. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  9. css 元素溢出

    css元素溢出: 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: (1)visible 默认值 内容不 ...

随机推荐

  1. redis4.0.6集群搭建

    文件环境:CentOS7 + redis4.0.6 先去官网下载redis:https://redis.io/,然后上传到你的虚拟机,我上传到了/mysoft 先解压->然后进入主目录-> ...

  2. mysql 5.7安装准备

    在5.5之后的mysql安装中,需要使用cmake来指定安装参数,下面列出关于cmake的几个常用参数: CMAKE_INSTALL_PREFIX:指定MySQL程序的安装目录,默认/usr/loca ...

  3. 【清北学堂2018-刷题冲刺】Contest 5

     这三个题写了一天半,第一个题写了大概一整天.出题人劝我从后往前写,我不听,结果T1想了+调了一天QWQWQ Task 1:序列 [问题描述]  定义一个"好的序列"为一个长度为M ...

  4. Go数据类型和变量

    一:Go数据类型 1.1 Go语言按照分类有以下几种数据类型 布尔型 布尔型的是一个常量true或者false 数字类型 整型int和浮点型 float32, float64 字符串类型 字符串就是一 ...

  5. 2019年 十款Mac上必备的实用软件列表

    2019年 十款Mac上必备的实用软件列表 文章来源:风云社区 (www.scoee.com 两千多款Mac软件下载) 1.Parallels Desktop 如果你还是想在Mac上使用Windows ...

  6. JDK1.5以后的版本特性

    一.JDK1.5新特性 1.泛型:泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法.可以在编译的时候就能 ...

  7. SSH框架新线程下执行数据库持久化时 No Session found for current thread

    架构:SSH框架 问题:多线程下的持久化操作 异常No Session found for current thread出现环境: SSH框架,采用声明式事务, 通过sessionFactory.ge ...

  8. python js(JavaScript)初识

    ####################总结############## 引入: 可以在body标签中放入<script type=”text/javascript”></scrip ...

  9. cmd命令查看当前IIS运行的网站iisapp appcmd

    xp,2003中用的命令是:iisapp -a 2007,2008,2012系统中: cmd命令行进入%windir%\system32\inetsrv\目录下 运行appcmd.exe list w ...

  10. ACM-ICPC 2018 南京赛区网络预赛 E AC Challenge（状压dp）

    https://nanti.jisuanke.com/t/30994 题意 给你n个题目,对于每个题目,在做这个题目之前,规定了必须先做哪几个题目,第t个做的题目i得分是t×ai+bi问最终的最大得分 ...