實現(xiàn)底部footer
- 外部有一個wrapper容器笙以，要min-height:100%;撐滿頁面高度堪侯。
- footer參考wrapper絕對定位芙粱，用bottom:0定在底部
- main用來放置頁面主體內(nèi)容喂窟，padding-bottom與footer高度一致，用于頁面長的時候給footer撐出高度
文本不換行省略效果
white-space: nowrap
overflow:hidden
text-overflow:ellipsis
瀑布流原理
瀑布流布局要求要進行布置的元素等寬宠漩，然后計算元素的寬度與瀏覽器寬度之比，得到需要布置的列數(shù)懊直。
創(chuàng)建一個數(shù)組扒吁，長度為列數(shù)，里面的值為已布置元素的總高度（最開始為0）
然后將未布置的元素依次布置到高度最小的那一列室囊，就得到了瀑布流布局雕崩。
transition一個速記法：transition: css屬性 動畫持續(xù)時間 動畫類型 動畫延遲時間魁索；
兩列布局一列寬度固定，一列寬度不固定
方法一：把side改寫為絕對定位
.side{
position:absolute;left:0;top:0;
width:200px;height:200px;
background:red;
}
.main{
margin-left:210px;
background:blue;
height:200px;
}
方法二：把side改寫為浮動
.side{
width:200px;
height:200px;
float:left;
background:red;
}
.main{
margin-left:210px;
background:blue;
height:200px;
}
方法三：flex布局
.parent {
display:flex;
}
.side{
width:200px;
height:200px;
background:red;
margin-right:10px;
}
.main{
background:blue;
height:200px;
flex:1;
}
方法四：利用BFC不與浮動元素重疊的特性
.side {
width: 200px;
height: 100px;
float: left;
background: red;
margin-right: 10px;
/* 這里沒有flex才能按自身設(shè)定的寬度渲染 */
/* 如果有了flex則寬度設(shè)定無效 */
}
.main {
/* 創(chuàng)建BFC */
overflow: hidden;
background: blue;
height: 100px;
}
如何進行水平垂直居中(行內(nèi)塊元素)
方案一：用display: table-cell;
內(nèi)部元素如果是display:block;則無效
.box{
display: table-cell;
vertical-align:middle;/*垂直居中*/
text-align:center;/*水平居中*/
}
方案二：單純flex布局
.box{
display: flex;
justify-content:center;/*水平居中*/
align-items:center;/*垂直居中*/
}
方案三：flex與margin:auto;結(jié)合
.box{
display: flex;
}
button{margin: auto;}
方案四：絕對定位與0
.box{
position:relative;/*需要父元素定位*/
}
button{
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
三欄水平布局晨逝，其中 left 蛾默、 right 分別位于左右兩邊， left 寬度為 200px 捉貌， right 寬度為 300px 支鸡， main 處在中間，寬度自適應(yīng)趁窃。
/*三欄結(jié)構(gòu)大致如下*/
<divclass="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
//Flex 布局
.container {
display:flex;
}
.main{
flex: 1;
background-color:#eee;
}
.left{
flex-basis:200PX;
order:-1;
background-color: lightblue;
}
.right {
flex-basis: 300px;
background-color:lightblue;
}
//方法二：絕對定位布局
.container {
position: relative;
}
.main {
margin-left: 200px;
margin-right: 300px;
}
.left {
position: absolute;
top: 0;
/* 外層設(shè)置 padding 時才需要 */
/*left: 0;*/
}
.right {
position: absolute;
top: 0;
right: 0;
}
/* 圣杯布局 */
.container {
/* 這里不能使用 overflow: hidden; 清除浮動 */
/* 不然會使 aside(.left & .right) 被 hidden */
margin-left: 200px;
margin-right: 160px;
}
.container::after {
/* 借助偽元素清除浮動 */
clear: both;
display: block;
content: '\200b';
width: 0;
height: 0;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
margin-left: -100%;
position: relative;
right: 200px;
}
.right {
float: left;
margin-right: -160px;
}
/*三欄的 HTML 結(jié)構(gòu)大致如下：*/
<main>
<div class="content-wrapper">
<div class="content"></div>
</div>
<aside class="left"></aside>
<aside class="right"></aside>
</main>
/* 雙飛翼布局 */
main {
/* 這里可以使用 overflow: hidden; 清除浮動 */
overflow: hidden;
}
.content-wrapper {
float: left;
width: 100%;
}
.content {
margin-left: 200px;
margin-right: 160px;
}
.left {
float: left;
margin-left: -100%;
}
.right {
float: left;
margin-left: -160px;
}
/*三欄的 HTML 結(jié)構(gòu)大致如下：*/
<main>
<aside class="left"></aside>
<aside class="right"></aside>
<div class="content"></div>
</main>
/* 流體布局 */
.left {
float: left;
}
.right {
float: right;
}
.content {
margin-left: 200px;
margin-right: 160px;
}
/* BFC布局 */
.left {
float: left;
}
.right {
float: right;
}
.content {
overflow: hidden;
}
三欄平分布局
考查box-sizing屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
#main{
display: flex;
}
#left{width:100%;display:inline-block;flex:1;box-sizing:border-box}
#center{width:100%;display:inline-block;flex:1;box-sizing:border-box}
#right{width:100%;display:inline-block;flex:1;box-sizing:border-box}
</style>
</head>
<body>
<div id="main">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
手寫清除浮動的幾種方式
方法一：添加空div標簽
clear:both
方法二：父級標簽定義偽類after
.float-div::after{
display: block;
clear: both;
content: '';
height: 0px;
}
上一級父元素：zoom：1牧挣；//解決IE67兼容問題
方法三：父級標簽overflow:hidden
.float-div{
overflow:hidden;
}
Meta標簽的使用
meta標簽的使用
meta標簽共有兩個屬性：http-equiv和name;
name屬性
name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content醒陆，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的瀑构。其中name屬性主要有以下幾種參數(shù):
Keywords(關(guān)鍵字)
舉例：＜meta name ="keywords" content="science, education,culture,politics,ecnomics，relationships, entertaiment, human"＞
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
http-equiv屬性
http-equiv顧名思義刨摩，相當于http協(xié)議中文件頭的作用寺晌，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容澡刹，與之對應(yīng)的屬性值為content呻征。
其中http-equiv屬性主要有以下幾種參數(shù)：
content-Type(顯示字符集的設(shè)定)
用法：＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞
Expires(期限)
用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞
注意：必須使用GMT的時間格式。
Pragma(cache模式)
說明：禁止瀏覽器從本地計算機的緩存中訪問頁面內(nèi)容罢浇。
用法：＜meta http-equiv="Pragma" content="no-cache"＞
Refresh(刷新)
說明：自動刷新并指向新頁面陆赋。
用法：＜meta http-equiv="Refresh" content="2; URL=http://www.root.net"＞
注意：其中的2是指停留2秒鐘后自動刷新到URL網(wǎng)址。
Set-Cookie(cookie設(shè)定)
說明：設(shè)置cookie, 如果網(wǎng)頁過期嚷闭，那么存盤的cookie將被刪除攒岛。
用法：＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞
注意：必須使用GMT的時間格式胞锰。
Window-target(顯示窗口的設(shè)定)
說明：強制頁面在當前窗口以獨立頁面顯示灾锯。
用法：＜meta http-equiv="Window-target" content="_top"＞
注意：用來防止別人在框架里調(diào)用自己的頁面。
媒體查詢
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
