css 推薦的樣式編寫順序： 1. Positioning：定位 2. Box model：盒子模型、大小等 3. Typographic：文字系列、排印等 4. Visual：可視化、背景等 5. Misc：其它混雜模式 居中 垂直居中，設置line height 水平方向 text align ...
css
推薦的樣式編寫順序：
- Positioning：定位
- Box model：盒子模型、大小等
- Typographic：文字系列、排印等
- Visual：可視化、背景等
- Misc：其它混雜模式
居中
垂直居中，設置line-height
水平方向 text-align
flex 彈性盒子
其實就是一個百分比佈局，使用這個的時候，子元素的寬高會受限制於彈性盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.flex-container {
display: -webkit-flex;/*谷歌瀏覽器內核*/
display: flex;
width: 500px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 350px;/*這裡其實是無效的，具體的寬度得看父佈局，子控制項將平分父佈局的寬度平分*/
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>設置背景為圖片的一部分
background-image:url() -140px 0px;電腦中，左上角為原點，x正方向是右，y軸正方向是下
圖片偏移設置背景 -140 以html底部作為參考物，圖片自身向左移動，所以是負的
滑鼠滑過更改樣式
:hover也是屬於css選擇器中的一種，滑鼠懸浮在元素上，元素的樣式，可以使用這個來達到滑鼠滑動改變樣式的效果
“>” 代表著是只選擇子代元素，而空格則代表選中後代元素
- a:link {color: #FF0000} /* 未訪問的鏈接 */
- a:visited {color: #00FF00} /* 已訪問的鏈接 */
- a:hover {color: #FF00FF} /* 滑鼠移動到鏈接上 */
- a:active {color: #0000FF} /* 選定的鏈接 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.nav ul{
display: flex;
flex-direction: row; /* 盒子內元素的排列方向 */
padding-left: 100px;
list-style: none;
}
<!-- “>” 代表著是只選擇子代元素，而空格則代表選中後代元素 -->
.nav ul > li:hover{
border-left: 1px solid #F27B04;
border-top: 1px solid #F27B04;
border-right: 1px solid #F27B04;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>首頁</li>
<li>女人</li>
<li>箱包</li>
<li>美容</li>
<li>男人</li>
<li>運動</li>
<li>數位</li>
<li>熱銷榜</li>
<li>婚慶</li>
<li>戶外</li>
<li>美食</li>
</ul>
</div>
</body>
</html>float 浮動與clear
使用此樣式的元素需要設置寬度，否則，它們會儘可能地窄。
使用float浮動，會影響到其他的元素，所以使用clear屬性
clear可以both，left，right
both兩邊都不能出現浮動元素，left是左邊不能出現浮動元素，right是右邊不能出現浮動元素
下麵的效果鏈接中的.text_line如果沒有clear屬性，文字就會擠在尾部，寬度不夠大的話，文字還會變成豎排
float效果鏈接
例子1：豎排三個div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
}
</style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div>
</div>
</body>
</html>
例子2：使用float，水平排列div
如果寬度不夠的話，會自動換行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
float: left;
}
</style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div>
</div>
</body>
</html>
例子3:外層div包含浮動元素（使用clear)
修改外層div的位置，浮動元素的位置也會隨之改變
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
float: left;
}
#con{
border: 1px solid #0000FF;
}
.clearfix{
clear: both;
}
</style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<!-- 如果在這裡加一個下麵的註釋的div，可以達到換行的效果 -->
<!--<div class="clearfix"></div> -->
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div>
<div class="clearfix"></div>
</div>
</body>
</html>
例子4：外層div包含浮動元素（外層div也設置為float)
修改外層div的位置，浮動元素的位置也會隨之改變
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ff</title>
</head>
<body>
<style type="text/css">
.left_body{
width: 200px;
height: 200px;
float: left;
}
#con{
border: 1px solid #0000FF;
float:left;
}
</style>
<div id="con">
<div class="left_body" style="background: red;"></div>
<div class="left_body" style="background: beige;"></div>
<div class="left_body" style="background: #008000;"></div>
</div>
</body>
</html>
