盒子模型及其样式

一.盒子模型

分类：**IE盒子模型 标准w3c盒子模型
盒子模型：content(内容) padding border margin
padding：外边距
border：边框
margin：外边距

 .box{
            width:200px；
            height:200px;
 /*div的内容的宽高width，height(内容区域)+border+padding-------IE盒子模型*/
/*width和height : div的内容区域的宽高，并不是盒子的宽度和高度------标准盒子模型*/
 /*真实占有宽高 width(height)+padding+border+margin---左边或者右边*/
            
            padding:15px 10px 5px 9px;/*上 右 下 左*/   
            padding:10px 20px;--------上下10px 左右20px*/
            /*padding：会改变盒子的大小。可通过 box-sizing 来解决盒子的自适应问题，恢复盒子的本来大小*/
            /*margin:10px 20px 30px 40px; 上 右 下 左*/

二.外边距合并

盒子模型里的外边距合并：当两个垂直外边距相遇时，他们将形成一个外边 距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者
margin-bottom(上一个元素盒子的样式), margin-top(下一个元素盒子的样式)---------两div发生合并(以最大的边距为准)

当两个盒子嵌套时， 有三个div嵌套；
当最外面的div设置margin-top：50px，第二个设置也设置margin-top:20px，，则第二个设置的margin-top将会被取代,值大的有效
   当盒子嵌套时，
        解决方案：1.给父级盒子元素设置一个边框---border：1px solid #333;
                    2.给父元素设置一个-------overflow:hidden;
    -->

三.边框及透明度的样式

border-shadow: 边框阴影

  box-shadow:1px 2px 3px 4px #ccc inset；
        1px  从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；

　　　　 2px  从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）；

　　　　3px  阴影的模糊度，只允许为正值；

　　　　 4px  阴影扩展半径；

　　　　 #ccc  阴影颜色；或者 rgba( , , ,0.3)

　　　　 inset  设置为内阴影（如果不写这个值，默认为外阴影）；

 所谓内外阴影，其实就是指的是阴影在div的外面一圈还是在div的里面一圈，如下图

透明度

 opacity:0----1;透明度
                rgba(255,255,250,0.3);---------rgba(颜色，颜色的透明度)

边框圆角

   边框圆角：
                border-radius:10px 20px 30px 40px;-------上 右 下 左
                border-radius:50%; -------边框为一个圆