BFC,margin设置负值，圣杯、双飞翼布局的实现

最新推荐文章于 2024-09-02 20:34:02 发布

Hazel928

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量246

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Hazel928/article/details/114699400

版权

本文探讨了BFC（块级格式化上下文）的概念及其在CSS布局中的作用，包括如何利用BFC清除浮动、防止元素被覆盖以及实现两列自适应布局。负margin的应用则涉及改变元素位置、调整宽度以及在等高布局中的角色。文章介绍了双飞翼布局和圣杯布局的实现原理，强调双飞翼布局在CSS最小宽度和内容扩充时的挑战及解决方案，并提供了相关资源链接供进一步学习。

摘要由CSDN通过智能技术生成

BFC是块级格式化上下文，属于定位方案中的普通流（定位方案包括普通流、绝对定位、浮动）

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

同一个BFC下的元素，外边距margin会产生重叠；
BFC可以包含浮动的元素（清除浮动）；
BFC可以防止元素被浮动元素覆盖【可以用来实现两列自适应】
很多都用overflow:hidden实现

负margin产生的影响

当元素是浮动元素时，负margin会改变元素的显示位置
当元素不存在width属性或者width:auto时，负margin会增加元素的宽度。（可以通过这个来去掉列表右边框）【margin-top为负值不会增加高度，只会产生向上位移；margin-bottom为负值不会产生位移，只会减少自身的供css读取的高度】
设置多列不知道高度的等高布局。对每一列都设置padding-bottom:1000px;margin-bottom:-1000px;对于父元素来说，他还是原来的高度，然后给父元素加上overflow:hidden;以最高的高度进行裁切

双飞翼布局
在这里插入图片描述
1.首先把left、middle、right设置成float:left;脱离文档流；
2.给container设置overflow:hidden;形成BFC撑开文档；
3.设置middle宽度100%，left宽度leftwidth，right宽度rightwidth，（div中设置middle在最前面）
4.设置container的padding-left和padding-right分别为left与right的宽度，为两个腾地；
5.使left爬升至第一行：如果设置margin-left:-leftwidth，那么left会在middle的后半部分，要想left在middle的开头，设置margin-left:-100%；
6.使right爬升至第一行：margin-right:-rightwidth;
7.使right和left分别在container为他俩腾的地方，设置绝对定位，如对left设置position:relative;right:leftwidth;对right设置position:relative;left:rightwidth;
margin-left设置百分比是相对于父元素宽度的，这个宽度是不包括padding在内的。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style>

    .header{
   
      background-color: green;
    }
    .container {
   
      padding-left: 200px;
      padding-right: 150px;
      overflow: hidden;
    }
    .container .left {
   
      background-color: red;
      float:left;
      width:200px;
      margin-left:-100%;
      position:relative

最低0.47元/天解锁文章

Hazel928

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC,margin设置负值，圣杯、双飞翼布局的实现

BFC是块级格式化上下文，属于定位方案中的普通流（定位方案包括普通流、绝对定位、浮动）body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed)display 为 inline-block、table-cells、flexoverflow 除了 visible 以外的值 (hidden、auto、scroll)同一个BFC下的元素，外边距margin会产生重叠；BFC可以包含浮动的元素（清除浮动）；BFC可以防止元素被浮
复制链接

扫一扫