CSS_三大模块

1.盒子模型

        a.border:        盒子边框

                border: border-wridth border-style border-corlor

                其中style的属性值:

none	无边框
solid	单实线
dashed	虚线
dotted	点线
double	双实线

                注:        圆角边框:        border-radius: 50%;

        b.padding:        内边距,指边框与内容之间的距离

div{
    padding:上内边距 右内边距 下内边距 左内边距;
}

       c.margin:        外边距,设置外边距会在元素之间创建“空白”,这段空白通常不能放置其他内容

div{
    margin:上外边距 右外边距 下外边距 左外边;
}

                注:        

                i.可以通过外边距实现盒子水平居中显示        (特别要注意与文字水平居中的区别)

/* 前提:
        必须是块元素(行内块)
        盒子必须指定了宽度(width)

    将左右外边距都设置为auto,即可实现水平居中
*/
div{
    width:960px;
    margin:0 auto;
}

                ii.相邻块元素的外边距合并:        当相邻两块元素垂直相遇时,且上面的元素有下边距(margin-bottom),下面的元素有上边距(margin-top),此时两者之间的垂直间距不是margin-bottom和margin-top之和,而是两者中的较大者

                iii.嵌套块元素外边距的合并:        两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

                处理ii,iii现象的办法: 1).可以为父元素定义1像素的上边框或上内边距 2)在父元素的css中添加 overflow:hidden;

         d.大小计算

                外盒计算:

                        高度 = content height + padding + border + margin

                        宽度 = content width + padding + border + margin

                实际元素计算:

                        高度 = content height + padding + border

                        宽度 = content width + padding + border

        e.shadow:        盒子阴影

div{
    width:200px;
    height:200px;
    border:1px solid red;
    box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；
}

h-shadow	必选,水平阴影的位置(可为负数)
v-shadow	必选,垂直阴影的位置(可为负数)
blur	可选,模糊距离
spread	可选,阴影尺寸
color	可选,阴影颜色
inset	可选,内阴影(outset:外阴影)

2.浮动:        float:       

        特点:

               Ⅰ.脱离标准流,不占位置,会影响标准流,且只有左右浮动

               Ⅱ.浮动的元素总是找离自身最近的父级元素对齐,不会超出内边距的范围

               Ⅲ.浮动的元素排列位置,与上一个块级元素有关,

                        如果上一个元素设定了浮动,则相邻的下一个浮动元素顶部会和上一个元素的顶部对齐;        如果上一个元素是标准流(无浮动),则相邻的下一个浮动元素会和上一个元素的底部对齐

                Ⅳ.元素添加浮动后,该元素就具有了行内块元素的特性

选择器{
    float:属性值;
    /*
        left:左浮动
        right:右浮动
        none:默认值,不浮动
    */
}

                注:        

                        浮动的目的:        就是为了让多个块级元素同一行上显示

                        清除浮动(清除浮动后造成的影响):        

                                在浮动元素末尾添加一个空的标签:<div style=”clear:both”></div>

                                父元素添加overflow属性:        overflow:hidden|auto|scroll

 3.定位:        position:        常见的定位:轮播图的左右箭头,页面右下角的返回顶部等

选择器{
    position:属性值;
}

        属性值:

relative	相对定位(相对于本身原来的位置进行定为)
absolute	绝对定位(嵌套标签中,相对于上一个已经定位的父元素进行定位)
fixed	固定定位(相对于浏览器窗口定位)
static	默认自动定位

                特点:

                        relative:继续占有原来的位置,并且每次移动都是以自身左上角为基点进行移动

                        absolute:(子绝父相)不占有原来的位置,并且定位依据找离自身最近的已经定位的父元素进行定位

                                注:绝对定位的盒子设置水平/垂直居中:

                       如水平居中:先设置left:50%(父盒子的一半),然后再margin-left走自己的一半负值即可

                        fixed:不占原来的位置,且不受父标签影响,只认浏览器,始终依据浏览器窗口来定义自己的显示位置

        注:        z-index:三种定位均有此属性

                z-index:叠放顺序,多个元素同时设置定位时，定位元素之间有可能会发生重叠

/*
    z-index的默认属性值是0，取值大的，在最上层显示
    如果取值相同，则根据书写顺序，后来者居上
*/
#div1{
    width:100px;
    height:100px;
    position:fixed;
    right:10px;
    bottom:50px;
    z-index:1;
}
#div2{
    width:120px;
    height:120px;
    position:fixed;
    right:10px;
    bottom:50px;
    z-index:3;
}