5.11 CSS属性间的制约性
制约性属于层叠性的一部分，制约性只是从另一个角度看待CSS属性，并不是新的内容。制约性的计算步骤发生在specified value转化成used value的过程。
严重困挠。制约性经常对开发造成严重困挠：为什么这个CSS属性设置有时有效，为什么有时没有效果，为什么明明没有设置为什么好像被设置，为什么明明设置的A值好像被改成B值。为解决这些严重困挠，所以单独使用制约性这个概念进行说明。
CSS属性之间既互相配合、互相联系，又互相冲突与矛盾。当它们矛盾时，属性之间产生制约，具体包括两类制约：属性无效、属性被自动修改。属性无效对应层叠性的“无效性（适用性），对应从计算值到应用值的转化过程；属性被自动修改对应层叠性的计算性，对应从指定值到计算值的转化过程。本节进一步介绍它们的常见场景，说明CSS存在这种特性以及学习思路与学习方法，具体各项制约规则在“第3篇 布局模型与规范规则篇”讲解。
5.11.1 A属性令B属性无效
一个CSS属性设置可能使另一个CSS属性设置无效。前面介绍left属性示例，这里继续介绍top与bottom，非常类似。MDN查询top属性。
“适用元素： positioned elements。”
“当position设置为static时，top属性无效。”
示例代码
<body>
<div style="top: 30px;">小步教程 xiaobuteach.com</div>
</body>
运行结果
开发者工具查看。top属性灰色带有警告图标，表示无效。
调整代码改为absolute定位。
<body>
<div style="position: absolute; top: 30px;">小步教程 xiaobuteach.com</div>
</body>
运行结果如下，top有效。
5.11.2 A属性与B属性令C属性无效
以bottom属性为例。bottom属性不仅受position影响，而且受top属性影响。即A属性与B属性令C属性无效。MDN查询bottom属性说明如下。
“当 top和bottom同时指定时，并且 height没有被指定或者指定为auto或100%的时候，top和bottom都会生效，在其他情况下，如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。”
当元素的三个属性height、top、bottom初次判断都能生效时，又会产生一个矛盾，top与bottom能计算出height'，本身又设置有height，产生矛盾。此时规范规则：bottom无效。
先看top与bottom同时有效的情况，示例代码如下。
<body>
<div style="position: absolute; top: 0;bottom: 0;background-color: #0aaa76;">小步教程 xiaobuteach.com</div>
</body>
运行效果
继续设置height属性。
<body>
<div style="position: absolute; top: 0;bottom: 0;height: 40px; background-color: #0aaa76;">小步教程 xiaobuteach.com</div>
</body>
运行效果
从页面效果确认bottom设置无效，查看开发者工具样式面板并没有给出无效提示。
5.11.3 A属性自动修改B属性
一个CSS属性设置可能会自动修改另一个CSS属性设置值。以overflow-y为例，MDN的overflow-y说明如下。
“当 overflow-x 的值为 hidden、scroll 或者 auto，而 overflow-y 属性的值为 visible（默认值）时，该值会被隐式地计算为 auto。”
overflow-y默认值visible，当overflow-x设置为hidden、scroll或auto时，overflow-y被自动修改为auto。项目经常看到设置纵向（y方向）滚动条却设置overflow-x: hidden，就是这个原因。
示例代码
<div style="width: 280px;height: 60px;overflow-x: hidden;border: 1px solid #0aaa76;">
<div>小步教程 xiaobuteach.com 第1行</div>
<div>第2行</div>
<div>第3行</div>
<div>第4行</div>
<div>第5行</div>
</div>
运行效果
开发者工具查看属性被自动修改
overflow-y属性初始默认值是visible，被自动修改成auto。删除overflow-x，再次查看。
5.11.4 属性间制约性的本质
属性间制约性的本质在于：模型内部设计的要求、模型内部的冲突、模型之间的冲突。学习CSS属性不能只是单独学习这些制约性规则，更重要的是理解模型的设计以及规范规则。详情“第3篇 布局模型与规范规则篇”。
以position: static令top属性无效为例。position: static的含义是元素采用流式布局模型，自动计算坐标位置，这与top属性指定坐标位置相矛盾。
overflow-x: hidden与overflow-y: visible也互相矛盾。overflow-x: hidden表示x轴隐藏滚动条，其含义是存在滚动条然后隐藏，可通过JS操作进行滚动，元素本质上是一个滚动容器；overflow-y: visible表示溢出内容会显示，其含义是完全不存在滚动条，元素本质上不是一个滚动容器。两者又相矛盾，所以overflow-x: hidden改写overflow-y: visible成overflow-y: auto。初学者认为overflow-x: hidden改变overflow-y只是一种简写形式，这是不完全准确的看法。
5.11.5 MDN查看属性自动被修改
前面介绍Chrome查看自动被修改属性的方法，发生严重困挠时通过此方法也许能快速解决问题。接下来介绍MDN与w3c的相关说明。
属性自动被修改的具体规则场景较多，MDN与w3c没有统一描述，一部分在属性基本特征的“计算值”描述，一部分在属性介绍的细节描述。
基本特性“计算值”描述，例如MDN查询display。
计算值：为指定的值，但定位元素、浮动元素和根元素除外。在这两种情况下，计算值可能是不同于指定值的其他关键字。
当前属性介绍被自动修改的规则并不完整，需继续到“定位元素”、“浮动元素”、“根元素”相应属性或标签找到答案。
MDN查询float，包含如下描述，其中提到“计算值”。
由于 float 意味着使用块布局，它在某些情况下会修改 display 值的计算值：
指定值 计算值
inline block
inline-block block
......
阅读MDN与w3c时，对“计算值computed value”要非常敏感，它极可能说明自动被修改的规则。
