css盒模型及定位

盒子模型

    <!-- 标准盒模型 
            总宽度 = border(左右) + width + padding(左右)
            总高度 = border(上下) + height + padding(上下)
    -->
内容区（width）
1、内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。
2、如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。 
3、通过width和height两个属性可以设置内容区的大 小。
4、width和height属性只适用于块元素。

内边距（padding）
1、顾名思义，内边距指的就是元素内容区与边框以内 的空间。 
2、默认情况下width和height不包含padding的大小。
3、使用padding属性来设置元素的内边距。 
4、例如： – padding:10px 20px 30px 40px – 这样会设置元素的上、右、下、左四个方向的内边距

边框（border）
1、可以在元素周围创建边框，边框是元素可见框的最外部。 
2、可以使用border属性来设置盒子的边框： – border:1px red solid; – 上边的样式分别指定了边框的宽度、颜色和样式。
3、也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。 
4、和padding一样，默认width和height并包括边框的宽度。

边框的样式 
	边框可以设置多种样式：
	 	– none（没有边框） 
		– dotted（点线）
	  	– dashed（虚线） 
	  	– solid（实线） 
	  	– double（双线） 
	  	– groove（槽线） 
	  	– ridge（脊线） 
	  	– inset（凹边） 
	  	– outset（凸边）

    <!-- IE盒模型（怪异盒模型） 
            总宽度 = width
            总高度 = height
    -->

定位

        div{
            /* 绝对定位 
                1> 脱离原来文档流
                2> 相对于最近的有定位的父级进行定位，如果没有，就相对于文档定位
            */
            position: absolute;

            /* 相对定位 
                1> 保留原来位置进行定位
                2> 相对自己原来的位置进行定位
            */
            position: relative;

            /* 经验：使用relative做参照物，用absolute进行定位 */

            /* 固定定位：一般用于做页面广告 */
            position: fixed;

            /* 叠加次序 ：对定位元素进行层叠

                注意:   1> 默认值是0，取值越大，定位元素在层叠元素中余越居上
                        2> 如果取值相同，则根据书写顺序，后来居上
            */
            z-index: 2;

            /* 定位元素居中 
                1>
                    top:50%;
                    margin-left: 宽的1/2
                2>
                	position:absolute;
                	left:50%;
                	top:50%
                    transform: translate(-50%,-50%);
            */

        }