盒子大小

        .box{
            /* 宽度 */
             width: 20em;
             /* 高度 */
             height: 20em;
             /* 背景色 */
             background-color: #000;
             /* 此时盒子宽高200px*200px */
        }

影响盒子大小的因素

  • border 边框
  • padding 外边距
 <style>
        :root{
            font-size: 10px;
        }
        .box{
            /* 宽度 */
             width: 20em;
             /* 高度 */
             height: 20em;
             /* 背景色 */
             background-color: #000;
             /* 此时盒子宽高200px*200px */
        }
        /* 给盒子添加padding 内边距 border边框 */
    .box{
        padding: 1em;
        border:2px solid;
        /* 将背景裁切到内容区,让padding可视化 */

        background-clip: content-box;
    }
    /* 盒子尺寸的计算公式:width/height +padding*2 + border *2   */
    /* 宽度: 200 +10*2 + 2* 2 =224*/
    /* 高度: 200 + 10* 2 + 2* 2= 224 */


    /* 那么,这种盒子的计算方式是否直观? */
    /* width: 200px;height: 150px; 站在用户角度,希望这个值时一个固定的值 */
    /* 使盒子大小不受width / height 之外属性的影响,(不受padding ,border影响) */

    /* 这个问题曾经困扰了前端界很久,有一个非常笨的解决方案 */
    /* 既然padding 和 border 是后来加上去的,所以减去就OK了 */

    .box{
        width: calc(20em - 24px);
        height: calc(20em - 24px);
    }


    /* 当越来越多的程序员这么干,css标准制定者w3c妥协了,提供了新属性来解决这个问题 */
    /* box-sizing:让用户自己决定计算盒子大小的方式,要不要将padding 和border 计算在 内 */
    </style>

计算公式

盒子尺寸的计算公式:width/height +padding*2 + border *2

box-sizing控制盒子计算方式

.box{
        /* width: calc(20em - 24px);
        height: calc(20em - 24px); */
        /* content-box:是w3c的标准盒子模型,width/height不含padding border */

        box-sizing: content-box;

        /* border-box:padding border计算在盒子大小内 */
        box-sizing: border-box;

        margin: 1em;

    }

margin对盒子位置的影响

水平:margin 累加
垂直:margin折叠

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>marging对盒子位置的影响</title>
    <style>
        :root {
            font-size: 10px;
        }

        .box {
            /* 宽度 */
            width: 20em;
            /* 高度 */
            height: 20em;
            /* 背景色 */
            background-color: #000;
            /* 此时盒子宽高200px*200px */
            border: 1px solid;
            padding: 1em;
            box-sizing: border-box;
        }

        /* margin对水平排列的元素的位置的影响 */
        /* 水平方向 margin累加 */
        /* .box{
            
            float: left;
        } */
        .box:first-of-type {
            /* 垂直方向:margin折叠 */
            margin: 2em;
        }

        .box:first-of-type+* {
            /* 垂直方向:margin折叠 */
            margin: 3em;
        }

        /* margin折叠之后,大者胜出 */
        /* margin只会对页面中的元素的位置或多个元素的排列产生影响,对盒子大小无影响 */
    </style>
</head>

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

</html>

全局的盒子大小的设置

   *{
            margin: 0;
            padding: 0;
            /* 全局使用ie盒子模型 */
            box-sizing: border-box;
        }

元素的高度:内容超出了怎么办?

  <style>
        /* 1.文档流:是元素默认布局方式 */
    :root{
        font-size: 10px;
    }
        .box{
            width: 20em;
            /* 应该使用内容将元素撑开,而不是直接设置它的高度 */
            /* height: 20em; */
            background-color: #555;
            border: 1px red solid;

            /* 显示一处的内容。默认值 */
            overflow: visible;
            /* 隐藏益处的内容 */
            overflow: hidden;
            /* 使用滚动条查看被影藏的内容 */
            overflow: scroll;
            overflow: auto;
        }
    </style>

容器最小高度与最大高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器最小高度与最大高度</title>
    <style>
        body>*{
            margin: 0;
        }

        body div{
            border: 1px red solid;
            /* 默认高度由内容撑开 */
            /* 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: 5em;
            background-color: red;

            /* 这时我设置了最大高度,超过这个高度的内容就溢出了 */
            overflow: auto;
        }

        /* 与它类似,还有最小宽度与最大宽度,大家自己测试 */
    </style>
</head>
<body>
    <div>
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
    </div>
    <div>
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
    </div>

    <div>
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
        截止到2020年十一月一日,全球约有79.1%的网站由php驱动
    </div>
</body>
</html>

元素水平居中问题

      .box {
            width: 15em;
            height: 15em;
            border: 1px red solid;
        }

        /* 1.行内或行内块水平居中 */
        .box {
            text-align: center;
        }

        /* 2.块元素的水平居中 */
        .box>div {
            width: 5em;
            height: 5em;
            background-color: yellow;

            /* 使用margin来实现块的水平居中、 */

            /* 挤压式居中 */
            /* margin-left: auto; */
            /* margin-right: auto; */


            margin: 0 auto;
        }

垂直居中问题:行内元素

       .box {
            width: 15em;
            height: 15em;
            border: 1px red solid;
        }
        .box a{
            /* 只要让行内元素的高度与容器的高度相等,即可垂直居中 */
            line-height: 15em;
        }
        .box img{
            line-height: 15em;
        }

垂直居中问题:padding

   /* padding是最简单的方式 */
        .box {
            width: 15em;
            /* 不要给高度,这个高度应该由padding挤出来 */
            /* height: 15em; */
            border: 1px red solid;
        }
       
     .box{
         padding: 5em 0;
     }

     .box>div{
         width: 5em;
         height: 5em;
         background-color: yellow;
        /* margin: auto; */
     }

水平且垂直的解决方案

        /* 1.行内元素的水平且垂直 */
        /* text-align+ line-height */
        .box{
            width: 15em;
            /* height: 15em; */
            border:1px red solid;

            text-align: center;
            line-height: 15em;
        }


        /* ------------------- */
        /* 2.padding 实现水平和垂直居中 */
        /* .box{ */
            /* width: auto;
            height:auto; */
            /* padding: 5em;
        }

        .box>div{
            width: 5em;
            height: 5em;
            background-color: green;
        } */


        /* 3.margin来实现 */

        .box{
            position: relative;
        }

        .box div{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            margin: auto;
            /* background-color: green; */
        }

1218作业

作业标题:1218作业
作业内容:1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
演示地址:https://php.gzj2001.com/1218/

作业代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1218作业</title>
    <style>
        * {
            font-size: 20px;
        }

        /* ---------1.box-sizing------------- */
        .box {
            width: 10em;
            height: 10em;
            background-color: yellow;
            border: 5px red solid;
            padding: 5px;
            background-clip: content-box;
            box-sizing: content-box;
        }

        .box2 {
            width: 10em;
            height: 10em;
            background-color: green;
            border: 5px red solid;
            padding: 5px;
            background-clip: content-box;
            box-sizing: border-box;
        }

        /* -----------2.居中------------ */
        /* 2.1水平居中 */
        .center {
            width: 20em;
            border: 1px red solid;
        }

        .center p {
            /* p标签水平居中 */
            text-align: center;
        }

        .center div {
            width: 5em;
            height: 5em;
            background-color: blue;
            margin: 0 auto;
        }

        /* 2.2垂直居中 */
        .line {
            width: 15em;
            height: 15em;
            border: 1px red solid;
            background-color: pink;
        }

        .line a {
            /* line-height: 与容器高度相等即可垂直居中; */

            line-height: 15em;
        }

        .line2 {
            width: 15em;
            /* 为了使块元素垂直居中,不设置高度 这里应该由padding寄出来 */
            /* height: 15em; */
            border: 1px red solid;
            background-color: pink;
            padding: 3em 0;
        }

        .line2>div {
            width: 3em;
            height: 3em;
            background-color: orange;

        }

        /* 2.3水平垂直居中 */

        /* 2.3.1行内元素 */
        /* text-align+ line-height */
        .end {
            width: 10em;
            height: 10em;
            background-color: #999;
            text-align: center;
            line-height: 10em;
        }
    </style>
</head>

<body>
    <div class="box">220*220px content-box 不包含 padding border大小</div>
    <br>
    <div class="box2">200*200px border-box 包含了padding border大小</div>

    <br>
    <div class="center">
        <p>水平居中</p>
        <div>水平居中</div>
    </div>
    <br>
    <div class="line">
        <a href="">垂直居中</a>
    </div>
    <br>
    <div class="line2">
        <div> 块垂直居中</div>
    </div>

    <br>
    <div class="end">
        <a href="">aaaaaaa</a>

    </div>
</body>

</html>