可以使用{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. 修改Visual Studio的默认模板

    如果我在Visual Studio创建的项目中每次新建一个文件,自动生成注释或者是结构的话,那么就需要改下默认的模板了.下面以vs2013为例 我们添加的文件有很多种,这里就举例3种,CSharp类文 ...

  2. mybatis之动态SQL操作之删除

    /** * 持久层 */ public class StudentDao { /** * 动态SQL--删除 */ public void dynaSQLwithDelete(int... ids) ...

  3. Svn CleanUp failed–previous operation has not finished

    Svn CleanUp遇到错误,解决办法: 下载sqlite3.exe 放至要CleanUp的目录中, 命令行进入sqlite3.exe所在目录, 连接数据库 删除工作队列,(此时再CleanUp提示 ...

  4. 线程池使用Callable示例【我】

    实际工作中可以把下面的代码直接拿过去改改即可 package threadtest; import java.util.ArrayList; import java.util.HashMap; imp ...

  5. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-5.PageHelper分页插件使用

    笔记 5.PageHelper分页插件使用     简介:讲解开源组件,mybaits分页插件的使用 1.引入依赖             <!-- 分页插件依赖 -->          ...

  6. CentOS7或CentOS8 安装VirtualBox Guest Addon缺少kernel-headers的解决办法

    CentOS7或CentOS8 在Oracle VM VirtualBox中安装Guest Addon时,如果缺少kernel-headers和相应的编译库,会提示出错. "kernel h ...

  7. Element-UI 框架 el-scrollbar 组件

    Element-UI 框架 el-scrollbar 组件:https://juejin.im/post/5c83d5ac5188257e1c4dc9e7

  8. merge效率

    测试merge效率   测试说明: MERGE是oracle提供的一种特殊的sql语法,非常适用于数据同步场景,即: (把A表数据插到B表,如果B表存在相同主键的记录则使用A表数据对B表进行更新) 数 ...

  9. Linux 网络 I/O 模型简介(图文)(转载)

    Linux 网络 I/O 模型简介(图文)(转载) 转载:http://blog.csdn.net/anxpp/article/details/51503329 1.介绍 Linux 的内核将所有外部 ...

  10. MySQL慢查询—开启慢查询

    ###一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. ###二.参数说明 slow_query_log 慢查询开启状态 ...