框模型/ 盒模型/盒子模型
水平布局
-
元素在其父元素中的水平方向位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
共同决定 -
一个元素在其父元素中，水平布局必须满足：上述七个值的和=其父元素内容区的宽度
（1）若相加结果不成立，成为过度约束，则，等式会自动调整
（2）若七个值中没有为auto的情况，则，浏览器会自动调整margin-right使得等式成立- 注意：当等式不成立时，就算margin-right有设置也无效，而是会调整margin-right使等式成立。
- 例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于盒子的水平布局</title> <style> .boxOne{ width: 600px; height: 200px; border:10px inset cadetblue; } .inner{ width: 200px; height: 200px; background-color: lightblue; margin-left: 100px; margin-right: 1000px; } </style> </head> <body> <div class="boxOne"> <div class="inner"></div> </div> </body> </html>
效果如下：
就算margin-right设置为1000px，也会因为等式不成立，把margin-right调整为300px,而不会调整margin-left
-
七个值中可设置为auto的有：width、margin-left、margin-right
（1）当有某一个值为auto，则会自动调整为auto的那个值使得等式成立
（2）若width=auto和某一个外边距=auto，则，宽度调整到最大，设置auto的外边距为0
（3）若width=auto和两个外边距都=auto，则，宽度调整到最大，设置auto的两个外边距都为0
（4）若width=固定值且两个外边距都=auto，则，将两外边距设置为相同的值
（ 通常使用该方式使得某元素在其父元素中水平居中） -
水平居中举例：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于盒子的水平布局</title> <style> .boxOne{ width: 600px; height: 200px; border:10px inset cadetblue; } .inner{ width: 200px; height: 200px; background-color: lightblue; margin: 0 auto; } </style> </head> <body> <div class="boxOne"> <div class="inner"></div> </div> </body> </html>
效果
-
若子元素width大于父元素width
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于盒子的水平布局</title> <style> .boxOne{ width: 600px; height: 200px; border:10px inset pink; } .inner{ width: 800px; height: 200px; background-color: darksalmon; } </style> </head> <body> <div class="boxOne"> <div class="inner"></div> </div> </body> </html>
效果
垂直布局
- 默认情况下，父元素的高度被内容撑开
- 子元素大小超过父元素高度时，子元素会从父元素中溢出
- 使用overflow属性：设置父元素如何处理子元素的溢出
（1）visible默认值：子元素溢出，超出部分仍显示
（2）hidden：子元素被裁减，超出部分不会显示
（3）auto：根据需要生成滚动条（横向或纵向）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于盒子的垂直布局</title> <style> .boxOne{ width: 200px; height: 150px; background-color: darksalmon; overflow:auto; } </style> </head> <body> <div class="boxOne"> 我的少年们，别因他人沉沦享乐而感到迷茫，别为如今的潦倒而感到沮丧。 你夜以继日的努力、克制欲望的自律、孑然独行的从容，都正在带你去向更广阔的未来。 朱颜易辞镜，千金会散尽，唯有千万个日夜汇聚的思想才是这个世上最锐不可当的锋芒。 你不能就这样败在这里。 </div> </body> </html>
效果图