我们通常把网页中的元素当成一个盒子来处理就是为了让代码看起来很清楚。

在网页中一个盒子的模型我们可以把它分为四个部分：内容区（content   填写内容），内边距（padding），边框（border），外边距（margin）

盒子的大小=内容区+内边距离+边框

内容区：

    { width:20px; 

    height:30px;

    }

    如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的

    内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的

    通过width和height两个属性可以设置内容区的大 小。

    并且width和height属性只适用于块元素。

内边距：

    内边距指的就是元素内容区与边框以内 的空间

    width和weight在默认的情况下不会包括padding的大小

    padding-top：上方内边距里

    padding-bottom：下方内边距里

    padding-left：左方内边距里

    padding-right：右方内边距里

边框：

    我们用border设置盒子的边框：

        border-top/left/right/bottom设置边框的长度，在做网页的时候一般会用border：直接设置边框属性，然后用border：none 取消右边框的属性。

外边距：

    在css中我们可以通过margin给元素设置外边距：

      指定上下左右的大小

        /*margin-bottom: 40px;*/        

        /*margin-top: 40px;*/

        /*margin-left: 40px;*/

        /*margin-right: 40px;*/

        /*margin:20px ;*/

       块元素居中：

            margin：0 auto；

外边距重叠：

当两个块的关系是兄弟的时，他们的外边距会重叠

往兄弟元素中添加内容

父元素和子元素也是相邻的时候，父元素会跟着子元素一起重叠

解决方法：

    往元素中添加内容

    填一个border  边框

    填一个padding 内边距

    overflow：hidden 

内联元素的盒模型：

内联元素设置

水平距离外边距会累加

垂直方向的外边距不会影响其他元素

他不能设置宽高

处理超出范围的内容：

overflow：

    visible：默认值

    scroll：添加滚动条

    auto：根据需要添加滚动条

    hidden：隐藏超出盒子的内容

文档流：

在浏览器中一般默认的都是文档流

分两类

块元素:

在文档流当中会独占一行

内联元素:

在文档流当中会根据屏幕大小来自动换行

浮动：

如果我们想让元素到指定的位置，我们可以通过float对元素进行浮动

float：后面可以跟的属性

none：系统默认

left：向左浮动

right：向右浮动

当遇到父类边框或者其他元素会停止

文字饶图：

文字饶图简单的来说就是当我们对元素进行浮动时，里面的内容不会被覆盖或者删除，文字会绕过这些元素

内联元素的浮动：

因为内联元素本身不会换行但是他也不能设置指定的宽高，当我们要对内联元素指定尺寸时需要用float让他脱离文档流

清除浏览器的默认样式：

用*{

margin：0；

padding：0；

    }

display可以把内联元素改成块元素

display：inline；把一个块元素改成内联元素

display：block；把内联元素改成块元素

display：inline-block；行内块，不会独占一行，可以设置宽高

display：none； 什么元素都不会显示，不会占用位置

visibility：hidden；什么元素也不显示，会占用位置-