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>