![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
CSS盒模型：将页面所有元素表示为一个个矩形的盒子，CSS决定这些盒子的大小，位置以及属性。
<h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<header>、<main>、<footer>、<aside>、<nav>、<section>、<table>、<pre>
<a>、<span>、<em>、<strong>、<img>、<input>、<label>、<textarea>、<select>、<button>、<code>
1. 写法：display: inline-block
2. 特性：
3. inline-block缝隙 css常见样式二
4. display的值
②：浮动元素和绝对定位元素的外边距不会折叠。
PS:
PS：通过设置margin让元素居中
1.3.1 设置边框的值
1.3.2 边框常用属性
实现效果：
参考：
https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-6-10-45-8.pdf
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
目前盒子模型分为两种。（1）w3c标准盒子模型 （2）ie盒模型盒子模型分为 内容content + 内边距padding + 边框border + 外边距margin 四部分。
w3c标准盒子模型 与 ie盒模型 的区别：
标准盒子模型的 宽度width 和 高度 height 只包含 content内容部分，不包含padding内边距 和 边框border。
ie盒子模型 宽度width 和 高度 height 包含 内容+内边距+边框三部分。
显然，盒模型比我想象的，比我最开始在前端课程中学到的其实要复杂得多。
我将现阶段学到的内容与过去学习所留下的印象进行对比，得出了如下我以为CSS盒模型中的难点和容易被忽视的点。
它是一切开始的基础
在MDN的文章中，盒模型被分为 标准盒模型 和 替代盒模型 。
通常我们一开始学习的盒模型是标准盒模型，它的width和heigth属性所设置的是content的宽度和高度，而不是盒子部分的宽度和高度（把border和它所围起来的部分叫盒子部分）
所以在练习布局的时候，我们有时候会觉得这个width和heigth很怪，并不能很方便直接地将我们心中所想象的布局表达出来，有时甚至需要计算。
而替代盒模型更符合我们的直觉。替代盒模型中的width heigth所指即为border所包括部分的width heigth.
将浏览器默认的标准盒模型改为替代盒模型
margin可以有负数，而padding不可以为负数。
负数意味着样式会重叠入侵。
[图片上传失败...(image-b2c4e1-1642049365894)]
可以参考视频: CSS外边距塌陷 - Web前端工程师面试题讲解
折叠的规则很好理解，大的覆盖小的，长的覆盖短的。
比如A和B的外边距折叠，A的外边距为10， B的外边距为20，那么结果是AB的间距为20。
外边距重叠的情况一共有三种。
之所以是垂直方向，是因为折叠发生在block元素上，block元素并不存在水平相接的情况。
对于Inline元素，比如说两个水平相接的span标签，实测是不会折叠的。
这个有点复杂，MDN的说法如下：
举例如下:
设置了border:solid, 正常：
将border:solid设置为none后，出现了折叠。（可以理解为偏移的参照系变化了，未设置Border，参照变成了上面的divB）
更为深入的探究，等往后遇到了再说吧。
参考： MDN盒模型
![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png)
