一、盒子模型 & 文档流

文档流是基础，是网页的最底层。
所有的精美的网页都是由一个有一个的小方块组成的。那我们就可以将写网页看作是砌砖了，虽然我们本来就是用代码板砖（手动狗头）。

盒子模型：所有的元素都是矩形的；
每个盒子的组成：内容，内边距，边框，外边距
width和height设置的是内容区的大小；

边框的宽度：border-width；
边框的颜色：border-color；
边框的样式：border-style；
外边框（margin）-边框(border)-内边距(padding)-内容-内边距-边框-外边框；
兄弟元素之间的垂直外边距会重叠，++取max，+-取add，--取|max|；
行内元素可以设置padding，border，margin；
box-sizing 用来设置盒子尺寸的计算方式设置width和height的作用范围；
content-box 默认值,宽度和高度用来设置内容区的大小；
border-box 宽度和高度用来设置整个盒子的可见框的大小；

我们可以在浏览器界面按一下 F12 ，可以在查看器中查看盒子模型。

（1）元素的设置

如果子元素的长度超过了父元素，使用** overflow **属性来设置如何处理
可选属性：
- visible。默认值，在父元素外面显示
- hidden 一出内容不再显示
- scroll 横竖滚动条
- auto根据需要自动匹配

** display： ** 用来设置元素显示类型
可选项：
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 行内块元素
- table 将元素设置为一个表格
- none 元素不在页面中显示

** visibility：**用来设置元素的显示状态
可选值：
- visible 默认值元素正常显示
- hidden 元素隐藏但仍然占据位置

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档流</title>
    <style>
        .box1{

            color: gray;
            font-size: 160px;

            width: 200px;
            height: 200px;
            background-color: blue ;

            border-width: 3px 10px 13px 5px ;
            border-style: solid dotted dashed double;
            border-color: chartreuse yellow red pink;
            padding: 5px;
        }
        .box2{
            width: 50px;
            height:50px;
            background-color: chartreuse;

            overflow: auto;
        }
        a{
            font-size: 60px;
            display: block;
            width: 200px;
            height: 100px;
            background-color: darkgray;
        }
    </style>
</head>
<body>
     <div class="box1">PS</div>
     <br><br>
     <div class="box2">哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhh哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh哈哈</div>
    <br><br>
    <a href="https://www.baidu.com">BaiDu</a>
</body>
</html>