CSS入門（3）
CSS的常見布局
CSS常見布局使用display屬性（文檔流）+position屬性（定位）+float屬性（浮動）叔收。
-
inline-block
display:inline-block屬性既可以像行級元素一樣水平分布姜盈，也可以像塊級元素一樣設(shè)置寬高，如果空間夠就可以實現(xiàn)左右布局盖高。 -
float（應(yīng)用較廣）
給要并排的子元素加上style=float:left(或right)伶丐，他們的父元素添加class:clearfix跨跨，即可脫離文檔流潮峦，實現(xiàn)排排坐囱皿。clearfix的css為：
.clearfix::after { content=" "; display:block; clear:both; }
-
flex（不能兼容ie）
flex是一種新的布局方式
a. flex布局與方向無關(guān)
b. 可實現(xiàn)空間的自動分配、自動對齊
c. 用于簡單的線性布局忱嘹，復(fù)雜的可用grid布局（后面再學(xué)）
- 左右布局
- float百分比布局
<div class="content clearfix">
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
.clearfix::after {
content:' ';
display:block;
clear:both;
}
.left {
float:left;
height:200px;
width:2%;
background: red;
}
.right {
float:left;
height:200px;
width:8%;
background: blue;
}
注：用于布局的div中不要添加其他margin嘱腥、padding等，需要的話在里面再加元素拘悦。
- flex布局
.content {
display:flex;
}
.left {
float:left;
height:200px;
width:100px;
background: red;
}
.right {
float:left;
height:200px;
background: blue;
flex-grow:1;
}
- 左中右布局
- 圣杯布局
<div class="content">
<div class="middle">中間</div>
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
.content {
margin-left: 120px;
margin-right: 170px;
}
.middle {
height:200px;
width:100%;
background:yellow;
float:left;
}
.left {
height:200px;
width:100px;
background:red;
float:left;
margin-left:-100%;
position:relative;
left:-120px;
}
.right {
height:200px;
width:150px;
background:blue;
float:left;
margin-left:-150px;
position:relative;
right:-170px;
}
- flex布局
.content {
display:flex;
}
.middle {
height:200px;
background:yellow;
flex-grow:1;
margin:0 10px;
}
.left {
height:200px;
width:100px;
background:red;
}
.right {
height:200px;
width:150px;
background:blue;
}
- 水平居中：
- div的左右margin為auto
- 內(nèi)聯(lián)元素的父元素加上text-align:center;
- 垂直居中：單行元素line-height跟height相等就垂直居中
line-height+padding - flex的完美居中
display:flex;
justify-content:center;
align-items:center;
- 小Tips
- 如果是ie6加上.clearfix{zomm:1;}齿兔。
- 兒子的寬度建議使用百分比，比較有彈性础米，不要寫死寬度分苇，width:calc（25%-8px）。
- 做平均布局時屁桑，空間不夠可以加一個空的div医寿，左右margin為負(fù)數(shù)。
- class盡量不要用ad蘑斧，會被屏蔽掉靖秩。
- 在作業(yè)過程中用到的一些效果元素
示例1
- 鼠標(biāo)移上去0.2秒過渡出現(xiàn)陰影效果
div ｛ transition：box-shadow 0.2s； } div：hover ｛ box-shadow：0px 4px 17px 0px rgba(100, 100, 100, 0.3); }注：陰影的樣式可以在box-shadow generator中設(shè)置竖瘾、預(yù)覽后再復(fù)制過來沟突。
示例2
- 鼠標(biāo)移上去變小手 cursor:pionter;
示例3
- 列表奇數(shù)左浮，偶數(shù)右浮捕传，形成有間隙的兩列
/*父元素ol已經(jīng)設(shè)置class="clerarfix"*/ .skills ol li { float: left; width: 48%; } .skills ol li:nth-child(even) { float: right; }
示例4
- 讓padding,margin,border都包含在width里惠拭，可使用box-sizing：border-box; 。
