盒模型水平居中
在div容器中可以放置任意内容,Eg:一段文本,一张图片,一个表格,甚至另一个子容器div等。使用属性text-align:center可以设置容器中的内容(包括表格)水平居中,这样的属性针对普通内容,比如文本或图片都是生效的,但是如果容器中放置的子元素仍然还是一个容器,那么单纯地设置text-align:center是不会生效的,text-align:left或right亦然。如果也需要水平居中对齐,就需要在div的外面再套一个更大的div容器,让外面的div容器实现水平居中即可。通过案例4-4,example04.html来体验,效果如图4-6所示。
例4-4 example04.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>盒子的宽度</title> <style> #divouter{ width: 640px; height: 220px; border: solid 5px aqua; margin: 0 auto;} .divinner{width: 300px; height: 200px; border: solid 5px red; float: left;margin: 5px; } </style> </head> <body> <div id="divouter"> <div></div> <div></div> </div> </body> </html> | ||
| ||
图4-6 多个盒子模型水平居中
注意:
盒子实际宽度(高度)=内容(content)+边框(border)+间隙(padding)+间隔(margin)。对于任何一个元素设置width和height控制内容大小,也可以分别设置各自的边框(border)、间隙(padding)、间隔(margin)。灵活设置这些盒子的这些属性,可以实现各自排版效果
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距