盒子模型（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：层级元素，值越大越上层显示
练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css06.css"/>
<title>css先定义功能，再搭结构</title>
</head>
<body>
<div class="green size1"><em>123</em></div>
<div class="gray size2"></div>
<div class="green size3"></div>
<div id="real"></div>
<!--远视图-->
<div class="wrapper">
<div class="box">
<div class="content">
<div class="content1"></div>
</div>
</div>
<!--定位-->
<!--绝对定位-->
<div class="demo01"></div>
<!--相对定位-->
<div class="demo02"></div>
<!--固定居中-->
<div id="fixed"></div>
</body>
</html>
/*清除所有标签样式，通配符标签对象为全部标签*/
*{
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
奥运五环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奥运五环</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#con{
width: 348px;
height: 120px;
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50%;
left: 50%;
margin-left: -180px;
margin-top: -50px;
}
.left{
float: left;
}
.demo1{
width: 100px;
height: 100px;
border:8px solid deepskyblue;
border-radius: 50%;
}
.demo2{
width: 100px;
height: 100px;
border: 8px solid black;
border-radius: 50%;
}
.demo3{
width: 100px;
height: 100px;
border: 8px solid red;
border-radius: 50%;
}
.demo4{
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
border: 8px solid yellow;
border-radius: 50%;
}
.demo5{
position: absolute;
top: 50px;
left: 174px;
width: 100px;
height: 100px;
border: 8px solid greenyellow;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="con">
<div id="sh">
<div class="demo1 left"></div>
<div class="demo2 left"></div>
<div class="demo3 left"></div>
</div>
<div id="xia">
<div class="demo4 left "></div>
<div class="demo5 left"></div>
</div>
</div>
</body>
</html>
奥运五环效果图.png
网友评论