盒子模型-水平布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> <style> .outer{ width: 800px; height: 200px; border: 10px red solid; } .inner{ width: 200px; height: 200px; background-color: green; } /* 一个元素在其父元素中。水平布局必须满足一下格式 margin-left+borber-left+padding-left+width+padding—right+borber-right margin-right = 父元素 以上等式必须满足，如果相加结果不不成立，则称为过度约束，则等式会自动调整 调整情况： 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right的值值使其满足 这七个之中有三个值可以设置auto width margin-left margin-right 如果某个值为auto 则会自动调整为auto的那个值使等式满足条件 0+0+0+auto+0+0+0=800 auto=800 auto+0+0+200+0+0+0=800 auto=600 如果将一个宽度和一个外边距设置为auto 则宽度会调整到最大，设置为auto的外边距自动为0 如果将三个值都设置为auto，则外边距都是零，宽度最大 如果将两个值设置成auto，宽度固定，则外边距会设置成相同的值 也就是水平居中 实例： width xxpx */ </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
盒子模型-外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: orange; border: 10px red solid; /* 外边距（margin） 外边距不会影响盒子的可见框的大小 但是外边距会影响盒子的位置 一共有四个方向的外边距 margin 也可以是负值，如果是赋值则元素会像相反的方向像移动 margin 会影响到盒子实际占用空间 元素在页面中都是按照自左向右的顺序排列的 所以默认情况下如果 */ } </style> </head> <body> <div class="box1"></div> </body> </html>
盒子模型-内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; border: 10px orange solid; /* 内边距： 内容区和边框之间的距离是内边距 一共有四个方向的内边距 padding-top padding-right padding-bottom padding-left 内边距的设置会影响到盒子的大小 背景颜色会延伸到内边距上 盒子的可见框大小由内容区，内边距，和边框共同决定 所以在计算盒子大小时，需要将这三个区域加到一起进行计算 */ /* padding-top: 100px; padding-left: 100px; padding-right: 100px; padding-left: 100px; */ /* padding 内边距的简写属性，可以同时指定四个方向的内边距‘ 规则和borber-width一样 */ padding: 10px; } </style> </head> <body> <div class="box1"></div> </body> </html>
