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. Circular view path xxx would dispatch back to the current handler URL,Check your ViewResolver setup

    Circular view path xxx would dispatch back to the current handler URL 通过原因分析,造成问题有两个因素:1). 缺省转发, 2). ...

  2. Go-day01

    Go-实现hello_world package main import "fmt" func main() { fmt.Println("hello world!&qu ...

  3. Linux最常用的基础命令

    Linux最常用的基础命令个人总结 计算机基础知识: 32bit和64bit系统的区别.系统运行机制 32bit=内存的最大寻址空间是2**32,也就是说最大只能使用4GB的内存64bit=内存的最大 ...

  4. as依赖解决报错

    Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.android.suppor ...

  5. urllib 学习二

    编码解码: python2 用法: urllib.urlencode() 编码 urlparse.parse_qs() 解码 python3 用法: urllib.parse.urlencode() ...

  6. Netty中的三种Reactor（反应堆）

    目录: Reactor(反应堆)和Proactor(前摄器) <I/O模型之三:两种高性能 I/O 设计模式 Reactor 和 Proactor> <[转]第8章 前摄器(Proa ...

  7. 如何优雅地使用Sublime Text3

    此文非原创,出处见文章结尾. 一.Sublime Text 3插件安装 优雅使用Sublime Text,插件则是不可缺少的存在:而插件的备份就显得非常的重要(譬如:各平台同步:更换系统/电脑,迅速使 ...

  8. mssql 数据库表行转列，列转行 比较经典

    --行列互转 /******************************************************************************************** ...

  9. wordcloud制作logo

    准备工作: 1.txt文本(ASCII) 2.参照图(色差大或自行调整扫描参数) 3.pycharm安装wordcloud 源码: from os import path from PIL impor ...

  10. 启用SQL Server 2014 中的OLE 自动化功能

    企业中很多架构都在快走向Service概念,尽量采用平台服务方式提供给各个Application使用.因此,个系统都会去呼叫像是Web Service,WCF或ODATA…等等各种类型的服务.一般来说 ...