1.内边距 padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0px; } .div1{ width:100px; height:100px; background-color:red; padding:10px;/*内边距以内容为目标，距离边框的距离，盒子会被撑大*/ //如果没有给出left-top-right-bottom，默认为全部都是这个边距 } </style> <body> <div class="div1"></div> </body>
2.外边距 margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0px; } .div2{ width:100px; height:100px; background-color:green; border:2px solid yellow;
//Border：围绕在内边距和内容外的边框
margin-top:40px;
//margin:用于控制元素与元素之间的距离；margin最基本的用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
} </style> <body> <div class="div2"></div>
<!--margin collaspe 边境坍陷或者说边境重叠
外边距的重叠只产生在普通流文档的上下边距之间，这个看起来有点奇怪的规则，其实有其现实意义，设想
当我们上下排列一系列规则的块及元素,(如段落 p时)那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离
1.兄弟div：上面的margin-bottom和下面的div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2.父子div： 如果父级div中没有border，padding，inline content，子级的div会一直向上找，
直到找到某个标签包括border padding inline content 中的其中一个，然后按此div进行margin
-->
</body>
</html>
3.浮动 float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .continer{ border:1px solid red; width:300px; } .div1{ width:100px; height:200px; background-color:yellow; float:left; } .div2{ width:100px; height:200px; background-color:green; float:right;//浮动脱离文档流，后面的元素会填充进来，如果前面的元素也为浮动元素，会停在浮动元素后面 } .div3{ clear:both; } .div4{ background-color:blue; } .clearfix:after{ content:""; display:block; clear:both;/*清除左右浮动*/ } </style> </head> <body> <div class="continer clearfix"> <div class="div1">box1</div> <div class="div2">box2</div> <!--<div class="div3"></div>--> </div> <div class="div4">box4</div> </body> </html>
4.定位 position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位属性</title> <style> *{ margin:0px; } .div1{ width:200px; height:100px; background-color:yellow; } .div2{ width:200px; height:100px; background-color:green; position:absolute;/*绝对定位脱离文档流，相对于已定位的祖先元素，如果祖先元素没有定位则相对于body元素*/ /*position:relative;*//*相对定位，相对于自己原来的位置进行重新定位，不脱离文档流*/ left:100px; top:100px; } .div3{ width:100px; height:200px; background-color:red } .div4{ width:200px; height:200px; background-color:blue; } .return{ width:80px; height:80px; position:fixed;/*已窗口为参考点，固定定位*/ bottom:50px; right:5px; color:green; text-align:center; line-height:80px; background-color:blue; } </style> </head> <body> <div class="continer clearfix"> <div class="div1">box1</div> <div class="div2">box2</div> <div class="div3">box3</div> <div class="div4">box4</div> </div> <div style="height:2000px;background-color:pink"></div> <div class="return">返回顶部</div> <!--仅使用margin属性布局绝对定位：margin-bottom，margin-right的值不再对文档流产生影响，因为元素已经脱离文档流 不管他的祖先元素有没有定位，都是以文档流中原来的位置偏移参照物--> </body> </html>
5.display属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:50px; height:50px; background-color:yellow; /* display:inline;*/ } p{ width:50px; height:50px; background-color:red; /*display:inline*/ } span{ width:50px; height:50px; background-color:blue; display:inline-block; } a{ width:50px; height:50px; background-color:green; display:inline-block; } </style> </head> <body> <div>div1</div> <p>123</p> <span>spannnnn</span> <a href="#">abcaaaaa</a> </body> </html>