块级元素就是那些自为一行的元素,有高度宽度。行内元素没有高度,行内块级元素有高度,不换行。
好了,下面用几个刚刚试验的例子把这部分知识小记一下,为日后深入学习打基础。
1.水平居中
- 非块级元素水平居中:
设置父元素的text-align:center就可以了。
- 块级元素水平居中:
position不是absolute也不是fixed时(也就是并未脱离文档流),margin-left=margin-right=auto,块级元素width不是aoto,就可实现水平居中。
![](https://i-blog.csdnimg.cn/blog_migrate/514de96b0b50a29ed1e62799253e2bd0.png)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"/> 4 <head> 5 <style type="text/css"> 6 #header{ 7 border: 1px solid red; 8 height: 100px; 9 } 10 #container{ 11 border: 1px solid blue; 12 margin:0 auto; 13 width: 300px; 14 height: 300px; 15 text-align: center; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="header" >header</div> 21 <div id="container" > 22 container 23 </div> 24 </body> 25 </html>
2.垂直居中
- 文本垂直居中
如果只有一行本文,设置容器的line-height等于容器height。
#container{ border: 1px solid blue; margin:0 auto; width: 300px; height: 300px; text-align: center; line-height: 300px; }
如果是多行文本至少要再加一个容器box把文本包起来,可以设置box的margin或者其父容器的margin。另一个方法就是使用vertical-align属性,但这个属性只对表格元素有效,所以需要设置box父元素display:table,设置box的display:table-cell。
- 块级元素垂直居中
要借助position和left、top几个属性。top表示向下平移,其他同理。position属性有四个值:
static: 静态定位,默认值,在文档流中不移动,此时top等属性无效。
relative:相对定位,相对自己原本位置定位,不脱离文档流。
absolute:绝对定位,相对非static父元素定位,脱离文档流(原来位置被别人占了)。
fixed:固定定位,相对浏览器窗口定位,也脱离文档流,总用做购物车广告等。
如果要垂直居中的元素设置成绝对定位,top和left在按容器和居中元素大小设置一下就可以了,但前提是父元素是非static的。就像下面这样。
![](https://i-blog.csdnimg.cn/blog_migrate/cbf7d0e78d8a00e0b0216416e79cd899.png)
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <style type="text/css"> #header{ border: 1px solid red; height: 100px; } #container{ border: 1px solid blue; margin:0 auto; width: 300px; height: 300px; position: relative; } #content{ position:absolute; top: 100px; left: 100px; background-color: gray; width: 100px; height: 100px; } </style> </head> <body> <div id="header" >header</div> <div id="container" > <div id="content"> content </div> </div> </body> </html>
换几种情况考虑,如果居中元素是相对定位的,就不要求父元素是非static的了。这固然好,但限制是不方便计算偏移量,偏移量是相对自己原位置算的,如果居中元素上方有兄弟节点也需要考虑进去,麻烦的是如果兄弟节点大小不固定,恐怕只能用脚本动态去算了。如果居中元素是固定定位的呢?考虑了一下,使用固定定位做垂直居中没有什么特殊的优势。
3.拉伸
对于行内元素、行内块级元素、浮动元素、表格及绝对定位元的素:
- left=right=auto,width=auto时是横向收缩的
- top=bottom=auto,height=auto时,是纵向收缩的
对于块级元素和绝对定位的元素:
- left=right!=auto,width=auto时是横向拉伸的
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <style type="text/css"> label{ border: 1px solid blue; margin: 1px 0; } div{ border: 1px solid red; margin: 1px 0; } </style> </head> <body> <label>我是横向收缩的label1</label> <div>我是横向拉伸的div1</div> </body> </html>
auto通常是默认值,我们看到的非块级元素横向纵向多数是收缩的,如图中label。而块级元素div默认是横向拉伸纵向收缩的,如图中div1。浏览器通常会给元素加默认样式,所以元素并没有完全与浏览器窗口贴上,如果添加*{margin:0;padding:0;}就显示正常了。
对于绝对定位元素:
- top=bottom=!auto,height=auto时,是纵向拉伸的。
![](https://i-blog.csdnimg.cn/blog_migrate/9f91e1b48909d54bc14c52850ae76014.png)
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <style type="text/css"> div{ position: absolute; background-color: green; top:0; bottom:0; height:auto; } </style> </head> <body> <div>我是纵向拉伸的div2</div> </body> </html>
auto与100%的尺寸差别