HTML 页面布局规则与布局方式-一一网

浏览器页面布局规则

盒模型计算
内联元素与块状元素的布局规则
文档流布局
元素堆叠

盒模型计算

两个重要的场景：

有个宽度和高度都为100px的盒子，要怎么在调整边框大小的时候，不需要重新计算和设置宽度和高度呢？

元素的属性设置为 box-sizing: border-box ，这样盒模型就会转换为怪异盒模型，盒子设置的总宽高就为盒子的宽高，我们在调整边框和内边距时，不会影响改变盒子的宽高。

box-sizing: content-box：标准盒模型，此时的宽度和高度为：content + padding + border。

相邻盒子外边距重叠问题

两个上下相邻的盒子，我们给上边的盒子设置margin-bottom: 10px ，给下边的盒子设置margin-top: 10px，我们首选会想到这两个盒子距离是20px ，但是结果只有10px，因此，得出结论，两个相邻的盒子设置外边距会发生重叠且叠加后的值会以最大边距为准。

<style>
	.tab-second-wrap .outer, .tab-second-wrap .inner {
      width: 100px;
      height: 100px;
      background-color: #f60;
      margin: 10px;
    }
</style>

<div class="tab-second-wrap">
    <div class="outer"></div>
    <div class="inner">hello</div>
</div>
复制代码

外边距重合.png

注意：并不是所有情况下都会发生外边距的叠加：

行内框
浮动框
绝对定位框之间外边距不会发生重叠

内联元素和块状元素

问题：

设置元素宽高不起作用的问题？

内联元素和块状元素的区别：

内联元素可以和其他内联元素排在同一行，且设置宽度和高度没有效果
块状元素不可和其他元素在同一行，且设置宽度和高度时有效果

所以说设置宽高不生效可能是因为元素为内联元素。

解决方法：

设置display的值：

设置为 block 块状元素，此时可以设置高度和宽度
设置为 inline 内联元素，此时高度和宽度不起作用
设置为 inline-block ，可以理解为内联元素和块状元素的结合，布局规则：
1. 可以位于块状元素和其他内联元素内部
2. 可容纳其他内联元素和块状元素
3. 宽度高度起作用
作用：可以给元素设置居中，给内联元素设置宽高，将多个块状元素放在一行

文档流和元素定位

什么是文档流？

正常的文档流在 HTML 里面是从上到下，从左到右的排版布局。

文档流可以通过 position 进行调整：

static：默认值，正常文档流（设置 top、left 无效）
relative：元素不会脱离文档流档流，但是设置 top/left，元素会相对于自身的位置发生位移，且会占用空间。如何设置的top/left超出页面会出现滚动条。（设置 overflow: hidden 可以隐藏溢出部分）
absolute：元素脱离文档流，相对于包含块来进行定位，且不占位。
fixed：元素脱离文档流，且不占位，看起来与 absolute 相似，但是在页面滚动时，fixed 元素的位置没有发生变化。fixed是相对于浏览器窗口进行定位的。