可以使用{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. Kettle源码学习(一)——把Kettle项目跑起来

    kettle(pentaho data integration),是一款开源的C/S版的ETL工具,最近打算学习一下kettle源码,并自己写一个mini kettle,并改造成基于事件触发的流处理模 ...

  2. delphi 需要应用一个单元是,需要在工程里面先添加单元

    delphi 需要应用一个单元是,需要在工程里面先添加单元

  3. SQL Server 时间戳与时间格式互相转换

    时间戳(Unix timestamp) 是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数. Unix时间戳不仅被使用在Unix系统.类Unix系统中,也 ...

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

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

  5. 线程回调,线程中的队列,事件,greenlet模块,gevent模块,自定义补丁, 单线程实现并发,协程

    1.线程回调 在线程池/进程池每次提交任务,都会返回一个表示任务的对象,Future对象Future对象具备一个绑定方法,add_done_callback 用于指定回调函数 add 意味着可以添加多 ...

  6. JAVA上传文件到数据库

    前端代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> &l ...

  7. IntelliJ IDEA 2019.2.1 破解教程, 最新激活码(激活到2089年8月,亲测有效,持续更新中...)

    当前最新版本 IDEA 2019.2.1 本来笔者这边是有个正版激活码可以使用的,但是,2019.9月3号的时候,一些小伙伴反映这个注册码已经失效了,于是拿着自己的 IDEA, 赶快测试了一下,果不其 ...

  8. java 8 Base64用法

    Java 8的java.util套件中,新增了Base64的类别,可以用来处理Base64的编码与解码,用法如下: final Base64.Decoder decoder = Base64.getD ...

  9. 使用JedisPool资源池操作Redis,并进行性能优化

    一.使用方法 ----------------------------------------- private volatile static JedisPool pool = null; //本地 ...

  10. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...