HTML&CSS（Day02）

1、盒子模型

1-1：div元素的引出

1-2：盒子模型的五个主要元素：width、height、padding、border、margin

    width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度                                 +padding+border    

   height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度                                +padding+border

   padding：内边距。

   border：边框。

   margin：外边距

1-3：盒子的边框属性：

    1-3-1：边框样式（border-style）：   实线，虚线等。。。。

    1-3-2：边框粗细（border-width）

    1-3-3：边框颜色（border-color）

    1-3-4：border的简写：（颜色、粗细和样式）border：9px #F00 dashed

    1-3-5:内边距（padding）

    1-3-6：外边距（margin）

1-4：盒子模型尺寸计算：

    1-4-1：高度=内容宽度+边框高度+内边距

                宽度=内容宽度+边框宽度+内边距

    1-4-2：默认样式

    1-4-3：元素分类（行级元素，块级元素，内联块元素）

                行级元素：1.默认同行可以继续跟同类型标签（a，strong，em）

                                    2.内容撑开宽度

                                    3.不支持宽高

                                    4.不支持上下的margin

                   块级元素:(p,div,h1-h6,ol,ul)

                                1.默认独占一行显示

                                2.没有宽度时，默认撑满一排

                                3.支持所有css命令

                  内联块元素：（img，input）

                                1、和其他元素都在一行上；

                                2、元素的高度、宽度、行高以及顶和底边距都可设置

        1-4-4：如何设置？（display属性）