溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS怎么設(shè)置寬高等比布局

發(fā)布時(shí)間：2023-01-04 09:47:28 來源：億速云 閱讀：206 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“CSS怎么設(shè)置寬高等比布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS怎么設(shè)置寬高等比布局”吧!

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

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

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

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

原題目:

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

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

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

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

紅色部分寬高之比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)已離開武當(dāng)），八奇技之一風(fēng)后奇門的繼承人，靠占卜悟出天道，卻又作出甘于投身亂世的選擇。外表一副老好人的溫良相，謙謙有禮如溫吞水般，做事也經(jīng)常是一副沒精打采，貌似沒睡醒的樣子。優(yōu)哉游哉還脾氣軟，代表舉動(dòng)經(jīng)常是歉意笑著作出讓步。似乎對什么都無所謂，一副悠然道人之姿，但是在涉及到家人安危時(shí)毫不含糊，甚至為此做出過有失冷靜的舉動(dòng)。不小心爆粗都會拜祖道歉的出家人，實(shí)力在后生一輩中甚至稱得上頭籌，暫時(shí)只有一次完全沒預(yù)料到地陰溝里翻船。</span></div>
    </section>
</body>
</html>

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標(biāo)簽使用style=""。

2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用進(jìn)行聲明。

3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

到此，相信大家對“CSS怎么設(shè)置寬高等比布局”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手