【HTML】css属性拾遗

盒子模型相关的js属性

container height = child height + marginTop + marginBottom + border + padding

高度

max-content 该属性使得container的高度变成子组件的高度

body本身也是一个盒模型, 其容器就是window
body : body的js属性： clientHeight就是body的实体高度， window.innerHeight = document.body.clientHeight + marginTop + marginBottom

position属性

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
注意的是，left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。
absolute 以body作为相对布局参考对象， 而relative则使用父节点的参考对象

width=fit-content和margin-right=0

对于display: block的元素而言，默认情况下，该元素会占据当前的行剩余空间。
当设置width: fit-content属性时，元素将会占据所有宽度，且margin-right不起作用

Block元素和Inline元素的区别

inline元素的高度和宽度默认是auto, 即完全取决于子元素。 如果inline元素的子元素是block，则整个外部inline元素表现就像一个block元素一样；子元素会占据一行。

block元素： width + margin=父元素行宽，且width最大化，如果width调整，margin会补充上去。假如设置 width:fit-content; margin-right: 0, 则其中margin-right的设置不起作用，它会占据剩余的空间;假如设置margin-right:0,则width自动扩充为剩余宽度，即占满父容器宽度。
上面的例子说明了：如果同时设置了width和marigin，无论先后顺序是什么，width都将生效，而margin则根据上面的约束进行计算，从而忽略设置的值。