盒模型
1.属性:width :内容的宽度 书写内容的宽度
height:内容的高度 书写内容的宽度
padding:内边框 内容到边框的距离 可以有 background-color
border:边框 可以显示颜色 就是比作一个门框 border: 10px solid green;
margin:外边框 另一个边到另一个变的距离
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 width: 50px; 9 height: 50px; 10 background: aqua; 11 border: 50px solid red; 12 padding: 50px ; 13 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box"></div> 19 20 </body> 21 </html>
2.关于移动
padding 是关于父子的移动 就是是本身在整个内容下进行整体的上下左右
用padding-left.top,right,buttom 来进行移动
margin 是关于兄弟之间的移动 可以通过margin-left... 移动像素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background: blue; 11 padding-left: 100px; 12 border: 1px solid red ; 13 14 } 15 span{ 16 background: crimson; 17 18 } 19 .qqq{ 20 margin-left: 50px; 21 } 22 23 </style> 24 </head> 25 <body> 26 <div class="box"> 27 <span>zq</span> 28 <span class="qqq">zq</span> 29 </div> 30 <div class="box"> 31 <span>zq</span> 32 33 </div> 34 35 </body> 36 </html>
盒模型的计算：
总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
前提是：在标准文档流
padding：父子之间调整位置
margin: 兄弟之间调整位置
3.浮动
在一个盒子上,包含了许多了不同的div 要是能在一个界面上显示多种不同的颜色就需要颜色划分,但是在一个
已经分配好的布局上怎么加入其他的颜色呢,这就需要浮动,使其变成不标准的界面
float
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .top-Bar{ 12 width: 100%; 13 height: 40px; 14 background: lightslategrey; 15 } 16 /*将这和区域居中*/ 17 .container{ 18 width: 1624px; 19 height: 40px; 20 background: red; 21 padding: auto; 22 margin: auto; 23 } 24 /*将这片区域用嵌套的方式并排掺入,因为引用了浮点,不再是标准的*/ 25 .top-Bar .top-1{ 26 width: 700px; 27 height: 40px; 28 background: darkslateblue; 29 float: left; 30 } 31 /*将这片区域以右对的方式,同上*/ 32 .top-Bar .top-shop{ 33 34 width: 150px; 35 height: 40px; 36 background: darkolivegreen; 37 float: right; 38 39 } 40 .top-Bar .top-info{ 41 width: 100px; 42 height: 40px; 43 background: sandybrown; 44 float: right; 45 margin-right: 20px; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="top-Bar"> 51 <div class="container"> 52 <div class="top-1"> 53 </div> 54 <!--这里注意是包含在container里面 --> 55 <div class="top-shop"></div> 56 <div class="top-info"></div> 57 58 </div> 59 </div> 60 </body> 61 </html>