今天学习的div，了解了div是干什么用的掌握了什么是盒子模型，以及div的外边距内边距以及边框，运用div和CSS给文字排版，利用边框的来做图像，div溢出的处理
CSS初始化： 精确排版的时候用这个清理一下
*{
margin:0px;
padding:0px;
}
*/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div介绍</title>
<!--
<div></div>不是功能标签
是可以放文字、图片以及各种元素块标签，相当于是个方便袋，常用于来布局
div不设置宽高不显示--> <style> #d1{
background-color: red;
width: 50px;
height: 50px;
float: left;
} #d2{
background-color: blue;
height: 100px;
width: 100px;
/* 浮动*/
float: right;
}
#d3{
background-color:#666666; height: 100px;
/*清除浮动，不让浮动的盖住*/
clear: both;
}
</style>
</head> <body> <div id="d1">我是左div</div>
<div id="d2">我是右div</div>
<div id="d3">我是三div</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>溢出处理</title>
<style>
#d{
background-color: yellow;
width: 100px;
height: 100px;
/*如果内容超出div则隐藏*/
/* overflow: hidden;*/
/*不管内容是否超出，都会给div加一个滚动条*/
/* overflow: scroll;*/
/*如果内容不超出div则没有滚动条，如果超出；自动添加滚动条 */
overflow: auto;
} </style>
</head> <body>
<div id="d">
刘奶奶找牛奶奶买牛奶，牛奶奶给刘奶奶拿牛奶
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>快速添加边框的粗细、类型、颜色</title>
<style>
#d{
/*快速添加边框的粗细、类型、颜色*/ border-left: 100px solid white;
border-right: 100px solid white;
border-bottom: 100px solid #FC01FB;
width: 00px;
height: 00px;
background-color: yellow;
}
#d1{ border-left: 100px solid white;
border-right: 100px solid white;
border-bottom: 100px solid #06B5D1;
width: 00px;
height: 00px;
background-color: yellow;
}
#d2{
width: 85px;
height: 100px;
background-color: white;
float: left;
}
#d3{
width: 30px;
height: 100px;
background-color: yellow;
float: left;
}
#d4{
width: 85px;
height: 100px;
background-color: white;
float: left; }
</style>
</head> <body>
<div id="d"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页文字用DIV排版</title>
<style>
li{
list-style-type: none;
float: left;
/* 间距*/
margin: 20px;
}
</style>
</head> <body>
<ul>
<li> 首页</li>
<li>新闻网</li>
<li>首页概况</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型边框属性 CSS初始化</title>
<style>
/*盒子模型：
外边距；margin margin:auto auto的意思是自适应
边框；barder
内边框；padding
margin重叠现象：只要有一个元素没有float属性就会出现重叠现象，margin取相邻元素的margin最大值
CSS初始化：
*{
margin:0px;
padding:0px;
} */
*{
margin:0px;
padding:0px;
}
#big{
width: 500px;
height: 500px;
background-color: yellow;
}
#small1{
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 10px 10px 10px; /*上右下左*/
border: 20px solid black;
padding: 10px; /*上右下左和margin一样*/
}
#small2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin: 10px;
} #small3{
width: 100px;
height: 100px;
background-color: aqua;
clear: both;
margin: 10px;
}
#small4{
width: 100px;
height: 100px;
background-color: orange;
clear: both;
margin: 10px;
}
</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>