盒模型
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>css 序
原文地址：https://www.cnblogs.com/zhangqing979797/p/9670363.html