盒模型 我想认识你

盒模型

padding & margin

可以通过width和height来设置盒子的大小
但是padding和border也影响盒子的尺寸

<div class="box"></div>

    <style>
        :root{
            font-size: 10px;
        }
        .box{
            width: 20em;
            height: 15em;
            background-color: violet;
            /* 给盒子添加padding(内边距),border(边框) */
            padding: 1em;
            border:2px solid;
            /* 将背景裁切到内容区，让padding可视化 */
            background-clip: content-box;
        }
        /* 盒子尺寸的计算公式：width/height + padding*2 + border*2 */
        /* 宽度：200 + 10*2 + 2*2 = 224px
        高度：150 + 10*2 + 2*2 = 174px */
        /* 要想盒子的尺寸不因padding和border值而变化就需要使用IE盒子或者称之为怪异盒子 */
        /* 以前需要加padding和border就把width和height减下去
        .box{
            width: calc(20em - 24px);
            height: calc(15em - 24px);
        }
         */
        .box{
            /* 让用户自己决定计算盒子的方式 
            要不要将padding和border计算在内*/
            /* w3c标准盒子模型，width和border不含padding，border */
            /* box-sizing: content-box; */
            /* 将padding和border计算在盒子尺寸内 */
            box-sizing: border-box;
        }
    </style>

margin只会对页面中的元素位置或多个元素的排列产生影响，对盒子的大小没有影响

    <div class="box"></div>
    <div class="box"></div>

    <style>
        :root {
            font-size: 10px;
        }
        .box {
            width: 20em;
            height: 15em;
            background-color: violet;
            padding: 1em;
            border: 2px solid;
            box-sizing: border-box;
        }
        /* margin对水平排列元素的位置影响 */
        /* margin在水平方向会累加 */
        .box {
            float: left;
        }
        /* margin对垂直排列元素的位置影响 */
        /* 垂直方向是折叠塌陷，大者胜出。 */
        /* margin只会对页面中的元素位置或多个元素的排列产生影响
        ，对盒子的大小没有影响 */
        .box:first-of-type {
            margin:2em;
        }
        .box:first-of-type + * {
            margin:3em;
        }
    </style>

注意 margin在水平方向会累加,垂直方向折叠塌陷，大者胜出.

一般都会对全局的盒子进行设置，为了保证在所有的浏览器上都看上去差不多会去掉所有的margin,padding
记住这三行代码

        * {
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }

盒子的高度问题

开发中，尽量不要直接设置高度，用内容将元素撑开

需要设置高度的时候，注意内容溢出问题，根据需要选择不同的设置。

    <div class="box">
        近几年来,随着社会的发展与进步,科技发展迅速,软件技术逐渐得到认可并成为主流技术.软件复用是因在软件开发过程中的劳动重复,因此,利用软件复用的手段帮助提高软件开发的效率和质量.软件复用和软件构件技术一直受到行业内部的关注,笔者就对此进行了探究,分别研究了软件复用和软件构件技术,探讨了两者之间的关系,并对未来进行了展望,希望能够为软件行业发展提供有效思路.
    </div>

    <style>
        :root {
            font-size: 10px;
        }
        .box {
            width: 20em;
            height: 15em;
            background-color: lightcyan;
            border: 1px solid #000;
            /* visible:默认值，默认显示溢出内容：*/
            overflow: visible;
            /* hidden:隐藏溢出内容  */
            overflow: hidden;
            /* 使用滚动条查看被隐藏的内容 */
            /* 几乎不用 */
            overflow: scroll;
            /* 用的少 */
            /* overflow-y: scroll;
            overflow-x: scroll; */
            /* 当内容少时滚动条消失 */
            overflow: auto;
        }
    </style>

注意：
overflow: hidden;
overflow: auto;

容器最小高度与最大高度

    <div>
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
    </div>
    <div>
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
    </div>
    <div>
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
        截止到2020年11月1日，全球约有79.1%的网站在使用PHP驱动
    </div>

       body > * {
            margin:1em;
        }
        body div {
            border: 1px solid #000;
            /* 默认高度由内容撑开 */
            height: auto;
        }
        body div:first-of-type {
            height: auto;
        }
        body div:nth-of-type(2){
            min-height: 5em;
            /* 只限制最小高度未限制最大高度
            当内容超过最小高度时会自动伸展
            当内容不足时使用最小高度，
            保证页面不会塌陷 */
        }
        body div:nth-of-type(2)+*{
            max-height: 6em;
            overflow: auto; 
        }
        /* 与上面等效 */
        /* body div:nth-of-type(3){
            max-height: 6em;
            overflow: auto;
        } */
    </style>

注意： 使用max-height时一定要考虑内容溢出问题

水平居中问题

<   div class="box">
        <a href="">php.cn</a>
        <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png"  alt="这是行内块元素img">
    </>

        .box {
            width: 15em;
            height: 15em;
            border: 1px solid #000;
        }
        /* 1. 行内或者行内块水平居中 */
        .box {
            text-align: center;
        }
        img {
            width: 10em;
        }

1. 行内元素或行内块元素可以直接设置父元素的text-align: center;

    <div class="box">
        <div></div>
    </div>

        /* 使用margin来实现块元素的水平居中 */
        .box>div {
            /* auto:这个值由浏览器根据上下文自动计算
            将父元素左边的空间尽可能给自己的margin-left，也就是说本元素停靠右边
            同理：margin-right就尽可能给自己的右边也就是说元素停靠左边 */
            /* margin-left: auto; */  
            /* 所有向左向右挤可以水平居中 */
            /* margin-left: auto;
            margin-right: auto; */
            /* 一般不这么写，可以直接margin：0 auto; */
            margin: 0 auto;
            /* 二值法：第一个是上下，第二个是左右 */
        }

1. 行内块元素使用margin来设置,margin: 0 auto;以后都使用这种方法。

垂直居中

方法：行内元素不能设置高，一定要设置父元素的高，只要将行内元素的 line-height 的值与父元素一样就可以实现垂直居中 ，但是行内块元素无效

        .box a {
            line-height: 15em;
        }

img 当块元素处理，此时父元素一定不能给高度，由padding挤出来。

<div class="box">
        <!-- <a href="">php.cn</a> -->
        <div></div>
        <!-- <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt=""> -->
    </div>

        .box {
            padding: 5em 0;
        }
        .box div {
            width: 5em;
            height: 5em;
            background-color: yellow;
        }

水平和垂直都居中

行内元素

1. 通过设置父元素的,text-align: center;
   和line-height 等于父元素的高即可

<div class="box"><a href="">php.cn</a></div>

    <style>
    /* 1. 行内元素的水平居中，设置父元素的 text-align: center; */
    .box {
        width: 15em;
        height: 15em;
        border: 1px solid #000;
        text-align:center;
        line-height: 15em;
    }
    </style>

1. 通过父元素的padding,撑出居中的效果

    <div class="box">
        <div></div>
    </div>

    .box {
        width: 6em;
        border: 1px solid #000;
        padding:5em;
    }
    .box > div{
        width: 2em;
        height: 2em;
        background-color: violet;
    }

1. 通过子元素的margin，撑出居中效果；使用相对定位。

    <div class="box">
        <div></div>
    </div>

    .box {
        height: 5em;
        position: relative;
        border: 1px solid black;
    }
    .box > div{
            width: 2em;
            height: 2em;
            background-color: violet;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
    }

注意 使用定位和margin时需要设置子元素的top,left,right,bottom为0；