web前端入门到实战：CSS的逻辑属性与盒子模型
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
图示如下：
从上图可以发现，当我们设置了padding-right: 100px;的时候，不同的书写规则，展示效果是不一样的。
在最开始的时候，HTML与CSS只服务于英语国家，但是随着互联网的发展，逐渐各个不同书写规则的国家也开始流行了起来。
我们原来的CSS逻辑属性是按照物理逻辑，从上(top)、右(right)、下(bottom)、左(left)划分的。
那么按着这个规则去修改文本属性时，就会出现上述这种不符合语法规则的状态。
大概也是基于这个原因，所以W3C发布了新的逻辑属性与值。
新旧逻辑属性对比
CSS新旧逻辑属性是完全不同的两种模型。
我们首先来看看新旧有的逻辑属性的对比图示：
左旧右新
通过上图可以得知新旧逻辑属性对应关系如下：
旧的逻辑属性
新的逻辑属性
margin-top
margin-block-start
margin-right
margin-inline-end
margin-bottom
margin-block-end
margin-left
margin-inline-start
border-top
border-block-start
border-right
border-inline-end
border-bottom
border-block-end
border-left
border-inline-start
padding-top
padding-block-start
padding-right
padding-inline-end
padding-bottom
padding-block-end
padding-left
padding-inline-start
width
inline-size
height
block-size
由上表可以得知，把Y轴方向的属性都改为了block，X轴方向的属性都改为了inline。
对于不同语系的国家，书写顺序会可能有很大的差异，意思就是block跟inline的方向不同。例如：
在英语国家 padding-inline-start = padding-left
在阿拉伯padding-inline-start = padding-right
在日本 padding-inline-start = padding-top
这就意味着旧的逻辑属性，在某些国家里会变得不合常理。
CSS定位
CSS的定位属性变化如下：
旧的逻辑属性
新的逻辑属性
top
inset-block-start
bottom
inset-block-end
left
inset-inline-start
right
inset-inline-end
例子如下：
/* 旧的逻辑属性 */
.popup{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
/* 新的逻辑属性 */
.popup{
position:fixed;
inset-block-start:0; /*top - in English*/
inset-block-end:0; /*bottom - in English*/
inset-inline-start:0; /*left - in English*/
inset-inline-end:0; /*right - in English*/
}
/* 新的逻辑属性支持简写 */
.popup{
position:fixed;
inset:0 0 0 0; /*top, right, bottom, left - in English*/
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
CSS浮动
浮动float的属性也改了。
旧的逻辑属性
新的逻辑属性
float: left
float: inline-start
float: right
float: inline-end
text-align
文本text-align的属性也改了。
旧的逻辑属性
新的逻辑属性
text-align: left
text-align: start
text-align: right
text-align: end
direction
除了writing-mode，还有一个排版属性就是direction，跟writing-mode类似，不一样的是writing-mode是控住网页布局方向的，而direction是控制文本对齐方向的。属性如下：
direction: ltr;
默认值，让文本和其他元素从左到右显示。
direction: rtl;
让文本和其他元素从右到左显示。
吐槽一下，看到这里的切图仔们，抓紧 跑路 重构吧，等哪天此属性正式被启用，就真的GG了。不过我想应该会立个属性来选择性开启物理属性还是逻辑属性，不然这对前端来说将会是一场灾难！
CSS的盒子模型
基础盒模型(CSS basic box model)
当浏览器对一个render tree进行渲染时，浏览器的渲染引擎就会根据基础盒模型(CSS basic box model)，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。
我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来包裹的，这些就是盒子
$$('*').forEach(e => {
e.style.border = '1px solid';
})
图示如下：
每个盒子都由四个部分组成：
内容(content)
盒子(box) 的内容，显示标签内一切的文本，图案或者别的内容。
内边距(padding)
盒子(box) 内的填充物，样式为透明，主要负责扩展盒子内区域大小。
外边距(margin)
盒子(box) 外部的区域，样式为透明，负责隔离相邻的元素。
边框(border)
盒子(box) 的边界，负责隔离外边距以及内边距。
盒子模型的值
盒子模型一共有三个值：
content-box
content-box为标准的盒子模型。盒子的width跟height只包括盒子本身的width与height属性。
计算法则：
width = width
height = height
border-box
border-box为盒子模型可选的属性之一。盒子的width跟height包括content、padding跟border。这也是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
计算法则：
width = width + border + padding
height = height + border + padding
padding-box
padding-box为非标准属性，曾经在Firefox中实现过，但是在Firefox 50中被删除。padding-box的width和height 属性包括内容和内边距，但是不包括边框和外边距。
图示：
这里吐槽一下，不知道为何没有margin-box，虽然并没有太大意义，当真实现了效果估计也很诡异，但是作为一个强迫症患者晚期，少了一个属性总感觉好不舒服。
视觉格式化模型(visual formatting model)
CSS的视觉格式化模型(visual formatting model) 是根据 基础盒模型(CSS basic box model) 将 文档(doucment) 中的元素转换一个个盒子的实际算法。
官方说法就是：它规定了用户端在媒介中如何处理文档树( document tree )。
每个盒子的布局由以下因素决定：
盒子的尺寸
盒子的类型：行内盒子 (inline)、行内级盒子 (inline-level)、原子行内级盒子 (atomic inline-level)、块盒子 (block)
定位：普通流、浮动、绝对定位
文档树中当前盒子的子元素 或 兄弟元素
视口(viewport) 的尺寸 和位置
盒子内部图片的尺寸
其他某些外部因素
视觉格式化模型(visual formatting model) 的计算，都取决于一个矩形的边界，这个矩形，被称作是 包含块( containing block ) 。 一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。
例子如下：
| hi |
