【盒模型、BFC、清除浮动、水平居中】_相对定位元素居中-CSDN博客

本文链接：https://blog.csdn.net/Lnbd_/article/details/122335853

盒模型

一、什么是盒模型

每一个元素都可以被看作一个盒子，盒子是由：内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成
在这里插入图片描述

二、盒模型分为那两种

标准盒模型: width + margin(左右) + padding(左右) + border(左右)

怪异盒模型: width + margin(左右) (宽度包含了padding、border)

JS盒模型：如果是在面试中的话，问你盒模型有几种，你将这个也说出来的话，是一个加分项，说的更全

盒模型的转换

box-sizing：content-box 标准盒模型
box-sizing：border-box 怪异盒模型

三、对JS盒模型的介绍

怎么获取和设置box的内容宽高
IE： document.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

BFC

一、什么是BFC

BFC就是块级格式化上下文的意思，BFC是一块独立的布局环境，保护其中内部元素受外部影响，也不影响外部。

本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的

二、双边距重合问题（边距重叠）

两个box如果都设置了边距，那么在垂直方向上，
两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

三、边距重叠的情况（两种）

	（1）、父子关系的边距重叠
		父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距
		解决方案：给父元素添加overflow:hidden,这样父元素就变成BFC，不会随子元素产生外边距
	（2）、同级兄弟关系的重叠
		同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
		解决方案：可以通过加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

四、如何触发BFC？

在box属性值为这些的情况下，都会让所属的box产生BFC。

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

也可以用排除法：

overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex

清除浮动

一、为什么要清除浮动

主要是为了解决子盒子浮动，父盒子高度为0的问题

二、清除浮动的方式有四种

（1）额外标签法：给谁清除浮动，就在其后额外添加一个空白标签

优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear{
        clear:both;
    }

(2)、给父盒子添加overflow：hidden ，这样也会变成BFC

优点：简单、代码少、浏览器支持好
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

（3）、用after伪元素清除浮动 :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

优点：符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：由于IE6-7不支持：after，使用zoom：1

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

<style>
            .father{
                border: 1px solid black;
                *zoom: 1;
            }
            .clearfix:after,.clearfix:before{
                   content: "";
                   display: block;
                   clear: both;
               }
               .big ,.small{
                width: 200px;
                height: 200px;
                float: left;
               }
               .big{
                background-color: red;
               }
               .small{
                background-color: blue;
               }
        </style>
   <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
   </div>
    <div class="footer"></div>

</div>

补充

父级div定义 height：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

水平居中

行内元素

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;

<style>
    .father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>
 
<div class="father">
    <span id="son">我是行内元素</span>
</div>

如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

<style>
    .father {
        display: block;
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>
 
<span class="father">
    <span id="son">我是行内元素</span>
</span>

块级元素

方案一：(分宽度定不定两种情况)

定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）

<style>
    .father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    .son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>
 
<div class="father">
    <div class="son">我是块级元素</div>
</div>

不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为`display: inline-block;` 或 `display: inline;`即将其转换成行内块级/行内元素，给父元素设置 `text-align: center;`

<style>
    .father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
 
    .son {
        background-color: green;
        display: inline;
    }
</style>
 
<div class="father">
    <div class="son">我是块级元素</div>
</div>

方案二：使用定位属性

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px;或者设置transform: translateX(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

不定宽度：利用css3新增属`transform:translateX(-50%);`

<style>
    .father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    .son {
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
}
</style>
 
<div class="father">
    <div class="son">我是块级元素</div>
</div>

方案三：使用flex布局实现

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

多行的行内元素

使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">
    <span id="son">我是多行的行内元素</span>
</div>

块级元素

方案一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

不定高度：利用css3新增属性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

水平垂直居中

方案一：设置父元素为相对定位，给子元素设置绝对定位，`top: 0; right: 0; bottom: 0; left: 0; margin: auto;`

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>