1.浮動
2.定位
3.分欄布局
column-count：auto | 整數；---控制欄數
column-width： auto | length；---每欄的寬度
column-gap : length ;---兩欄之間的間距
column-rule : 寬度，線型，顏色；---欄與欄的間隔線 類似border，solid | dotted | dashed 實線 | 點線 | 虛線
column-width和column-count可以讓一個元素進行多列布局 column-gap和column-rule就處在相鄰兩列之間
例子:
<div class="con"> <h1>大數據下個人隱私的保護分析與研究</h1> <div> 一堆內容 </div> </div>
css
.con{
width: 600px;
column-count: 3; 分幾欄
column-gap: 10px; 每欄之間的距離
column-rule: 3px dotted red; 欄目之間的線
}
.con h1{
-webkit-column-span: all; 標題是否跨欄顯示
}
4.彈性布局
優點：
1 適應性強，在做不同屏幕分辨率的界面時非常實用
2 可以隨意按照寬度、比例划分元素的寬高
3 可以輕松改變元素的顯示順序
4 彈性布局實現快捷，易維護
display:box;將一個元素的子元素以彈性布局進行布局
box-orient:horizontal || vertical || inherit 子元素排列方式
box-direction:normal || reverse || inherit 子元素的排列順序
box-align:start || end || center 子元素的對齊方式 (規定水平框中垂直位置 或 垂直框中水平位置)
box-pack: start || end || center 子元素的對齊方式(規定水平框中水平位置 或 垂直框中垂直位置)
box-flex:number;子元素如何分配剩余空間
box-ordinal-group:number;子元素顯示順序
例子:
<style> body,html{ width: 100%; height: 100%; display: -webkit-box; -webkit-box-orient:vertical; -webkit-box-align:center; -webkit-box-pack:center; } .con{ width: 90%; height: 90%; display: -webkit-box; -webkit-box-orient:vertical; border: 1px solid red; } .con .head{ height: 200px; display: -webkit-box; -webkit-box-orient:horizontal; } .con .head .logo{ width: 100px; height: 200px; background: pink; } .con .head .logoCon{ height: 200px; -webkit-box-flex:1; background: green; } .con .content{ -webkit-box-flex:1; background: orange; display: -webkit-box; -webkit-box-orient:horizontal; -webkit-box-direction:reverse; } .content div{ width: 200px; text-align: center; } .con .footer{ height: 100px; background: blue; } </style> </head> <body> <div class="con"> <div class="head"> <div class="logo"></div> <div class="logoCon"></div> </div> <div class="content"> <div class="con1">111</div> <div class="con2">222</div> <div class="con3">333</div> </div> <div class="footer"> </div> </div>
5.響應式布局
一個網站能夠兼容多個終端---而不是為每個終端做一個特定的版本
@media all(用於所有的設備) || screen (用於電腦屏幕,平板電腦,智能手機等) and|not|only(三個關鍵字可以選)
<style media="screen"> @media screen and (max-width:600px){ .con{ background:red; } } @media screen and (min-width:600px) and (max-width:800px){ .con{ background:blue; } } @media screen and (min-width:800px){ .con{ background:green; } } .con{ width: 100%; height: 100px; } </style> </head> <body> <div class="con"> </div> </body>