一眶明、單列布局的實(shí)現(xiàn)
1凯傲、單列布局中最常用的水平居中的四種方法
- 同時(shí)設(shè)置父元素和子元素的樣式：父元素使用text-align實(shí)現(xiàn)，子元素使用inline-block浴栽。這里寬高背景只是為了展示坏晦。
.parent{
text-align: center;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
background-color: aqua;
}
- 使用margin:0 auto來(lái)實(shí)現(xiàn)睁冬，必須要設(shè)置一個(gè)width.
.child{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: aqua;
}
- 使用絕對(duì)定位，父元素使用相對(duì)狼荞，子元素絕對(duì)辽装。
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
}
- 使用彈性盒flex布局實(shí)現(xiàn)
彈性盒是專為不同尺寸和不同設(shè)備的元素排布而設(shè)計(jì)的。父元素中使用block:flex設(shè)置一個(gè)彈性盒相味，子元素中flex:number設(shè)置該子元素占一行中的幾份拾积。
<style>
.header{
display: flex;
}
a{
margin: 0 auto;
}
.A,.C{
flex: 1;
}
.B{
flex: 2;
}
</style>
<body>
<div class="header">
<a href="##" class="A">AA</a>
<a href="##" class="B">BB</a>
<a href="##" class="C">CC</a>
</div>
</body>
彈性盒幾乎能實(shí)現(xiàn)目前存在的所有布局，它還有很多的內(nèi)容在這里也詳細(xì)說(shuō)一下丰涉。
flex-direction:定義了排布是按行還是列拓巧。
justify-content:對(duì)于彈性項(xiàng)沒(méi)有填滿彈性容器的時(shí)候，它定義彈性項(xiàng)是怎么對(duì)齊的一死。
二肛度、多列布局
1、多列布局的“雙飛翼布局”投慈，即左右固定承耿，中間自適應(yīng)，他可以利用margin-left為負(fù)數(shù)來(lái)實(shí)現(xiàn)伪煤，它的實(shí)現(xiàn)原理就是margin為負(fù)值可以改變float元素的排列位置加袋。
<div class="main">
<div class="main-content">main content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
*{
margin:0;
padding: 0
}
.main{
float: left;
width: 100%;
}
.main .main-content{
margin: 0 210px;
background-color: rgba(33, 114, 214, 0.8);
height: 500px
}
.left{
width: 200px;
float: left;
background-color: rgba(255, 82, 0, 0.8);
margin-left: -100%;
height: 200px
}
.right{
width: 200px;
height: 200px;
margin-left: -200px;
float: left;
background-color: rgba(90, 243, 151, 0.8);
}
多列布局的“雙飛翼布局”，也可以利用彈性盒實(shí)現(xiàn)抱既，同樣父元素設(shè)置display:flex, 子元素中左右固定欄設(shè)置為固定寬度职烧，中間自適應(yīng)部分設(shè)置flex:1.
<style>
.parent{display:flex;}
.left{
width:100px;
background-color: aqua;
}
.main{
flex:1;
background-color: red;
}
.right{
width:100px;
background-color: greenyellow;
}
</style>
<div class="parent">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
2、真正的多列布局
借助margin為負(fù)值可以增加寬度的方式來(lái)進(jìn)行多列布局。
<style>
.parent{
margin:0 auto;
width: 500px;
border: 1px #ccc solid;
margin-bottom: 20px;
}
.column{
width:92px;
height: 92px;
background-color: #ccc;
margin-bottom: 20px;
float: left;
margin-right: 10px;
}
</style>
<div class="parent">
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
</div>
同樣我們也可以使用彈性盒布局
<style>
.parent{display:flex;}
.column{flex:1;}
.column +.column{margin-left:20px;}
</style>
<body>
<div class="parent">
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
</div>
</body>
三蚀之、響應(yīng)式布局
響應(yīng)式布局在不同的大小的屏幕上如何做出不同的布局蝗敢，視口指的是瀏覽器窗口的可視區(qū)域，視口大小決定了頁(yè)面布局的可用寬度足删，我們可以使用meta標(biāo)簽設(shè)置設(shè)置布局寬度等于設(shè)備寬度,布局viewport等于度量viewport.
<meta name="viewport" content="width=device-width,initial-scale=1">
此時(shí)寿谴，頁(yè)面布局的寬度就是你的設(shè)配的寬度。
使用媒體查詢來(lái)實(shí)現(xiàn)響應(yīng)設(shè)計(jì)（CSS3 media queries）
CSS3的media queries的模塊擴(kuò)展了@media的應(yīng)用壹堰，不僅可以識(shí)別不同煩人媒體類型拭卿，還能識(shí)別媒體的特征——比如屏幕寬度，像素等參數(shù)贱纠。media queries語(yǔ)法：@media 媒體類型 媒體識(shí)別條件表達(dá)式峻厚。
@media handheld, (min-width:700px) and (orientation:landscape){
}
當(dāng)使用有顯示屏的設(shè)備的時(shí)候：當(dāng)最小寬度<700px,或者是橫屏的時(shí)候執(zhí)行代碼。
在三欄布局中使用響應(yīng)設(shè)計(jì)
.row{
width: 960px;
}
.row:after{
clear: left;
content: '';
/*清除浮動(dòng)*/
display: table;
}
[class^='col']{
float: left;
}
.col1{
width: 25%;
}
.col2{
width: 50%;
}
.col3{
width: 75%;
}
/** 屏幕設(shè)備寬度大于1200的時(shí)候谆焊，row寬度固定為1170px**/
@media (min-width: 1200px) {
.row{
width:1170px
}
}
/** 平板電腦的設(shè)置**/
@media (min-width: 768px) and (max-width: 979px){
.row{
width:724px
}
}
/** 橫屏手機(jī)或者豎屏平板的所有列按行排列**/
@media (max-width:767px){
[class^='col']{
float:none;
width: 100%;
}
.row{
width: 100%;
}
}
/** 豎屏手機(jī)**/
@media (max-width: 480px){
}
</style>
<body>
<div class="container">
<div class="row">
<div class="header">header</div>
</div>
<div class="row">
<div class="col1">q</div>
<div class="col2">w</div>
<div class="col1">e</div>
</div>
<div class="row">
<div class="footer">footer</div>
</div>
</div>
</body>
