一、盒子模型
1.页面内的所有元素都可以看作是一个盒子,占据着一定的页面空间
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box{
width:100px;
height: 100px;
border: 1px solid;
padding:20px;
margin: 10px;
}
</style>
</head>
<body>
<div id="box">
aaaaaaa
aaaaaaa
</div>
</body>
</html>
2.overflow属性
3.border属性
水平分割线的应用
.line{
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}
4.margin
其取值为top,right,bottom,left
一个例子
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
width:100px;
height:100px;
margin:15px 10px 20px 30px;
border:1px solid red;
}
</style>
</head
<body>
<div id="box1"> box1 </div>
<div id="box2"> box2 </div>
</body>
</html>
Margin的水平居中
5.内边距padding
其取值为top,right,bottom,left
二、CSS定位机制
1.文档流flow
(1)元素分类
a.block
b,inline
c.inline-block
一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mysister</title>
<style >
*{
padding:0;
margin: 0;
}
#nav{
width:300px;
margin:100px auto;
font-size:0;
}
a{
display: inline-block;
width:80px;
height:30px;
font-size:14px;
text-align:center;
line-height: 30px;
text-decoration: none;
border-bottom: 1px solid #ccc;
}
a:hover{
color:white;
background-color: #ccc;
border:1px solid;
border-left-color: orange;
border-top-color: orange;
border-right-color: orange
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>
2.浮动float
float属性:
left-左浮动;
right-右浮动;
none-不浮动;
clear属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mysister</title>
<style >
*{
padding:0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin:0 auto;
width:1000px;
height:500px;
/*background-color: #6cf;*/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: :5px;
}
#main{
height: 500px;
width: 1000px;
margin-bottom: 5px;
}
#aside{
float:left;
width:300px;
height:500px;
background-color: #6cf;
}
#content: {
float:right;
width:695px;
height:500px;
background-color: #cff;
}
#footer{
height: 60px;
background-color: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
为什么我的会这样,不懂
3.层 layer
position属性
a.fixed-固定取值
#fix-box{
width:200px;
height:200px;
border:1px solid red;
position:fixed;
left:100px;
top:50px;
}
b.relative-相对定位
relative定位的层总是相对于其直接父元素,无论其父元素是什么定位方式
c.absolute-绝对定位