今天学习的div，了解了div是干什么用的掌握了什么是盒子模型，以及div的外边距内边距以及边框，运用div和CSS给文字排版，利用边框的来做图像，div溢出的处理
CSS初始化： 精确排版的时候用这个清理一下
*{
margin:0px;
padding:0px;
}
*/
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>div介绍</title> 6 <!-- 7 <div></div>不是功能标签 8 是可以放文字、图片以及各种元素块标签，相当于是个方便袋，常用于来布局 9 div不设置宽高不显示--> 10 11 <style> 12 13 14 #d1{ 15 background-color: red; 16 50px; 17 height: 50px; 18 float: left; 19 } 20 21 22 #d2{ 23 background-color: blue; 24 height: 100px; 25 100px; 26 /* 浮动*/ 27 float: right; 28 } 29 #d3{ 30 background-color:#666666; 31 32 height: 100px; 33 /*清除浮动，不让浮动的盖住*/ 34 clear: both; 35 } 36 </style> 37 </head> 38 39 <body> 40 41 <div id="d1">我是左div</div> 42 <div id="d2">我是右div</div> 43 <div id="d3">我是三div</div> 44 </body> 45 </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>溢出处理</title> <style> #d{ background-color: yellow; 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; 00px; height: 00px; background-color: yellow; } #d1{ border-left: 100px solid white; border-right: 100px solid white; border-bottom: 100px solid #06B5D1; 00px; height: 00px; background-color: yellow; } #d2{ 85px; height: 100px; background-color: white; float: left; } #d3{ 30px; height: 100px; background-color: yellow; float: left; } #d4{ 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{ 500px; height: 500px; background-color: yellow; } #small1{ 100px; height: 100px; background-color: red; float: left; margin: 10px 10px 10px; /*上右下左*/ border: 20px solid black; padding: 10px; /*上右下左和margin一样*/ } #small2{ 100px; height: 100px; background-color: blue; float: left; margin: 10px; } #small3{ 100px; height: 100px; background-color: aqua; clear: both; margin: 10px; } #small4{ 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>