盒子模型/div标签/益出处理
Posted awdsjk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒子模型/div标签/益出处理相关的知识，希望对你有一定的参考价值。
/*
<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>
以上是关于盒子模型/div标签/益出处理的主要内容，如果未能解决你的问题，请参考以下文章