CSS3與頁面佈局學習總結

時間 2019-11-13

標籤 css3 css 頁面佈局學習總結欄目 CSS 简体版

原文原文鏈接

1、負邊距與浮動佈局
1.一、負邊距
所謂的負邊距就是margin取負值的狀況，如margin:-100px，margin:-100%。當一個元素與另外一個元素margin取負值時將拉近距離。常見的功能以下：css

1.1.一、向上移動
當多個元素同時從標準流中脫離開來時，若是前一個元素的寬度爲100%寬度，後面的元素經過負邊距能夠實現上移。當負的邊距超過自身的寬度將上移，只要沒有超過自身寬度就不會上移，示例以下：html

複製代碼
<!DOCTYPE html>
<html>瀏覽器

<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#div1 {
height: 100px;
background: lightblue;
width: 100%;
float: left;
}

#div2 {
height: 100px;
background: lightgreen;
width: 30%;
float: left;
margin-left: -100%;
}
</style>
</head>ide

<body>
<div id="div1">div1
</div>
<div id="div2">div2
</div>
</body>佈局

</html>
複製代碼
margin-left:-29%時運行效果：學習

margin-left:-30%時運行效果：ui

margin-left:-100%時運行效果：spa

1.1.二、去除列表右邊框
開發中常須要在頁面中展現一些列表，如商品展現列表等，若是咱們要實現以下佈局：htm

示例代碼：開發

複製代碼
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#div1 {
width: 800px;
margin: 0 auto;
border: 3px solid lightblue;
overflow: hidden;
margin-top: 10px;
}

.box {
width: 180px;
height: 180px;
margin: 0 20px 20px 0;
background: lightgreen;
float: left;
}
</style>
</head>

</html>
複製代碼
運行後的結果：

可是上面的效果中右邊多出了20px的距離，底下多出20px空白，解決方法以下：

複製代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>負邊距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 780px;
height: 380px;
margin: 0 auto;
border: 3px solid lightblue;
overflow: hidden;
margin-top: 10px;
}
.box {
width: 180px;
height: 180px;
margin: 0 20px 20px 0;
background: lightgreen;
float: left;
}
#div2{
margin-right: -20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html>
複製代碼
方法是使用了邊距摺疊，能夠在前面的文章中查看到細節，基本原理以下圖所示：

1.1.三、負邊距+定位，實現水平垂直居中
具體請參考《CSS3與頁面佈局學習總結（三）——BFC、定位、浮動、7種垂直居中方法》

1.1.四、去除列表最後一個li元素的border-bottom

方法一：

View Code

方法二：

使用CSS3中的新增長選擇器，選擇最後一個li，不使用類樣式，好處是當li的個數不肯定時更加方便。

若是li的border-bottom顏色與ul的border顏色是同樣的時候，在視覺上是被隱藏了。若是其顏色不一致的時候仍是有問題，給ul寫個overflow：hidden；就能夠解決這個問題。

練習：

1.二、雙飛翼佈局
經典三列布局，也叫作聖盃佈局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：

一、三列布局，中間寬度自適應，兩邊定寬；
二、中間欄要在瀏覽器中優先展現渲染；
三、容許任意列的高度最高；
四、要求只用一個額外的DIV標籤；
五、要求用最簡單的CSS、最少的HACK語句；

在不增長額外標籤的狀況下，聖盃佈局已經很是完美，聖盃佈局使用了相對定位，之後佈局是有侷限性的，並且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增長多一個div就能夠不用相對佈局了，只用到了浮動和負邊距，這就是咱們所說的雙飛翼佈局，實現的代碼以下：

複製代碼
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>雙飛翼</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body,
html {
height: 100%;
font: 20px/40px "microsoft yahei";
color: white;
}

#container {
width: 90%;
margin: 0 auto;
height: 100%;
}

#header,
#footer {
height: 12.5%;
background: deepskyblue;
}

#main {
height: 75%;
}

#center,
#left,
#right {
height: 100%;
float: left;
}

#center {
width: 100%;
background: lightgreen;
}

#right {
background: lightblue;
width: 20%;
margin-left: -20%;
}

#left {
background: lightcoral;
width: 20%;
margin-left: -100%;
}

#main-inner {
padding-left: 20%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="main">
<div id="center">
<div id="main-inner">
center
</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

例如：

<div id="cui_nav"> <div class="base_nav"> <ul id="cui_nav_ul" class="cui_nav cui_content"> <li id="cui_c_ph_hp">首頁</li> <li class="divider "></li> <li id="cui_nav_hotel">酒店<div class="cui_subnav_wrap"> <ul id="ul_nav_hotel" class="cui_sub_nav"> <li id="ul_c_ph_hotel_h">國內酒店</li> <li class="divider "></li> <li id="ul_c_ph_hoteli_h">海外酒店</li> <li class="divider "></li> <li id="ul_c_ph_apartment_h">海外民宿+短租</li> <li class="divider "></li> <li id="ul_c_ph_tuan_h">團購</li> <li class="divider "></li> <li id="ul_c_ph_hotsale_h">特價酒店</li> <li class="divider "></li> <li id="ul_c_ph_tujia_h">途家公寓</li> <li class="divider "></li> <li id="ul_c_ph_taocanj_h">酒店+景點</li> <li class="divider "></li> <li id="ul_c_ph_inn_h">客棧民宿</li> <li class="divider "></li> <li id="ul_c_ph_meeting_h">會場+團隊房</li> </ul>酒店訂單 ></div> </li> <li class="divider "></li> <li id="cui_nav_vac">旅遊<span class="label-en" id="ACT_Label_31" style="display:none"><em>12-12</em><i class="triangle"></i></span><i class="cui_ico_triangle"></i><span class="point"></span><div class="cui_subnav_wrap"> <ul id="ul_nav_vac" class="cui_sub_nav"> <li id="ul_c_ph_vacations_v">旅遊首頁<span class="label-cn" id="ACT_Label_30" style="display:none"><em>5折起</em><i class="triangle"></i></span></li> <li class="divider "></li> <li id="ul_c_ph_around_v">週末遊</li> <li class="divider "></li> <li id="ul_c_ph_vacationsd_v">跟團遊</li> <li class="divider "></li> <li id="ul_c_ph_taocan_v">自由行</li> <li class="divider "></li> <li id="ul_c_ph_cruise_v">郵輪</li> <li class="divider "></li> <li id="ul_c_ph_taocanj_v">酒店+景點</li> <li class="divider "></li> <li id="ul_c_ph_huodong_v">當地玩樂</li> <li class="divider "></li> <li id="ul_c_ph_zhutiyou_v">主題遊<span class="label-en" id="ACT_Label_21" style="display:none"><em>HOT</em><i class="triangle"></i></span></li> <li class="divider "></li> <li id="ul_c_ph_baotuan_v">定製旅行</li> <li class="divider "></li> <li id="ul_c_ph_youxue_v">遊學</li> <li class="divider "></li> <li id="ul_c_ph_visa_v">簽證</li> <li class="divider "></li> <li id="ul_c_ph_mice_v">企業會獎</li> <li class="divider "></li> <li id="ul_c_ph_hh_v">頂級遊</li> <li class="divider "></li> <li id="ul_c_ph_golf_v">愛玩戶外</li> <li class="divider "></li> <li id="ul_c_ph_insurance_v">保險</li> <li class="divider "></li> <li id="ul_c_ph_deals_v">特賣匯</li> </ul></i><a href="http://jiaxing.changtu.com/">嘉興客運中心官網</a></div> </li> </li>