/*
<div></div>没有任何功能,不属于功能标签
可以放文字,图片以及各种元素的块标签
常常用来布局
span标签属于行内标签,无法设置宽高
*/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div标签</title> <style>
/*
<div></div>没有任何功能,不属于功能标签
可以放文字,图片以及各种元素的块标签
常常用来布局
span标签属于行内标签,无法设置宽高 */
#qf1{
background-color: #00FFFB;
width: 50px;
height: 150px;
float: left; } #qf2{
background-color:#E8FF00;
width: 100px;
height: 100px;
float: right;
} #qf3{
background-color:#00FF15;
/* width: 100px;*/
height: 100px;
/*清除浮动* both是都的意思,清除两边 飞起来:float 地上;clear*/
clear: both;
}
</style>
</head> <body>
<div id="qf1">我是左边div</div>
<div id="qf2">我是右边div</div>
<div id="qf3">我是第三个div</div>
</body>
</html>
益处处理:
/*如果内容超出div则隐藏*/
/*overflow: hidden;*/
/*不管div内容是否超出都会给div一个滚动条*/
/*overflow: scroll;*/
/*如果内容不超出div 则没有滚动条,如果超出,则自动添加滚动条*/
overflow: auto;
盒子模型:
/*盒子模型
1.外边距:margin
2.内边距:padding
3.边框:border
margin重叠现象:
只要有一个元素没有float属性就会出现重叠现象,margin取相邻元素margin最大值
CSS初始化:
*{
marhin:0px;
padding:0px;
}
*/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
*{
margin:0px;
padding:0px;
}
#big{
width:500px;
height: 500px;
background-color:#00B7EF;
} #small1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
margin: 10px;/*上右下左*/
border: 20px solid black;
padding: 10px; }
#small2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
margin: 10px; }
#small3{
width: 100px;
height: 100px;
background-color:#F700FD;
/*清除浮动* both是都的意思,清除两边 飞起来:float 地上;clear*/
clear: both;
margin:10px; }
#small4{
width: 100px;
height: 100px;
background-color:#FF0000;
clear: both;
margin: 20px; } </style>
</head> <body>
<div id="big">
<div id="small1">戒指</div>
<div id="small2"></div>
<div id="small3"></div>
<div id="small4"></div>
</div>
</body>
</html>