前端菜鸡的学习笔记03：布局中的问题(下)

清茶团子
109 阅读6分钟

这周继续总结布局中的一些问题

浮动中的布局问题

高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

<div class="box1">
 <div class="box2"></div>
</div>

.box1 {
 border: 1px solid black;
 width: 200px;
 background: chocolate;
}
.box2 {
 width: 100px;
 height: 100px;
 background-color: chartreuse;
}

当子元素未开启浮动时，父元素能够正常包裹子元素

image.png

一旦我们给子元素开启浮动，高度塌陷就会发生

image.png

BFC(Block Formatting Context) 块级格式化环境

BFC是一个CSS中的一个隐含的属性，当元素开启BFC后，就有了一些新特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

通过给父元素开启BFC，我们就能解决高度塌陷的问题，而开启BFC的方式有很多种:
1、设置元素的浮动（不推荐，造成元素宽度丢失）
2、将元素设置为行内块元素（不推荐，存在问题）
3、将元素的overflow设置为一个非visible的值
       - 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素(可用但是不完美)

.box1 {
  border: 1px solid black;
  width: 200px;
  background: chocolate;
  /* 开启BFC */
  overflow: hidden;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: chartreuse;
  float: left;
}

我们让父元素开启BFC，高度塌陷的问题就消失了

image.png

使用更多的方式是通过伪元素选择器::after，添加一个伪元素空串，并设置成块元素(默认为行内)，同时清除浮动效果

.box1::after {
  content: "";
  display: table;
  clear: both;
}

我们可以设置一个专门的类clearfix来同时实现解决高度塌陷和上次提到的外边距折叠问题

.clearfix::before,
.clearfix::after {
     content: '';
     display: table;
     clear: both;
  }

定位中的布局问题

定位(position)

定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置,使用position属性来设置定位

    position:
            可选值：
                    static 默认值，元素是静止的没有开启定位
                    relative 开启元素的相对定位
                    absolute 开启元素的绝对定位
                    fixed 开启元素的固定定位
                    sticky 开启元素的粘滞定位

定位方式的不同决定了其定位时的参照物不同，其特点也有所不同
relative定位的元素的参照物是自己在文档流中的位置，且元素不会脱离文档流

absolute定位的元素的参照物是该元素的包含块(containing block)，一般情况下就是离该元素最近的开启定位的祖先元素，若所有祖先元素都没有开启定位，则其包容块为根元素，而且绝对定位的元素会脱离文档流，行内元素开启绝对定位后会变为块元素，其width和height会被内容撑开

fixed定位的大部分特点都与绝对定位相同，不同之处在于固定定位的参照物是浏览器的视口，且固定定位的元素不会随网页的滚动条滚动

sticky定位的元素的参照物是包容块，也不会让元素脱离文档流，但它可以在元素到达某个位置时将其固定

元素的层级

开启定位都会让元素的层级提升，元素的层级越高其显示的优先级越高，高层级的元素会覆盖低层级的元素，而当两元素层级相同时，会优先显示靠下的元素

需要注意的是祖先的元素的层级再高也不会盖住后代元素

元素开启定位后，我们可以通过z-index属性来设置元素的层级

偏移量(offset)

当开启定位后，在我们的布局中会多出一组属性称为偏移量
偏移量由top，bottom，left，right四个值组成，其中top和right用来控制定位元素垂直方向上的距离，而left和right用来控制定位元素水平方向上的距离

绝对定位元素的布局问题

元素开启定位后，偏移量也参与进元素位置的计算，当我们开启了绝对定位后:水平方向的布局等式就需要添加left 和 right 两个值

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right 
= 包含块的内容区的宽度

在这些属性中，margin，width，left，right的值可以设置为auto

类似与盒模型中的水平布局，当发生过度约束时，如果值中没有auto 则自动调整right值以使等式满足

.box1 {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: chocolate;
  position: relative;
}
.box2 {
  width: 500px;
  height: 100px;
  background-color: chartreuse;
  position: absolute;
}

此时开启绝对定位元素的宽度为500px，而包容块的宽度只有200px，为了消除过度约束，right值会被设置为-300px

image.png

left和right的值默认是auto，如果没有指定left和right则等式不满足时，会自动调整这两个值(优先调整，即使设置了margin的值为auto)

这时我们要使元素水平居中，需先设置left与ringt再设置margin为auto

.box2 {
  width: 100px;
  height: 100px;
  background-color: chartreuse;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

image.png

与盒模型中的布局不同的是，开启绝对定位后，在垂直方向上也存在类似的布局关系

top + margin-top/bottom + padding-top/bottom + border-top/bottom + height + bottom = 包含块的高度

其过度约束的规则与水平方向上基本相同，在这些属性中，margin，height，top，bottom的值可以设置为auto

当没有值为auto的属性时，优先调整bottom的值

.box1 {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background: chocolate;
  position: relative;
}
.box2 {
  width: 100px;
  height: 500px;
  background-color: chartreuse;
  position: absolute;
}

这里bottom的值同样被设置为-300px

image.png

使元素垂直居中，需先设置top与bottom再设置margin为auto

.box2 {
  width: 100px;
  height: 100px;
  background-color: chartreuse;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

image.png

以上就是这周的总结了，我们下周再见！

avatar
文章
阅读
粉丝