css的盒子模型
** 在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框
border:2px solid blue; border：统一设置 上：border-top 下：border-bottom 左：border-left 右：border-right
<html> <head> <title>World</title> <style type="text/css"> div { border:2px solid blue; width:200px; height:100px; } #div12 { border-right:10px dashed orange; } </style> </head> <body> <div id="div11">AAAAAAAAAAA</div> <div id="div12">BBBBBBBBBBB</div> <div id="div13">CCCCCCCCCCC</div> </body> </html>效果如下：
（2）内边距 padding:20px; padding：统一设置 上：padding-top 下：paddingr-bottom 左：padding-left 右：padding-right 上下左右四个内边距
<html> <head> <title>World</title> <style type="text/css"> div { border:2px solid blue; width:200px; height:100px; } #div12 { padding:20px; } #div13 { padding-left:50px; } </style> </head> <body> <div id="div11">AAAAAAAAAAA</div> <div id="div12">BBBBBBBBBBBBBBBBBBBBBBBBb</div> <div id="div13">CCCCCCCCCCC</div> </body> </html>效果如下：
（3）外边距 margin:20px; margin：统一设置 上：margin-top 下：margin-bottom 左：margin-left 右：margin-right 上下左右四个外边距
<html> <head> <title>World</title> <style type="text/css"> div { border:2px solid blue; width:200px; height:100px; } #div12 { margin:30px; } #div13 { margin-left:30px; } </style> </head> <body> <div id="div11">AAAAAAAAAAA</div> <div id="div12">BBBBBBBBBBB</div> <div id="div13">CCCCCCCCCCC</div> </body> </html>效果如下：
转载于:https://www.cnblogs.com/ibabyli/p/9888744.html
