盒子模型

标签：盒子 color border 模型元素 padding width margin

盒子模型的概念：

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成
- 内容区域：你书写的内容或者子元素能够显示的区域
- 内边距：撑开内容与边框的距离
- 边框：元素的边框
- 外边距：撑开元素和其他元素之间的距离

盒子模型-内容区域（在标准盒子模型下）：

标准盒子模型下设置的width和height都是content（内容）区域的宽高

width：
- 默认是auto。auto分为4种情况：
  1. fill-available：充分利用可使用空间（块标签）
  2. fit-content:收缩到合适（浮动，定位）
  3. min-content:收缩到最小（表格中常见）
  4. max-content:超出容器限制（英文单词较长，或者设置了不换行，就会超出容器限制）
height：
- auto：其高度由内部元素堆叠而成，也就是内部元素撑起来的

设置宽度的坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置宽度的坑</title>
    <style>
        .box{
            /*假设一个元素 内容区域加上左右各50的margin  正好撑满父级
            以下设置是错误的*/
            width: 100%;/*把内容区域设置成了和父级一样宽 再加上margin 就超出父级了*/
            margin: 0 50px;
            height: 100px;
            background-color: red;

            /*解决以上问题很简单，不写width，或者设置width为auto*/
            width: auto;
        }
        input{
            /*input元素：
                占用的宽是200px 高是50px
                边框是1px
                padding是左右各10px

                    所以设置的宽度应该是 200-2-20=178
                */
            width:178px;
            height: 48px;
            padding: 0 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!--

    -->
    <div class="box">
        dd
    </div>
    <input type="text">
</body>
</html>Copy to clipboardErrorCopied

设置高度的坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置高度的坑</title>
    <style>
        /*想让con元素和屏幕一样高*/
        /*想要让高度的百分比生效，需要给父级也要设置高度（不能是auto）*/
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .con{
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con"></div>
    </div>
</body>
</html>Copy to clipboardErrorCopied

margin基础

设置一个元素外边距的宽度。外边距可以理解为当前元素与父级或其他兄弟级元素的距离。
值可以是一个单位，也可以是一个百分比
分4个方向
- margin-left、margin-right、margin-top、margin-bottom
- 每个方向的值都可以单独的设置
- margin-left、margin-top是让自身元素靠右靠下
- margin-bottom、margin-right是让其他元素靠右靠下
margin的简写：
- margin后跟4个值：分别代表上右下左
- margin后跟3个值：分别代表上左右下
- margin后跟2个值：分别代表上下左右
- margin后跟1个值：分别代表上下左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin基础</title>
    <style>
        .con1,.con2{
            width: 200px;
            height: 200px;
        }
        .con1{
            background-color: #5df2ff;
            /*margin-left: 100px;
            margin-top: 80px;
            margin-right: 30px;
            margin-bottom: 40px;*/

            /*margin: 80px 30px 40px 100px;*/
            /*margin: 80px 50px 40px;*/
            margin: 80px 50px;
            margin: 50px;
        }
        .con2{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="con1"></div>
    <div class="con2"></div>
</body>
</html>Copy to clipboardErrorCopied

margin 0 auto居中:

在正常的布局中，块级元素具有满屏的属性，也就是在水平方向上占满父级的宽度
满屏以后，内部元素的内容+内边距+边框+外边距刚好是等于父级的内容区域的大小
所以当水平方向上的宽度边框内边距都是固定值的时候，在水平方向上margin设置auto的时候，默认左右平分剩余空间，达到水平居中效果
当水平方向出现auto的时候，剩余空间会进行分配，当某一边不要另外一边出现auto，剩余空间就会直接给另外一边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin 0 auto居中</title>
    <style>
        .outer{

        }
        header{
            width: 1000px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
            margin: 30px auto 50px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header></header>
        <section></section>
        <footer></footer>
    </div>
</body>
</html>Copy to clipboardErrorCopied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向auto小练习</title>
    <style>
        .con{
            width: 400px;
            height: 100px;
            background-color: red;
            margin-left: auto;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!--
        水平方向auto小练习:
            当水平方向出现auto的时候，剩余空间会进行分配
             当右边不要  左边出现auto 剩余空间就会直接给左边
    -->

    <div class="con">

    </div>
</body>
</html>Copy to clipboardErrorCopied

垂直方向上的 margin ： auto 0 为什么不行

相对于水平方向来说，块元素在垂直方向上并没有满屏的属性，margin默认在上下的值都是0
无论是否设置垂直方向的auto，表现出来的都是元素多高就占用多少，并没有剩余空间去平分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin 0 auto居中</title>
    <style>
        .outer{
            height: 400px;
            background-color: #b51d1a;
        }
        header{
            width: 1000px;
            height: 100px;
            background-color: pink;
            margin: auto 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header></header>
    </div>
</body>
</html>Copy to clipboardErrorCopied

margin的父级塌陷：

当一个父级中第一个元素的margin-top会塌陷给父级
最后一个元素的margin-bottom会塌陷给父级

防止父级和其他元素之间的间隙过大，当第一个和最后一个子元素的margn塌陷给父级以后父级就可以和兄弟元素在垂直方向上进行叠加
避免父级塌陷
1. 给父级设置一个边框边框的宽度不能为0
  
  防止影响视觉，可以设置透明（transparent）颜色
2. 开启BFC（块级格式化上下文）
  
  很多种方法，后边讲解:overflow：hidden 可以开启。。。。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin基础</title>
    <style>
        .con1,.con2{
            width: 200px;
            height: 200px;
        }
        .con1{
            background-color: #5df2ff;
            margin-top: 50px;
        }
        .con2{
            margin-top: 40px;
            background-color: yellow;
            margin-bottom: 40px;
        }
        .outer{
            background-color: pink;

            /*border:1px solid transparent;*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con1"></div>
        <div class="con2"></div>
    </div>

</body>
</html>Copy to clipboardErrorCopied

margin对元素的影响和支持性：（margin都为正值）

对块标签来说：
- margin-left：元素右移动
- margin-top：元素下移动
- margin-right：如果右边有元素后边的元素右移动
- margin-bottom：如果下边有元素后边的元素下移动
- margin垂直方向叠加，父级塌陷
对行标签：
- margin在垂直方向上不生效
- 水平方向：margin-left：元素右移动，margin-right：如果右边有元素后边的元素右移动
对行内块:
- 和块元素一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin对元素的影响和支持性</title>
    <style>
        .con2{
            margin: 40px;
        }
        .ipt{
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con1">div</div>
        <span class="con2">我是span1</span>
        <span class="con2">我是span1</span>
        <input type="text" class="ipt">
    </div>
</body>
</html>Copy to clipboardErrorCopied

负margin的基础用法：

margin-left为负：
- 元素向左移动，并且原来的位置不保留（后边元素会紧跟上一起移动），
- 元素向左移动，并不会挤到前边的兄弟元素，而是覆盖前边的兄弟元素
margin-right为负：
- 元素视觉大小不发生变化
- 但是元素实际所占用的空间变小，后边元素会跟上来或者是撑不开父级宽度
- 假如元素width为100px 设置marginright为-20 元素实际大小是80px
margin-top为负：
- 元素向上移动，并且原来的位置不保留（下边元素会紧跟上一起移动），
- 元素向上移动，并不会挤到上边的兄弟元素，而是覆盖上边的兄弟元素
margin-bottom为负：
- 元素视觉大小不发生变化
- 但是元素实际所占用的空间变小，下边元素会跟上来或者是撑不开父级高度
- 假如元素height为100px 设置marginbottom为-20 元素实际大小是80px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负margin的基础用法</title>
    <style>
        .outer{
            background-color: red;
            /*overflow: hidden;*/
        }
        .con1{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            /*float: left;*/

            margin-left: 0px;
            margin-right: 0px;
        }
        .con2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*float: left;*/

            margin-top: 0px;
            margin-bottom: -0px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="con1"></div>
        <div class="con2"></div>
    </div>
</body>
</html>Copy to clipboardErrorCopied

负margin练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负margin练习1</title>
    <style>
        header{
            width: 1000px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
        section{
            width: 800px;
            height: 400px;
            background-color: yellow;
            /*margin: 0 auto;
            margin-top: -50px;*/

            margin: -50px auto 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header>

        </header>
        <section>

        </section>
    </div>
</body>
</html>Copy to clipboardErrorCopied


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负margin练习1</title>
    <style>
        .outer{
            /*width: 1000px;*/
            height: 250px;
            border: 1px solid #000;
            float: left;
        }
        .inner{
            width: 1068px;
            overflow: hidden;
            margin-right: -68px;
        }
        .outer .inner div{
            width: 199px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-right: 68px;
        }

        /*方法1  最后一个设置为0 覆盖*/
        /*.outer .active{
            margin-right: 0;
        }*/


        /*方法二： 直接使用选择器选择前3个*/
       /* .outer div:nth-child(-n+3){
            margin-right: 68px;
        }*/
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div></div>
            <div></div>
            <div></div>
            <div class="active"></div>
        </div>
    </div>
</body>
</html>Copy to clipboardErrorCopied

边框的设置:

border-width:边框宽度
border-style:边框样式 solid 实现 dashed 虚线 dotted 点线
border-color：边框颜色
合写：border：border-width border-style border-color
注意：
- 边框是在margin里边
- 背景颜色在边框中显示（实线的时候，我们看不到）
- 背景图片原点没有从边框开始而是从padding开始的，但是可能会平铺到边框中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的设置</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 10px dotted #000;
            margin: 10px;
            background-color: red;
            background: url("../images/05.jpg") 0 0 no-repeat;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>Copy to clipboardErrorCopied

边框的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的应用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .head_out{
            width: 100%;
            border-bottom: 4px solid #55a5ff;
        }
        .head_out .head{
            width: 1000px;
            height: 100px;
            background-color: orangered;
            margin: 0 auto;
        }
        .head a{
            text-decoration: none;
            color: #3c3c3c;
            font-size: 12px;
        }
        .head .head_login{
            border-right: 3px solid #3c3c3c;
            border-left:3px solid #3c3c3c;
            padding: 10px 20px;
            margin-left: 20px;
        }
        .head .head_regist{
            border-right: 3px solid #3c3c3c;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="head_out">
            <header class="head">
                <div class="head_top">
                    <a href="###" class="head_login">登录</a>
                    <a href="###" class="head_regist">注册</a>
                </div>
            </header>
        </div>
    </div>
</body>
</html>Copy to clipboardErrorCopied

边框画三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框画三角形</title>
    <style>
        body{
            background-color: #ccc;
        }
        .box{
            width: 0;
            height: 0;
            border: 100px solid #000;
            border-top-color: transparent;
            border-bottom-color: #ff8d9e;
            border-left-color: transparent;
            border-right-color:transparent;

            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <!--
        当内容非常小的时候，
        上下左右边框重合，重合部分就会平分为两半，
        这个时候，整个边框就分为了4个三角形
    -->
    <div class="box"></div>
</body>
</html>Copy to clipboardErrorCopied

padding：

什么是padding
- padding的写法和margin基本一摸一样
- padding主要撑开内容之间的距离
- 背景颜色可以显示在padding中，也可以显示在border中
- 背景图片的原点，其实默认在 padding的左上角
padding的支持性：
- 块标签：四个方向都支持
- 行标签：水平方向直接支持，垂直方向也支持设置，但是不能撑开元素的距离
padding不支持负值
padding也不去设置auto 不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding的设置</title>
    <style>
        .box{
            width: 800px;
            height: 400px;
            background-color: #b51d1a;
        }
        .con{
            width: 200px;
            height: 200px;
            background-color: #5df2ff;
            padding: 10px 20px;
            background: url("../images/05.jpg");
        }
        .con span{
            padding: 20px;
            color: #fff;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con">
            今天天气真好
            <span>哈哈哈</span>
        </div>

    </div>
</body>
</html>Copy to clipboardErrorCopied

padding扩大点击区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .con1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        a{
            font-size: 12px;
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="con1"></div>
        <a href="###">百度两下你就直到</a>
        <div class="con1"></div>

    </div>
</body>
</html>Copy to clipboardErrorCopied

标准盒模型和怪异盒模型：

默认情况基本都是标准盒模型

怪异盒模型：
标准盒模型：
- 元素占用的空间大小为：内容区域（content）+内边距（padding）+边框（border）+外边距（margin）
- ex：
  
  一个元素 margin：20px 30px;
```
 padding:10px 5px;
                border: 2px solid #000;
                width:300px;Copy to clipboardErrorCopied
```
  求这个元素所占用的宽度空间大小是：374px
怪异盒模型：
- ie6 或者是没有正确书写版本声明或者是设置了box-sizing
- 元素所占用的空间大小为：内容（content+padding+border）+外边距（margin）
- 怪异盒模型设置的width是 content+padding+border整体的宽度
  
  ex：
  
  一个元素 margin：20px 30px;
```
  padding:10px 5px;
                border: 2px solid #000;
                width:300px;Copy to clipboardErrorCopied
```
  求这个元素所占用的宽度空间大小是：360px 求这个元素内容（content）区域的宽度是286px

生成怪异盒模型

一个盒子模型中，每一个属性盒子都有自己的名字，由内向外分别是 content-box 、 padding-box、border-box、margin-box（没有官方说明）
将一个元素设置盒模型显示
- box-sizing属性：
  
  content-box:标准盒模型
  
  border-box:怪异盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪异盒模型</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            margin: 15px;
            border: 2px solid #000;
            box-sizing: content-box;/*标准盒模型*/
            box-sizing: border-box;/*怪异盒模型*/
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>Copy to clipboardErrorCopied

盒子模型概念总结

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间
盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）四个构成
盒子模型分为怪异盒子模型和标准盒子模型
标准盒子模型的所占用空间的计算方式是 content+padding+border+margin
怪异盒子模型所占的的空间计算方式是 content+margin（content内容是包含内容内边距和边框的）
使用box-sizing属性可以切换盒子模型的方式

padding和margin的使用场景

padding和margin的使用场景
- padding：撑开内容与边框的距离 padding中会显示背景颜色和背景图片
- margin：撑开元素之间距离
日常使用过程中，可以按照下边方式来使用：
- padding和margin都可以撑开元素之间的距离。
- padding主要用来撑开父子之间的距离
- margin主要用来撑开兄弟之间的距离

标签：盒子,color,border,模型,元素,padding,width,margin
From： https://www.cnblogs.com/z-bky/p/17038822.html