1、块级元素

HTML标签通常被分为两类:块级元素内联元素

“块级元素”和“display为block的元素”不是同一个概念。例如<li>元素默认的display值为list-item,<table>元素默认的display值为table,但它们都是“块级元素”

块级元素基本特征一个水平流上只能单独显示一个元素,多个块级元素则换行显示

2、css的“盒”世界

就像只有男性和女性一样,css世界原本只有块级盒子内联盒子块级盒子负责结构,内联盒子就负责内容。也就是所有的“块级元素”就只有一个“块级盒子”。

然而list-item默认要显示项目符号,一个盒子解释不了,于是生成一个附加的盒子,学名“标记盒子”,专门用来放原点、数字、这些项目符号的。

真正特别的是display:inline-block元素,穿着inline的皮藏着block的心。于是有增加了一个盒子,也就是每个元素都是两个盒子,外在盒子和内在盒子(容器盒子)外在盒子负责元素是可以一行显示,还是只能换行显示;内在盒子(容器盒子)负责宽高、内容呈现等。

按照display的属性值不同,值为block的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成,值为inline-block的元素由外在的“内联盒子”和内在的“块级容器盒子”组成,值为inline的元素则内外均是"内联盒子"。

内在盒子(容器盒子)又分为4个盒子:content-box、padding-box、border-box、margin-box。

文章内容摘自:《CSS世界》

CSS世界中的“盒子”的更多相关文章

  1. CSS 世界中的方位与顺序

    在 CSS 中,我们经常会与各种方向方位打交道. 譬如 margin.padding,它们就会有 margin-left.margin-right 或者是 padding-left.padding-r ...

  2. CSS世界中那些说起来很冷的知识

    CSS世界中那些说起来很冷的知识 最近读了张鑫旭的新书<CSS世界>收获了不少对CSS的深度理解 也正值个人在公司内部进行部分章节的内容分享,于是顺带着直接把我即将分享的内容先给大家过过目 ...

  3. 《CSS世界》读书笔记(十五)

    <!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...

  4. 改变CSS世界纵横规则的writing-mode属性

    改变CSS世界纵横规则的writing-mode属性 这篇文章发布于 2016年04月27日,星期三,23:12,归类于 css相关. 阅读 8292 次, 今日 71 次 by zhangxinxu ...

  5. 《CSS世界》读书笔记(一)

    <!-- <CSS世界> 张鑫旭 著 --> CSS世界构建的基石是HTML,而HTML最具代表的两个基石<div>和<span>正好是CSS世界中块级 ...

  6. 《CSS世界》学习笔记(一)

    <CSS世界>,张鑫旭著,人民邮电出版社,2017年12月第一版. 1.P9二维码链接文章的demo值得一看,可以实现有关“某些区域颜色始终保持一致”的效果. P9二维码所链接文章的一个d ...

  7. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  8. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  9. 《CSS世界》读书笔记(十六)

    <!-- <CSS世界>张鑫旭著 --> line-height与“垂直居中” line-height 可以让单行或多行元素近似垂直居中,原因在于 CSS 中“行距的上下等分机 ...

随机推荐

  1. [CSS]CSS中使用span和div遇到的问题

    一. span和div的区别 1.span是行级元素,div是块级元素2.span占用的宽度是内容的宽度,而div默认是一行.所以一般在页面中,只有一行或不到一行文字用span,元素占据多行时用div ...

  2. django权限之二级菜单

    遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None   反向查询,起名用的 ...

  3. Python之批量读取文件【面试必学】

    python的os模块可以实现普遍的操作系统功能,并且和平台无关.以下为实现根目录下文件的批量读取. os.listdir(dirname)可以列出dirname下的目录和文件,依次读取相应的文件即可 ...

  4. 对react的研究0

    对react的研究1.class HelloMessage extends React.Component { render() { return ( <div> Hello {this. ...

  5. 方法返回前面有if - else if - else ,最终返回值是?

    -(NSString *)testA{ int a = ?; ) { return @"a大于5"; } ) { return @"a不大于5"; } retu ...

  6. Python_013(面向对象概念)

    一.面向对象 1.面向对象几个概念问题: a:类:具有相同属性和技能的一类事物.用代码表示就是,我类里面有一些静态变量和方法是大家共有的; b:对象:具体的类的表现.在代码中就是,调用类的方法或变量传 ...

  7. apache如何发布地图服务

    svg jpg Tomcat和apache是什么关系呢?:https://www.cnblogs.com/zangdalei/p/8057325.html geoserver又是怎么来的呢? Tomc ...

  8. vue双向数据绑定对于数组和新增对象属性不能监听的解决办法

    出现数组不能按照索引进行跟新的原因是处于性能考虑的,但是整体数组的增加删除是可以监听到的:对于对象新增属性不能监听是因为没有在生成vue实例时候放进watcher收集依赖. 首先我们先来了解vue数据 ...

  9. 不间断电源(UPS)

    UPS电源一般指不间断电源 UPS(Uninterruptible Power System/Uninterruptible Power Supply),即不间断电源,是将蓄电池(多为铅酸免维护蓄电池 ...

  10. 432D Prefixes and Suffixes

    题目大意 给你一个串 对于一个子串如果它既是前缀又是后缀 输出它的长度以及它在原串中一共出现了多少次 分析 对于既是前缀又是后缀的判断和126B相同 然后我们只需要记录每个不同的z[i]出现了多少次 ...