CSS——盒子模型（含详解）

一、什么是盒子模型

1、介绍

HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
        #外边距margin ===== 一个相框与另外一个相框之间的距离
        #边框border ====== 边框指的就是相框
        #内边距padding ===== 内容/相片与边框的距离
        #宽度width/高度height ===== 指定可以存放内容/相片的区域
    　　 提示：可以通过谷歌开发者工具查看盒子的各部分属性

2、盒子模型举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*html {*/
        /*    height: 100%;*/
        /*}*/
        /*body {*/
        /*    height: 100%;*/
        /*}*/
        /*.box1 {*/
        /*     100%;*/
        /*    height: 100%;*/
        /*    background-color: red;*/
        /*}*/
        .sp1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /*display: inline-block;*/
            display: none;
            /*visibility: hidden;*/
        }
        .sp2 {
            width: 200px;
            height: 200px;
            background-color: green;
            display: inline-block;

        }

        p span {
            color: red;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<span class="sp1">你好</span>
<span class="sp2">你好</span>

<p>你好<span>ayca</span></p>
</body>
</html>
盒子模型

二、盒子模型的宽度和高度

1、介绍

#1、内容的宽度和高度
    通过标签的width和height属性设置

#2、元素/盒子模型的宽度和高度
    宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
    高度= 。。。。

#3、元素/盒子模型空间的宽度和高度
    宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
    高度= 。。。。

2、练习1：边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: yellow;

            /*border: 1px dotted red;*/
            /*border- 1px 2px 3px 4px;*/
            /*border-style: solid dotted dashed double;*/
            /*border-color: red green blue black;*/
            border: 1px dotted red;
            /*border-radius: 20px;*/
            border-radius: 50%;

            text-align: center;
            line-height: 200px;

        }
    </style>
</head>
<body>
<div class="box1">1111</div>
</body>
</html>
练习1

3、练习2：内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 150px;
            height: 150px;
        }

        .box1 {
            /*height: 100px;*/
            box-sizing: border-box;

            border: 1px solid red;
            padding-top: 50px;
        }
        .box2 {
            width: 100px;
            border: 1px solid green;
            padding-left: 50px;
        }
        .box3 {
            border: 1px solid blue;
            padding-right: 50px;
        }
        .box4 {
            border: 1px solid yellow;
            padding-bottom: 50px;
        }

        .box5 {
            /* 50px;*/
            /*height: 50px;*/
            box-sizing: border-box;
            border: 1px solid aqua;
            padding: 50px;
        }

        .boxx {
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="boxx"></div>
</div>
<hr>
<div class="box2">
    22222
</div>
<hr>
<div class="box3">
    333
</div>
<hr>
<div class="box4">
    4444
</div>
<hr>
<div class="box5">
    5555
</div>
</body>
</html>
内边框

4、练习3：外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 150px;
            height: 150px;
        }

        .box1 {
            border: 1px solid red;
            /*margin-top: 100px;*/
            /*margin-left: 100px;*/
            margin-bottom: 70px;

            padding-top: 30px;
            padding-left: 30px;
            box-sizing: border-box;
        }
        .box2 {
            border: 1px solid green;
            margin-top: 60px;
        }
        .box3 {
            border: 1px solid blue;
            display: inline-block;
            margin-right: 50px;
        }
        .box4 {
            border: 1px solid yellow;
            display: inline-block;
            margin-left: 50px;
        }

        .box5 {
            border: 1px solid grey;

        }

        .boxx {
            width: 20px;
            height: 20px;
            background-color: red;

            /*margin-top: 30px;*/
            /*margin-left: 30px;*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="boxx"></div>
</div>
<div class="box2">
    22222
</div>
<div class="box3">
    333
</div>
<div class="box4">
    4444
</div>
<div class="box5">
    5555
</div>
</body>
</html>
外边距

5、练习4：为何height=100%不起作用

如何让 height:100%起作用：你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：
现在你给div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

相似的例子：可以查看qq注册界面https://ssl.zc.qq.com/v3/index-chs.html
练习4

三、css显示模式:块级、行内、行内块级

在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素

#1、HTML中容器级与文本级

    容器级标签：可以嵌套其他的所有标签
    div、h、ul>li、ol>li、dl>dt+dd

    文本级标签：只能嵌套文字、图片、超链接
    span、p、buis、strong、em、ins、del

#2、CSS中块级与行内

    块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
    div、h、ul、ol、dl、li、dt、dd   还有标签p


    行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
    span、buis、strong、em、ins、del



#3、块级元素与行内元素的区别

    1、块级元素block
        独占一行
        可以设置宽高
            若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
            若没有设置宽高，那么就按照设置的来显示

    2、行内元素inline
        不会独占一行
        不可以设置宽高
            盒子宽高默认和内容一样

    3、行内块级元素inline-block
        不会独占一行
        可以设置宽高

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        /*块级元素*/
        div,p,h1 {
            background-color: red;
            width: 200px;
            height: 100px;
        }

        /*行内元素*/
        span,b,strong {
            background-color: blue;
            width: 200px;
            height: 100px;
        }


        /*行内块级元素*/
        img {
            width: 100px;
            height: 100px;

        }

    </style>
</head>
<body>
<!--块级-->
<div>我是div</div>
<p>我是段落 </p>
<h1>我是标题</h1>
<hr>

<!--行内-->
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<hr>


<!--行内块级-->
<img src="../imags/1.png" alt="">
<img src="../imags/1.png" alt="">

</body>
</html>
举例

四、CSS显示模式转换

属性描述值
 
display
 
可以通过标签的display属性设置显示模式
 
none HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 块级
inline 行内
inline-block 行内块级
 
display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

五、div与span

布局都是用块级元素，而行内元素是控制内容显示的。
1、div标签
   一般用于配合css完成网页的基本布局

2、span标签
  一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色<p>我是<span>egon</span></p>

3、div和span有什么区别？
    div一般用于排版，而span一般用于局部文字的样式
    1、站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
    2、站在CSS的角度：div是一个容器级标签，而span是一个文本级标签

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div与span标签</title>

    <style>
        .header {
            margin: 0 auto;

             980px;
            height: 100px;
            background: pink;

            margin-bottom: 10px;
        }

        .content {
            margin: 0 auto;

             980px;
            height: 500px;
            background: #e9ca37;

            margin-bottom: 10px;

        }

        .footer {
            margin: 0 auto;

             980px;
            height: 100px;
            background: #7e1487;

        }

        .logo {
             200px;
            height: 50px;
            background: #bfccdb;
            float: left;
            margin: 20px;
        }

        .nav {
             600px;
            height: 50px;
            background: palegreen;
            float: right;
            margin: 20px;
        }

        .aside {
             250px;
            height: 460px;
            background: #cccccc;
            float: left;
            margin: 20px;
        }

        .article {
             650px;
            height: 460px;
            background: green;
            float: right;
            margin: 20px;

        }

        span {
            color: red;
        }

    </style>
</head>
<body>

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>



<div class="content">
    <div class="aside">
        <p>
            我是<span>EGON</span>，一个最接近<span>神的男人</span>
        </p>
    </div>
    <div class="article"></div>
</div>


<div class="footer"></div>


</body>
</html>
div&span举例

六、盒子模型各部分详解

1、border边框

同时设置四条边的边框 
border:边框的宽度 边框的样式 边框的颜色
分别设置四条边的边框 
border-left:边框的宽度 边框的样式 边框的颜色

border-top:边框的宽度 边框的样式 边框的颜色

border-right:边框的宽度 边框的样式 边框的颜色

border-bottom:边框的宽度 边框的样式 边框的颜色
分别指定宽度、格式、颜色 
1、连写：（分别设置四条边的边框）
bord- 上 右 下 左
border-style:上 右 下 左
border-color：上 右 下 左


2 、注意点：
    1、这三个属性时按照顺时针，即上、右、下、左来赋值的
    2、这三个属性的取值省略时的规律
        省略右面，右面默认同左边
        省略下部，下面默认跟上面一样

        只留一个，那么其余三边都跟这一个一样
 
了解非连写
 
border-left- ;
border-left-style: ;
border-left-color: #000;


border-top- ;
border-top-style: ;
border-top-color: #000;



border-right- ;
border-right-style: ;
border-right-color: #000;


border-bottom- ;
border-bottom-style: ;
border-bottom-color: #000;

其他：
http://www.w3school.com.cn/cssref/pr_border-style.asp
边框的样式  

none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
border-radius 
/* 单独设置一个角：数值越大，弧度越大*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

/* 缩写设置 */
border-radius: 20px;/* 所有角设置相同值 */
border-radius: 20px 10px 10px 20px; /* 顺时针顺序：上左 上右 下左 下右*/

/* 百分比设置 */
border-radius: 50%;


/* 椭圆圆弧设置 */
border-radius: 25%/50%; /* 前面一个值代表水平方向的半径占总宽度的，后面一个值代表垂直方向 */

2、padding内边距：边框与内容的距离就是内边距

非连写
 
padding-top：20px；
padding-right：20px；
padding-bottom：20px；
padding-left：20px；
 
连写
 
padding：上 右 下 左;
注意 
1 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，
设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。
如果不想改变实际大小，那就在用宽高减掉padding对应方向的值

2 padding是添加给父级的，改变的是父级包含的内容的位置

3 内边距也会有背景颜色

3、外边距：标签与标签之间的距离就是外边距

非连写
 
margin-top：20px；
margin-right：20px；
margin-bottom：20px；
margin-left：20px；
 
连写
 
margin：上 右 下 左;
注意 
1、外边距的那一部分是没有背景颜色的
2、外边距合并现象
   在默认布局的水平方向上，默认两个盒子的外边距会叠加
   而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的

4、内边距vs外边距

#1、在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离
       应该首先考虑padding
       其次再考虑margin

       margin本质上是用于控制兄弟直接的关系的，padding本质才是控制父子关系的关系 

#2、如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，那么外面一个盒子也会被顶下来
       如果外面的盒子不想被遗弃顶下来，，那么可以给外面的盒子设置一个边框属性

5、盒子居中与内容居中

（1）内容居中

1、让一行内容在盒子中水平且垂直居中
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 500px;

2、让多行内容在盒子中垂直居中（水平居中与单行内容一样）
让行高与盒子高度一样，只能让一行内容垂直居中，如果想让多行内容垂直居中，

比如下面这种，想让div中的多行内容垂直居中，一看div中的文字是两行，每一行
的行高为20，加起来就是40，80-40=40，需要让文字距离顶部pading为20，底部padding为20
*/
height: 80px;
line-height: 20px;

padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;

（2）盒子居中

text-align center；只能让盒子中存储的文字、图片水平居中
如果想让盒子自己相对于父元素水平居中，需要用到
margin: 0 auto;

（3）举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
             200px;
            height: 600px;
            background-color: red;

            text-align: center;
            line-height: 25px;
            padding-top: 250px;
            padding-bottom: 250px;
            box-sizing: border-box;

            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="box1">
    你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>
盒子居中&内容居中

6、防止文字溢出word-break: break-all;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎界面</title>
    <style type="text/css">

        div {
            width: 200px;
            height: 200px;

            /*字母、数字溢出，可以用下列属性控制自动换行：允许在单词内换行。
            http://www.w3school.com.cn/cssref/pr_word-break.asp
            */
            word-break: break-all;
        }

        .box1 {
            background-color: red;


        }
        .box2 {
            background-color: green;
        }

        .box3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>asdfasdfsadfasdfasdfasdfad sfasdfsadasDSfafsafaasdfasdfasfdqwerqwerwqersdfqerwrsdf你好我的啊啊啊啊啊啊啊啊啊啊啊啊</p>

</div>


<div class="box2">遗憾白鹭上青天两个黄鹂鸣翠柳啊哈哈哈

</div>

<div class="box3">我是12312312312312312312312312312312312312312312312312312312312我
</div>
</body>
</html>

7、清除默认边距

#1、为什么要清空默认边距（外边距和内边距）
浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
编写代码之前的第一件事情就是清空默认的边距

#2、如何清空默认的边距
        * {
            margin: 0px;
            padding: 0px;
        }

#3、注意点：
    通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好，参考：https://yuilibrary.com/yui/docs/cssreset/
  
    拷贝代码：
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

    可以查看京东，bat主页也是这么做的，在企业开发中也应该像上面
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/guojieying/p/13685144.html