position
今天重新看了下绝对定位,总算明白那个绝对居中的原理了。
绝对定位是对它关系最近的一个有定位属性的父元素进行定位,参数先看left top,再看right bottom。
绝对居中布局是指(对其关系最近的一个有定位属性的父元素进行居中)
.div { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0 }
margin: auto起到的作用是将div相对其父元素延伸出左右上下相等的外补丁从而实现居中
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .outer { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; height: 200px; width: 200px; background: yellow; } .inner { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; height: 100px; width: 100px; background: blue; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
Demo如下:
外
里
同样地,我们可以活用这个规则,创建出指定宽度的分列布局,只需要将上例的四个方向属性由0改为一个规定的百分值,即可实现,下为我把一个div划为三列的写法:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .outer { position: relative; margin: auto; height: 200px; width: 600px; background: yellow; } .inner { height: 200px; width: 33.33333333%; position: absolute; margin: 0 auto; } .a { left: 0; right: 66.66666667%; background: green; } .b { left: 0; right: 0; background: blue; } .c { left: 66.66666667%; right: 0; background: red; } </style> </head> <body> <div class="outer"> <div class="inner a"></div> <div class="inner b"></div> <div class="inner c"></div> </div> </body> </html>
Demo:
左
中
右