一、盒子模型 & 文档流

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

盒子模型：所有的元素都是矩形的；
每个盒子的组成：内容，内边距，边框，外边距
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 元素隐藏但仍然占据位置

二、代码

    
    
    
    


     PS
     


     哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhh哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh哈哈
    


    BaiDu