可以使用{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. C++ STL——常用算法

    目录 一 常用查找算法 二 常用遍历算法 注:原创不易,转载请务必注明原作者和出处,感谢支持! 注:内容来自某培训课程,不一定完全正确! 一 常用查找算法 /* find算法 查找元素 @param ...

  2. 【Makefile】Makefile的自动化变量$@、$^ 、$<等

    所谓自动化变量,就是这种变量会把“模式”中所定义的一系列的文件自动地挨个取出,直至所有的符合模式的文件都取完了.这种自动化变量只应出现在规则的命令中. $@ 表示规则中的目标文件集.在模式规则中,如果 ...

  3. 发布机制-灰度发布-例子:Gmail Labs

    ylbtech-发布机制-灰度发布-例子:Gmail Labs Gmail Labs是一个新特性橱窗,用户可以自己选择一些未正式发布的新特性进行体验,不喜欢可以关闭,在这个过程中,吃了螃蟹,也当了Go ...

  4. springmvc快速入门(注解版本)

    1)springmvc快速入门(传统版) 步一:创建springmvc-day02这么一个web应用 步二:导入springioc,springweb和springmvc相关的jar包 ------- ...

  5. SHA加密

    import java.security.MessageDigest; /** * 提供SHA加密 */ public class SHAUtil { // 进行SHA-1加密 public stat ...

  6. PHP模板引擎Smarty内建函数section,sectionelse用法详解

    本文实例讲述了PHP模板引擎Smarty内建函数section,sectionelse用法.分享给大家供大家参考,具体如下: section 是 Smarty 模板中除了 foreach 以外的另一种 ...

  7. Linux开机启动过程分析

    开机过程指的是从打开计算机电源直到LINUX显示用户登录画面的全过程.分析LINUX开机过程也是深入了解LINUX核心工作原理的一个很好的途径. 启动第一步--加载BIOS 当 你打开计算机电源,计算 ...

  8. React Native解决安卓图片被挤压

    Bug如下图所示: iOS显示正常,而安卓出现图片被挤压上去. 最后的解决方法: 比如你的 图片 是 750 x 513 那么 你设置样式的时候 width 为 屏幕的宽 ,高度为 屏幕的 宽 / ( ...

  9. 【POJ - 3641】Pseudoprime numbers (快速幂)

    Pseudoprime numbers Descriptions 费马定理指出,对于任意的素数 p 和任意的整数 a > 1,满足 ap = a (mod p) .也就是说,a的 p 次幂除以  ...

  10. 整合AD RMS与EX 2010。

    1.点击开始菜单, 选择所有程 序,展开 Mi cros oft  Excha nge  Server  2010 ,打开Excha nge Ma na gement Cons ol e,选择收件人配 ...