盒子模型

盒子模型

/盒子模型：内容 边界(margin) 边框(border) 填充(padding)/
width:200px;/width和height : div的内容区域的宽高，并不是盒子的宽度和高度------------标准盒子模型/
height:200px;/div的内容的宽高width，height(内容区域)+border+padding-------IE盒子模型/
background-color:red;/真实占有宽高 width(height)+padding+border+margin—左边或者右边/
padding:15px 10px 5px 9px;/上 右 下 左/ /padding:10px 30px 20px;----上 10px 左右 30px 下 20px;/
/padding:10px 20px;--------上下10px 左右20px/
margin-bottom: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;
-->
<!--
    margin:外边距 是盒子的边框距离别的盒子的距离
    padding:内边距 是盒子里的内容距离边框的距离
    border: 盒子的边框
    content：盒子的内容(文本，图片，等等)
-->
  background-image:url(../images/arr.gif);/*路径地址可有引号，可没有引号*/
        background-repeat:repeat-x;/*图片横向平铺*/
        background-repeat: repeat-y;/*图片纵向平铺*/
        background-position:bottom; /*图片定位 top bottom right left center*/
        background-position:10% 30%;/*  先左右(水平方向) 再上下(垂直方向)*/
        background-position:50px 50px;/*水平方向 垂直方向   元素内边距距左上角的偏移*/
        background:pink url("../images/t3.jpg") no-repeat fixed center center;
        /*背景颜色 图片地址 是否平铺 是否滚动 图片定位；；；并不用考虑顺序*/
        /* background-attachment:scroll|fixed;防止文档向下滚动时，图片也随之下滑 
        背景附着 并不随着滚动条的滚动而滚动;;;;;默认为---滚动
        */
        background-attachment:fixed;    
        border-radius:50%;
         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(颜色，颜色的透明度)

            表格的样式：
            table,tr.td{border:1px solid #333}
            table{border-collapse:collapse;}-----合并单元格的边框细线

            边框圆角：
            border-radius:10px 20px 30px 40px;-------上 右 下 左
            border-radius:50%; -------边框为一个圆
        */
                /* border:1px solid #333;border-width:1px;border-style:solid;border-color:#333; 
                            border-top(右下左)-color:#333
                            border-top-style:dashed;虚线下边框
                                             double;双线左边框  
                                             dotted;点线右边框
    */

    /*
        text-transform:none--------不做变化
                       uppercase---转化为全大写
                       lowercase---转化为全小写
                       capitalize--转化为每个单词的首字母大写
    */