HTML.盒子模型（3）

行内元素的盒模型：

      1、内容区：

        默认情况下，不可以自定义内容区的大小

    2、内边距

      默认情况下，可以正常设置内边距，但垂直方向内边距，但它不影响整个页面的布局  

    3、边框：

      默认情况下，可以正常设置边框，但垂直方向边框大小，不影响整个页面的布局

    4、外边距

      默认情况下，垂直方向的外边距，不可设置，水平方向可以设置，且水平方向的外边距不会重叠

 display 设置元素的类型

         可选值

         none：隐藏元素（真正的消失，元素的位置不会保留）

       block  将元素转成块元素

       inline  将元素转成行内元素

       inline-block 将元素转成行内块元素

       table   将元素转成表格

       flex   将元素转成弹性元素

    visibility: ;  设置元素隐藏

      可选值：

        visible  默认值，元素正常显示（元素的位置还是会被保留）

      hidden   设置元素隐藏

 默认样式：

           浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，

           所以为很多的元素都设置了一些默认的margin和padding，

         而它的这些默认样式，正常情况下我们是不需要使用的。

           所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

方式一：

         1:清除浏览器的默认样式

         方式二：

         2:引入重置样式表

盒子可见宽的大小由内容区，内边距，边框共同决定

            box-sizing  用来设置盒子尺寸的计算方式 width/height 指的是谁

                可选值：

                    content-box 内容区 默认值

                    border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区

box-shadow

             用来设置元素的阴影效果，不会影响到页面布局

                第一个值：水平偏移量  正->左  负->右

                第二个值：垂直偏移量  正->下  负->上

                第三个值：模糊半径

                第四个值：颜色    默认是黑色

 知识点2:

             border-radius 用来设置圆角  以10px为半径画圆

             borde-top-right-radius

             border-top-left-radius

             border-bottom-left-radius

             border-bottom-right-radius

             border-radius: 50%;