第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

章節(jié)
問(wèn)答
課簽
筆記
評(píng)論
占位
占位

面試??碱}之寬高不定實(shí)現(xiàn)盒子水平垂直居中

這一章我們來(lái)學(xué)習(xí)未知寬高實(shí)現(xiàn)盒子水平垂直居中,通常使用定位以及translate完成。參考下面例子:

 <div class="box">
        <div class="box1">
            慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)
        </div>
    </div>

添加樣式:

 .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;

    }

    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

效果如下:

技術(shù)點(diǎn)的解釋?zhuān)?/strong>

1、利用父元素設(shè)置相對(duì)定位,子元素設(shè)置絕對(duì)定位,那么子元素就是相對(duì)于父元素定位的特性。

2、子元素設(shè)置上和左偏移的值都為50%。

3、然后再用css3屬性translate位移,給上和左都位移-50%距離,就能達(dá)到垂直水平居中的效果。

任務(wù)

掌握未知寬高實(shí)現(xiàn)盒子水平垂直居中的用法,可以使用右側(cè)編輯器中的代碼進(jìn)行測(cè)試。

?不會(huì)了怎么辦
||

提問(wèn)題

寫(xiě)筆記

公開(kāi)筆記
提交
||

請(qǐng)驗(yàn)證,完成請(qǐng)求

由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求

加群二維碼

打開(kāi)微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

  • · 粉絲專(zhuān)屬優(yōu)惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問(wèn)題答復(fù)提醒
  • · 賬號(hào)支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書(shū)簽

邀請(qǐng)您關(guān)注公眾號(hào)
關(guān)注后,及時(shí)獲悉本課程動(dòng)態(tài)

舉報(bào)

0/150
提交
取消
  • 問(wèn)答
  • 評(píng)論
  • 筆記
  • 代碼
全部 精華 我要發(fā)布
全部 我要發(fā)布
最熱 最新
只看我的

手記推薦

更多

本次提問(wèn)將花費(fèi)2個(gè)積分

你的積分不足,無(wú)法發(fā)表

為什么扣積分?

本次提問(wèn)將花費(fèi)2個(gè)積分

繼續(xù)發(fā)表請(qǐng)點(diǎn)擊 "確定"

為什么扣積分?