首頁 > 開發者 > JavaScript
Html_Task4(知識點：水平置中+垂直置中/position/float/border-radius)，borderradius
任務四：定位和置中問題任務目標
實踐HTML/CSS布局方式
深入瞭解position等CSS屬性
任務描述實現如 樣本圖（點擊開啟） 的效果
灰色元素水平垂直置中，有兩個四分之一圓位於其左上方和右下角。
任務注意事項思考不同情況下（如灰色高度是根據內容動態變化的）水平垂直置中的解決方案。
動手試一試各種情況的組合，父元素和子項目分別取不同的 position 值。思考 position 屬性各種取值的真正含義，尤其是 absolute 究竟是相對誰而言的。
注意測試不同情況，尤其是極端情況下的效果。
調節瀏覽器寬度，灰色元素始終水平置中。
調節瀏覽器高度，灰色元素始終垂直置中。
調節瀏覽器高度和寬度，黃色扇形的定位始終準確。
其他中給出的標識均被正確地實現，錯一項扣一分。
參考資料HTML和CSS進階指南之二——定位詳解：大漠老師手把手教你，這次徹底搞懂定位問題
Centering in CSS: A Complete Guide：完整討論了不同情況下的置中方案，建議自己思考之後再看答案
Get HTML & CSS Tips In Your Inbox：有人寫了一個作弊工具產生置中代碼，但是看著代碼你明白為什麼嗎
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>task4</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .dd{12 width: 400px;13 height: 200px;14 background-color:#ccc;15 position: absolute;16 left:50%;17 top:50%;18 margin-top: -100px;19 margin-left: -200px;20 /*要讓DIV水平和垂直置中，必需知道該DIV得寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。*/ 21 } 22 .lefttop{23 background-color: #fc0;24 width: 50px;25 height: 50px;26 float: left;27 border-bottom-right-radius: 50px;28 }29 .rightbottom{30 background-color: #fc0;31 width: 50px;32 height: 50px;33 float: right;34 position: relative;35 bottom: -150px;36 border-top-left-radius: 50px;37 }38 </style>39 </head>40 41 <body>42 <div class="dd">43 <div class="lefttop"></div>44 <div class="rightbottom"></div>45 46 </div>47 </body>48 </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
