一文读懂CSS盒子模型_麦站网站模板

题外话

有人说CSS很好学，确实，因为它上手很容易，也有人说CSS难学，也有一定道理，因为它不正交，属性多，性价比低。

那么新手要如何学CSS呢，我个人觉得没有捷径可言！只能舍得下功夫，多写，多背，多做练习，多模仿，就一定能够学会CSS。

今天给大家介绍一下CSS的一个特别基础，也是特别重要的概念：盒子模型

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距（padding），其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

元素的宽度和高度

元素框的总宽度= element的width + padding-left + padding-right+ margin-left +margin-right+border-left + border -right

元素框的总高度= element的height+ padding-top+ padding-bottom+ margin-top+margin-bottm+border-top+ border - bottom

文档流流动是HTML元素，也就是说，所有的HTML元素按照[流]的方式排列在浏览器中。而对应文档流中的每一个元素，有两个重要概念要引出：块元素和行内元素。它们是用来定义HTML元素在文档流中的显示规则的。

IE怪异盒子模型

所谓IE盒子模型，就是之前IE浏览器实现的一种怪异的盒子模型，怎么怪异呢？我们看下边的代码

div {    width: 100px;    height: 100px;}

IE在解析的时候会按照这个规则解析

width = content - width + padding - width + border - width

height = content - height + padding - height + border - height

IE怪异盒子模型了解即可，现在是2020年了，如果一个公司还让你兼容IE8，我劝你早做打算！

我们来看下MDN对外边距合并的定义。

块元素的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距合并。

注意只是上下，没有说左右。而且是针对块级元素说的。

// 例子1class="up">我在上面

请问在html语法中，有没有压缩段落文本的字符间距的标记（或者谁能告诉我在网页制作中如何能压缩字符间距呢？）

这包括段落样式、字符样式等，通过预设的样式，可以快速统一版面的字体、颜色和间距。 8. **页眉和页脚**：页眉常用于放置报纸名称、日期等信息，页脚则可以用来标注页码。Word提供了丰富的选项来定制它们。 9. **...

会把单元格中的字符、数字或表达式的计算结果都当成文本来处理，而对于文本有特殊要求时，使用该类型就不能满足我们的需求了，例如：在同一单元格中显示不同的字体样式，字体颜色，控制段落之间的行间距，段落间距等...

HTML段落,换行,字符实体html段落标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：段落HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本...

文本格式化标签分为字体标签、文本修饰标签。字体标签和文字修饰标签包括对于字体样式的一些特殊修改，段落格式化...理解格式化标签中文本修饰标记，计算机输出标签，引用和术语标签的语法及字体font标签语法及使用。

一文读懂CSS盒子模型