/*
<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>
原文地址：https://www.cnblogs.com/awdsjk/p/10628654.html
时间： 2025-01-11 23:01:10