最近筆試經常碰到這個題,平時寫代碼好像很少思考這方面的,我來做一個小小的總結,以備面試之需。。
關於元素垂直布局方面的問題還有很多,而且面試很喜歡問,比如兩列內容不同的布局,高度自適應。我也寫出來。
一、元素垂直置中:
既然用css實現,高和寬應該都是定值吧,如果是根據內容調整的是需要藉助js動態調整的。
<div id='div1'></div>
html,body{height:100%}
#div1{position:absolute;width:300px;height:200px;top:50%;left:50%;background:red;margin:-100px 0 0 -150px;}
被定位的元素必須是絕對位置的,先設一個初始位置,左上方在頁面正中間,再用margin位移
向左位移width/2 ; 向上位移height/2 ;需要我們自己計算,然後元素就置中了。
這是相對於body的,如果這個div是相對於父元素置中,就把父元素的posi設成relative,元素就能相對於父元素定位了。
二、2列布局高度自適應
面試中有時候會問到display有哪些屬性,常用的none,block,inline都能想到,我會容易忽略table相關的屬性。
這個問題用表格屬性寫比較容易。
<div id='div2'><div id='ch1'><ol><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>ddssd</li></ol></div><div id='ch2'><ol><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>refe</li><li>refe</li><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>refe</li><li>refe</li></ol></div></div>
#div2{width: 100%;display: table;}#ch1{display: table-cell;background: red;}#ch2{display: table-cell;background: blue;color: white;}
demo效果圖:
最近被筆試面試虐的心力交瘁啊,我要是早點發憤圖強就好了
只要肯學,每天都在進步,什麼時候都不晚。。。
加油加油。。。