前端笔记2021.05.02

标准文档流：从左自右，自上而下的顺序。显示出来的元素按照元素在代码中的先后顺序进行排列，对行内元素（inline）默认按照从左自右排列，对块级元素（block），默认按照从上自下进行排列，且各元素在页面中占相应的空间大小，不能相互重叠，页面内的元素各自占有自己在页面中的空间位置。

display：block、inline、none

盒子的定位

在CSS布局中，position有4种取值。

（1）static ：静态定位，它是默认的属性值，取该值的元素按照标准文档流进行布局排列。

（2）relative：相对定位，使用相对定位的元素以标准文档流为基础，元素可以在它原来的位置上进行偏移，该元素的偏移是显示上的偏移，但在文档流中的位置不会变化。

（3）absolute：绝对定位，绝对定位的元素会脱离标准文档流，对其后的其他元素没有影响，它可以以页面左上角为基础，定位至页面的任何地方。

（4）fixed：固定定位，它与绝对定位类似，只是其以浏览器窗口为基准进行定位，即当拖动浏览器窗口的滚动条时，它依然保持不变。

盒子的浮动

在布局中，块级元素默认会占整行的空间，不管如何设置宽度和高度属性，也不能改变块级元素的这个特性。

除了行内元素本身具有的特性可以同行显示，我们还可以通过浮动来使块级元素排列到同一行，可以设置向左或者向右浮动，直到它碰到包含它的元素或者另一个浮动元素的边框为止。多个浮动元素可以显示在同一行内，浮动元素会脱离标准文档流，不占标准文档流中的位置。float:none、left、right。

浮动塌陷

因为子元素都为浮动，浮动层会脱离标准文档流，在文档流的空间中不占大小，而父容器没有设置高度，高度会随内容变化而变化，父容器中的内容为浮动的层且不占空间，所以父容器的高度就变成了0px,所以我们称这种现象为浮动塌陷。

处理浮动塌陷

可以通过clear属性来清除浮动塌陷，clear属性可以取left、right、both和none值，left用于清除左边浮动，right用于清除右浮动，both用于清除两边的浮动，none不清楚浮动。1、在父容器中添加一个子层，为其添加一个class属性，CSS样式.class{clear：both；}2、CSS样式添加属性overflow：hidden;