欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS如何實(shí)現(xiàn)寬高等比布局-創(chuàng)新互聯(lián)

小編給大家分享一下CSS如何實(shí)現(xiàn)寬高等比布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括大邑縣網(wǎng)站建設(shè)、大邑縣網(wǎng)站制作、大邑縣網(wǎng)頁(yè)制作以及大邑縣網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，大邑縣網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到大邑縣省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

寬度是高度的兩倍(等比縮放)

實(shí)現(xiàn)思路: 以父級(jí)元素為基準(zhǔn), 子級(jí) width:100%; (也就是父級(jí)寬度的100%), padding-top:50% (也就是父級(jí)寬度的50%,根據(jù)css規(guī)范, padding用百分比表示的話, padding: 100%等于父元素的寬度);

為什么不直接`width: 50%; height: 50%;?

那樣高度就成了父級(jí)高度的50% (不合題意,除非父級(jí)寬高相等);

原題目:

  1. 紅色塊級(jí)元素垂直居中于屏幕中央；

  2. 紅色塊級(jí)元素距離屏幕左右邊距各20px;

  3. 紅色塊級(jí)元素里面的內(nèi)容水平垂直居中；

  4. 紅色塊級(jí)元素的高度始終是紅色塊級(jí)元素寬度的50%。

CSS如何實(shí)現(xiàn)寬高等比布局

紅色部分寬高之比2:1

源碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>寬高比例固定</title>
    <style>

        .father{
            overflow: hidden;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #0c8ac5;
        }

        .son{
            width: 100%;
            padding-top: 50%;
            background-color: #c03035;

        }
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: #D8D8D8;
        }

        img{
            float: left;
            margin-right: 10px;
            border: 2px solid #fdf6e3;
        }

    </style>
</head>
<body>
    <section class="father">
        <div class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武當(dāng)派弟子（現(xiàn)已離開(kāi)武當(dāng)），八奇技之一風(fēng)后奇門(mén)的繼承人，靠占卜悟出天道，卻又作出甘于投身亂世的選擇。外表一副老好人的溫良相，謙謙有禮如溫吞水般，做事也經(jīng)常是一副沒(méi)精打采，貌似沒(méi)睡醒的樣子。優(yōu)哉游哉還脾氣軟，代表舉動(dòng)經(jīng)常是歉意笑著作出讓步。似乎對(duì)什么都無(wú)所謂，一副悠然道人之姿，但是在涉及到家人安危時(shí)毫不含糊，甚至為此做出過(guò)有失冷靜的舉動(dòng)。不小心爆粗都會(huì)拜祖道歉的出家人，實(shí)力在后生一輩中甚至稱(chēng)得上頭籌，暫時(shí)只有一次完全沒(méi)預(yù)料到地陰溝里翻船。</span></div>
    </section>
</body>
</html>

以上是“CSS如何實(shí)現(xiàn)寬高等比布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱(chēng)：CSS如何實(shí)現(xiàn)寬高等比布局-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://www.chinadenli.net/article48/dcsjhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站維護(hù)、軟件開(kāi)發(fā)、虛擬主機(jī)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)