可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素。

{display:inline-block}又是怎么回事,根据张鑫旭老师《CSS的世界》中的解释可以理解为,每个元素都有两个盒子,外在的盒子和内在的盒子,外在的盒子负责元素是可以一行显示,还是只能换行显示,内在的盒子负责宽高、内容的呈现。

{display:block}

{display:inline}

{display:inline-block}。

实际中我们常常见到的{display:table} {display:inline-table}那又是怎么回事呢?

首先,我们要区分一个概念:“块级元素”与{display:block}不是一个概念。常见的块级元素<li>默认的值为list-item,而<table>元素的默认的display的值为table。

{display:table}代表着此元素会作为表格来显示,表格前后带有换行符

{display:block} 此元素将显示为块级元素,此元素前后会有换行符。

{display:none}此元素不会被显示

{display:table-cell}

CSS中为什么有的元素能够设置高度,而有的元素却不能设置高度与宽度?的更多相关文章

  1. css中的流,元素,基本尺寸

    流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level e ...

  2. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  3. 简要的谈一谈我对CSS中长度单位的理解

    CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...

  4. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  5. CSS中默认被继承的属性

    在CSS中,所有属性都可以被继承,只需要显式的设置属性值为inherit即可.如果不设置该属性,CSS大部分属性默认不会从父元素继承而是设置初始值(initial value),但是有一部分属性,默认 ...

  6. HTML与CSS中的文本个人分享

    文本 标题元素 注意: 在一个HTML页面中最好只使用一个<h1>标题 因为浏览器只会抓取一个多了没用 示例代码: <body> <!-- 标题元素 - <h1&g ...

  7. 深入学习CSS中如何使用定位

    CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...

  8. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  9. CSS中设置元素的圆角矩形

    圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...

随机推荐

  1. ios-Realm数据库的使用

    [集成 Realm] 本 Demo 使用 OC 创建,所以先进入 Realm 官网 (我记得之前都是有官方中文教程的,但现在最新版没有中文了),到 Objective-C -> Getting ...

  2. 图解Python 【第六篇】:面向对象-类-进阶篇

    由于类的内容比较多,分为类-初级基础篇和类-进阶篇 本节内容一览图: 一.类成员修饰符 每一个类的成员都有两种形式: 公有成员,在任何地方都能访问 私有成员,只能在类的内部才能访问 1.1.私有成员和 ...

  3. LC 969. Pancake Sorting

    Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...

  4. CollectionUtils

    public class CollectionUtils { /** * 数组是否包含元素 * @param arr * @param str * @return */ public static b ...

  5. 配置 admin 页面

    创建 blog 的管理后台 首先是 blog 这个 App,其中定义了 3个 Model,分别是 Category.Post 和 Tag.先创建 admin 页面,其代码需要写到 blog/admin ...

  6. 精通Dubbo——dubbo2.0源码中的设计模式与SPI介绍

    Dubbo源码包介绍当我们从github把Dubbo源码下载下来之后有如下源码包   下面来说明每个包的作用,以便我们有目的的阅读代码 dubbo-admin dubbo管理平台源码包,用来管理dub ...

  7. kettle转换和任务的基本使用

    0 创建转换 并保存0816_em.ktr 1 主对象树中选择DB连接,创建2个DB连接 2 创建表输入 核心对象树中选择输入>表输入 3 核心对象树中选择输出>插入/更新表 并连线 4 ...

  8. Spring-Kafka —— 消费如何达到最高的吞吐量

    首先简单的介绍一下消费者对topic的订阅.客户端的消费者订阅了topic后,如果是单个消费者,那么消费者会顺序消费这些topic分区中的数据,如果是创建了消费组有多个消费者,那么kafak的服务端将 ...

  9. redis单机版无法启动java程序解决

    1.注释掉 bind 127.0.0.1 2.kill-9 杀死进行 3.redis-server + 配置文件进行重启,

  10. php进程创建慢导致的502

    转自: 作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除地址:http://www.jackxiang.com/post/926 ...