亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    看看這些前端面試題,帶你搞定高頻知識點(一)

    看看這些前端面試題,帶你搞定高頻知識點(一)

    每天10道題,100天后,搞定所有前端面試的高頻知識點,加油?。。?,在看文章的同時,希望不要直接看答案,先思考一下自己會不會,如果會,自己的答案是什么?想過之后再與答案比對,是不是會更好一點,當然如果你有比我更好的答案,歡迎評論區(qū)留言,一起探討技術(shù)之美。

    面試官:給定一個元素,如何實現(xiàn)水平垂直居中?

    我:呃~,針對這個問題,我想到了三種常見的方式:定位、flexgrid布局。整出代碼如下

    定位:因為這個元素不確定是不是塊級元素 (塊級元素是否有寬高) 還是行內(nèi)元素,所以需要使用 transform 屬性來做負的 50%移動(基于當前元素寬高)。

    <style>   html,body{     margin: 0;     padding: 0;     height: 100%;     position: relative;   }   .item{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);   } </style> <body>   <div class="item" style="width: 100px; height: 100px; background: #999;">     塊狀元素   </div>   <div class="item" style="color: red;">不定高寬的塊狀元素</div>   <span class="item" style="color: green;">行內(nèi)元素</span> </body>
    登錄后復制

    flex布局:不僅支持塊狀元素,而且支持行內(nèi)元素,對固定高寬與不固定高寬皆可使用?!?/p>

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號