溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS怎么設置寬高等比布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS怎么設置寬高等比布局”吧!
寬度是高度的兩倍(等比縮放)
實現思路: 以父級元素為基準, 子級 width:100%; (也就是父級寬度的100%), padding-top:50% (也就是父級寬度的50%,根據css規范, padding用百分比表示的話, padding: 100%等于父元素的寬度);
為什么不直接`width: 50%; height: 50%;?
那樣高度就成了父級高度的50% (不合題意,除非父級寬高相等);
原題目:
紅色塊級元素垂直居中于屏幕中央；
紅色塊級元素距離屏幕左右邊距各20px;
紅色塊級元素里面的內容水平垂直居中；
紅色塊級元素的高度始終是紅色塊級元素寬度的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"> 王也, 武當派弟子（現已離開武當），八奇技之一風后奇門的繼承人，靠占卜悟出天道，卻又作出甘于投身亂世的選擇。外表一副老好人的溫良相，謙謙有禮如溫吞水般，做事也經常是一副沒精打采，貌似沒睡醒的樣子。優哉游哉還脾氣軟，代表舉動經常是歉意笑著作出讓步。似乎對什么都無所謂，一副悠然道人之姿，但是在涉及到家人安危時毫不含糊，甚至為此做出過有失冷靜的舉動。不小心爆粗都會拜祖道歉的出家人，實力在后生一輩中甚至稱得上頭籌，暫時只有一次完全沒預料到地陰溝里翻船。</span></div>
</section>
</body>
</html>1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。
2.內嵌樣式，就是將CSS代碼寫在之間，并且用進行聲明。
3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上就可以了。其次就是導入樣式，導入樣式和鏈接樣式比較相似，采用@import樣式導入CSS樣式表，不建議使用。
到此，相信大家對“CSS怎么設置寬高等比布局”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
