css03-传统盒子模型

htmlcssdao03
css三大重点:盒子模型, 浮动,定位
1:盒子模型:
    1:盒子边框,border
    2:内边距:padding
    3:外边距:margin
2:网页布局的本质:
    1:利用css设置好盒子的大小,然后摆放盒子的位置;
    2:把页面元素放入盒子里面;
3:盒子是网页布局的关键点(box model)(
    边框+内容+文字
    1:盒子厚度:边框border(盒子的厚度)
        1:border-width:1px
        2:border-style:
              1:none:默认为none
              2:solid:实线
              3:dashed:虚线
              4:dotted:点线
        3:border-color:
        4:border:简写:
            border:1px solid red ;
        5:
            border-top: 2px solid red;

            border-top-style: solid;
            border-right-style: solid;
            border-left-style: dashed;
            border-bottom-style: dotted;

            border-top-color: red;
            border-left-color: red;
            border-right-color: red;
            border-bottom-color: red;
        6:
            input
            {
                border-top: none;
                border-left: none;
                border-right: none;
                border-bottom: 2px dotted orange;
            }

            input
            {
                border: none;
                border-bottom: 1px dashed red;
            }
        7:
            1:由于两个单元格之间会出现重叠,从而使边框变粗
            2:cellspacing使单元格与单元格之间的距离为0
            3:border-collapse: collapse;(折叠,使表格合并在一起)
    2:内容内边距padding(盒子内容与边框的距离)
        1:padding-left:10px
        2:
            1:作用:改变内容与边框的距离;类似于cellpadding
            2:影响:改变盒子的大小;
            3:简写:(重点)
                padding:10px;//代表上下左右各10px的内边距
                padding:10px 20px ;// 代表上下是10px , 左右是20px的内边距
                padding:10px 20px 30px ;//代表上10px 左右是20px 下是30px
                padding:10px 20px 30px 40px ;//代表上10px 右20px 下30px 左40px
            4:内盒尺寸的大小
                1:盒子的实际大小:width+padding+border 
                2:解决的方法:只能改变内容的宽度width,让width减去多出来的内边距
                3:width:200+2+100+50 = 352
                  height:200+5+1+100 = 306
            5:padding不影响盒子体积的情况:
                当不设置width和height的时候,就不会影响盒子的宽高
    3:内容外边距:margin(盒子盒子之间的距离)(不会影响盒子的大小)
        1:作用:控制盒子与盒子之间的距离,类似于cellspacing
        2:margin用于与padding的用法相同
        3:块级盒子水平居中:
            1:设置宽度
            2:左右外边距设置为auto
                1:margin-left: auto;
                  margin-right: auto;
                2:margin:auto;
                3:margin:0 auto ;
        4:块级盒子与文字居中的区别:
            1:文字居中:text-align:使行内元素和行内块元素居中对齐
            2:块级盒子居中:margin:auto;使块级元素居中对齐
        5:插入图片和背景图片的区别:
            1:插入图片:页面的图片展示信息,使用插入图片的方式
            2:背景图片:小图标,超大图片背景使用背景图片
        6:清楚元素默认的内外边距:(很重要)以后css的第一行代码
            *{
                padding:0;
                margin:0;
            }
        7:为了照顾兼容性:
            行内元素只设置左右外边距,不设置上下外边距
            margin-left
            margin-right
        8:外边距会出现的问题:
            1:垂直外边距合并的问题:(左右外边距不受影响)
                1:上下相邻的两个块元素,(取两个数值较大的值)
                    上面:margin-bottom:20;
                    下面:margin-top:10
                  最后的结果为:20,外边距合并问题
                  解决办法:只给一个盒子添加数值效果
                2:嵌套两个块级元素,father和son
                    在son里设置margin-top时,son不起作用,father出现位移
                    解决方法:
                        1:在father中设置border-top:1px solid transport;
                        2:在father中设置padding-top:1px ;
                        3:在father中设置overflow:hidden;
    4:内容:盒子模型的布局稳定性:
            width>padding>margin
        1:margin:会有外边框合并问题,ie6以下margin加倍的问题;
        2:padding:会影响盒子大小,需要进行加减计算,其次使用
        3:width:没有问题
    5:去掉ul,ol 默认的样式:
        li{
            list-style:none
        }

    6:圆角边框(css3新属性)
        正方形盒子:border-radius: 3%;
        矩形盒子:border-radius:高度的一般;
    7:盒子阴影:box-shadow:
        h-shadow
        v-shadow
        box-shadow:0px 15px 30px rgba(0,0,0,.1)
            第一个为:x阴影
            第二个为:y阴影
            第三个为:虚实阴影(0 为实 , 越大越虚)
            第四个为:模糊距离
    8:规范:
        1:选择器与{}必须包含空格
        2:属性:与值之间必须包含空格
        3:选择器嵌套不超过三级
        4:属性定义必须另起一行