12、前端开发：CSS知识总结——盒子模型（Box Model）（3）

一、默认样式：

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

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

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

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

二、盒子大小

 默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

       width/height  默认情况下，是盒模型的内容区的宽高

       对box-sizing理解，它有几种状态？

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

                可选值：

                    content-box 内容区 默认值

                    border-box  宽度和高度用来设置整个盒子可见框的大小，

                                    包括边框，padding，内容区

解决元素抖动的问题

          1、在元素本身上就设置好边框

          2、可以甚至box-sizing

三、设置元素的阴影效果

          box-shadow

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

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

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

                第三个值：模糊半径

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

          text-shadow

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

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

                第三个值：模糊半径

                第四个值：颜色   默认颜色是字体的颜色

四、设置圆角

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

             borde-top-right-radius

             border-top-left-radius

             border-bottom-left-radius

             border-bottom-right-radius

             border-radius: 50%;  设置圆形