归零——CSS学习-第六天

盒子模型（margin+border+padding+content[width+height]）

盒子三大部分（盒子的组成部分）：盒子壁border，内边距padding，盒子内容width+height

padding/margin/border-width属性

☛padding:top right bottom left;
☛padding:top right-left bottom;
☛padding:top-bottom right-left;
☛padding:top-bottom-right-left；

body默认margin值为8px

定位

➢绝对定位（position：absolute）：脱离原来位置进行定位
1.相对于最近的有定位的父级定位，如果没有，相对于文档定位

绝对定位.png

➢相对定位（position：relative）：保留原来位置进行定位
1.相对于原来的位置进行定位

相对定位.png

用absolute进行定位，用relative作为参照物。

➢固定定位（position：fixed）：固定位置定位；
固定居中定位：
/固定居中代码/

#fixed{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    background-color: paleturquoise;
    margin-left: -50px;
    margin-top: -50px;
}

➢z-index：层级元素，值越大越上层显示

练习代码

    
        
        
        
    
    
        
123
        

        

        

        
        

            

                

                    


            
        
        
        
        

        
        

        
        

    

/*清除所有标签样式，通配符标签对象为全部标签*/
*{
    padding: 0;
    margin: 0;
}
.green{
    background-color: green;
}
.gray{
    background-color: gray;
}
.size1{
    width: 100px;
    height: 100px;
}
.size2{
    width: 200px;
    height: 200px;
}
.size3{
    width: 300px;
    height: 300px;
}
em{
    font-style: normal;
    color: #c00;
}
#real{
    width: 100px;
    height: 100px;
    background-color: blanchedalmond;
    border: 10px solid cadetblue;
    padding: 10px 20px 30px;
    margin: 10px 20px;
}
/*realWidth:100px+20px+20px+10px+10px=160px;左右内边距+左右border+width */
/*realWidth:100px+10px+30px+10px+10px=160px；上下内边距+上下border+width */
/*远视图*/
.wrapper{
    height: 50px;
    width: 50px;
    background-color: red;
    padding: 10px;
}
.box{
    height: 30px;
    width: 30px;
    background-color: palegoldenrod;
    padding: 10px;
}
.content{
    height: 10px;
    width: 10px;
    background-color: palevioletred;
    padding: 10px;
}
.content1{
    height: 10px;
    width: 10px;
    background-color: palegreen;
}
/*定位*/
/*绝对定位:脱离原来位置进行定位*/
.demo01{
    width: 100px;
    height: 100px;
    left: 100px;
    top: 200px;
    background-color: palevioletred;
    position: relative;
    opacity: 0.5;
}
/*相对定位*/
.demo02{
    width: 200px;
    height: 200px;
    background-color: burlywood;
}
/*固定居中*/
#fixed{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    background-color: paleturquoise;
    margin-left: -50px;
    margin-top: -50px;
}

效果图.gif

奥运五环

奥运五环效果图.png