引言
現在市場很多前端開發的招聘崗位都或多或少的要求你要掌握vue，可以說vue在國內是非常的火爆的，下面我給大家介紹一下vue框架吧！
vue是漸進式框架
vue的核心是一個視圖模板引擎，但是這并不能說明vue不是一個框架，如上圖所示在聲明式渲染（視圖模板）基礎上，vue可以添加組件系統component，vue-router客戶端路由，vuex的狀態管理，vue-cli構建工具來構建一個完整的框架，更重要的是這些功能相互獨立，你可以任意選用你項目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個很好的可以管理組件之間共享狀態的部件，但非必須在你的每一個項目中使用它，如果說你的項目相對簡單，組件之間的通信相對簡單你完全可以不使用它），可以看到漸進式，其實就是vue的使用方式，同時也能看到vue的設計理念
vue是mvvm模式
為什么說vue是mvvm模式呢？這個大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的簡寫，即模型視圖視圖模型。模型是指后端傳過來的數據，視圖是指我們看到的頁面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個方向，第一將后端傳來的數據轉換成頁面可以看到的視圖，第二，將用戶在頁面上的交互轉化成為后端數據，我們稱之為雙向綁定。
總結mvvm模式的視圖和模型是不能直接通信的，它們通過ViewModel來通信，ViewModel通常要實現一個observer觀察者，當數據發生變化，ViewModel能夠監聽到數據的這種變化，然后通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監聽到視圖的變化，然后通知數據做改動，這實際上就實現了數據的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel，它可以實現dom監聽和數據綁定
vue的數據綁定原理
當你把JavaScript對象傳入vue實例作為data選項，vue會遍歷此對象的所以屬性，并使用Object.defineProperty把這些屬性轉換為getter和setter，每一個組件都有一個watcher實例，它會在組件渲染過程中，把接觸過的數據記錄為依賴，當依賴的setter被觸發是，他會通知watcher，重而使關聯的數據重新渲染，以下是代碼展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj設置了一個myname屬性，當訪問obj.myname屬性會執行get方法
},
set (data) {
// 當修改myname屬性會執行set方法
// data會得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺點： {
1：無法監聽es6的set，map變化
2：無法監聽class類型的數據
3：屬性的新增和刪除也無法監聽
4：數組元素的新整和刪除也無法監聽
}
所謂循環，就是重復執行一段代碼，計算機的判斷能力和人相比差的很遠，計算機更擅長一件事情——不停的重復。而我們在JavaScript中把這叫做循環。下面讓我們來了解了解JavaScript里的循環。
js循環結構有哪些
js循環結構有三種
for循環 ==> 用來多次遍歷代碼塊
while循環 ==> 當指定條件為true時，循環代碼塊
do while ==> 當指定條件偽true時，循環代碼塊
1、for循環
for是由兩個部分組成，條件控制和循環體
語法：
for(初始化表達式;循環條件表達式;循環后的操作表達式){
需要重復的代碼塊;
}
for語句結構如圖：
for循環的執行順序
1.初始化表達式
最近在做一個手機站，要求點擊分享可以直接打開微信分享出去。而不是jiathis，share分享這種的點擊出來二維碼。在網上看了很多，都說APP能喚起微信，手機網頁實現不了。也找了很多都不能直接喚起微信。
總結出來一個可以直接喚起微信的。適應手機qq瀏覽器和uc瀏覽器。
下面上代碼，把這些直接放到要轉發的頁面里就可以了：
html部分：
-
<script src="mshare.js"></script>//引進mshare.js
-
<button data-mshare="0">點擊彈出原生分享面板</button>
-
<button data-mshare="1">點擊觸發朋友圈分享</button>
-
<button data-mshare="2">點擊觸發發送給微信朋友</button>
js部分：
-
<script>
-
var mshare = new mShare({
-
title: 'Lorem ipsum dolor sit.',
-
url: 'http://m.ly.com',
-
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
-
img: 'http://placehold.it/150x150'
-
});
-
$('button').click(function () {
-
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接彈出原生
-
mshare.init(+$(this).data('mshare'));
-
});
-
</script>
下面是mshare.js的代碼分享，把這些代碼新建一個js文件放進去，然后在頁面中引進就ok了。
-
/**
-
* 此插件主要作用是在UC和QQ兩個主流瀏覽器
-
* 上面觸發微信分享到朋友圈或發送給朋友的功能
-
*/
-
'use strict';
-
var UA = navigator.appVersion;
-
-
/**
-
* 是否是 UC 瀏覽器
-
*/
-
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
-
-
/**
-
* 判斷 qq 瀏覽器
-
* 然而qq瀏覽器分高低版本
-
* 2 代表高版本
-
* 1 代表低版本
-
*/
-
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
-
-
/**
-
* 是否是微信
-
*/
-
var wx = /micromessenger/i.test(UA);
-
-
/**
-
* 瀏覽器版本
-
*/
-
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
-
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
-
-
/**
-
* 獲取操作系統信息 iPhone(1) Android(2)
-
*/
-
var os = (function () {
-
var ua = navigator.userAgent;
-
-
if (/iphone|ipod/i.test(ua)) {
-
return 1;
-
} else if (/android/i.test(ua)) {
-
return 2;
-
} else {
-
return 0;
-
}
-
}());
-
-
/**
-
* qq瀏覽器下面 是否加載好了相應的api文件
-
*/
-
var qqBridgeLoaded = false;
-
-
// 進一步細化版本和平臺判斷
-
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
-
qq = 0;
-
} else {
-
if (qq && qqVs < 5.4 && os == 2) {
-
qq = 1;
-
} else {
-
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
-
uc = 0;
-
}
-
}
-
}
-
/**
-
* qq瀏覽器下面 根據不同版本 加載對應的bridge
-
* @method loadqqApi
-
* @param {Function} cb 回調函數
-
*/
-
function loadqqApi(cb) {
-
// qq == 0
-
if (!qq) {
-
return cb && cb();
-
}
-
var script = document.createElement('script');
-
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
-
/**
-
* 需要等加載過 qq 的 bridge 腳本之后
-
* 再去初始化分享組件
-
*/
-
script.onload = function () {
-
cb && cb();
-
};
-
document.body.appendChild(script);
-
}
-
/**
-
* UC瀏覽器分享
-
* @method ucShare
-
*/
-
function ucShare(config) {
-
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
-
// 關于platform
-
// ios: kWeixin || kWeixinFriend;
-
// android: WechatFriends || WechatTimeline
-
// uc 分享會直接使用截圖
-
var platform = '';
-
var shareInfo = null;
-
// 指定了分享類型
-
if (config.type) {
-
if (os == 2) {
-
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
-
} else if (os == 1) {
-
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
-
}
-
}
-
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
-
// android
-
if (window.ucweb) {
-
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
-
return;
-
}
-
if (window.ucbrowser) {
-
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
-
return;
-
}
-
}
-
/**
-
* qq 瀏覽器分享函數
-
* @method qqShare
-
*/
-
function qqShare(config) {
-
var type = config.type;
-
//微信好友 1, 微信朋友圈 8
-
type = type ? ((type == 1) ? 8 : 1) : '';
-
var share = function () {
-
var shareInfo = {
-
'url': config.url,
-
'title': config.title,
-
'description': config.desc,
-
'img_url': config.img,
-
'img_title': config.title,
-
'to_app': type,
-
'cus_txt': ''
-
};
-
if (window.browser) {
-
browser.app && browser.app.share(shareInfo);
-
} else if (window.qb) {
-
qb.share && qb.share(shareInfo);
-
}
-
};
-
if (qqBridgeLoaded) {
-
share();
-
} else {
-
loadqqApi(share);
-
}
-
}
-
/**
-
* 對外暴露的接口函數
-
* @method mShare
-
* @param {Object} config 配置對象
-
*/
-
function mShare(config) {
-
this.config = config;
-
this.init = function (type) {
-
if (typeof type != 'undefined') this.config.type = type;
-
try {
-
if (uc) {
-
ucShare(this.config);
-
} else if (qq && !wx) {
-
qqShare(this.config);
-
}
-
} catch (e) {}
-
}
-
}
-
// 預加載 qq bridge
-
loadqqApi(function () {
-
qqBridgeLoaded = true;
-
});
-
if (typeof module === 'object' && module.exports) {
-
module.exports = mShare;
-
} else {
-
window.mShare = mShare;
-
}
好了，這樣就可以直接喚起微信進行分享啦
事件冒泡概念：當元素觸發了事件的時候，會依次向上觸發所有元素的相同事件。
事件冒泡的行為演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#a{
background: pink;
width: 400px;
height: 400px;
}
#b{
background: green;
width: 300px;
height: 300px;
}
#c{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="a">
我是a
<div id="b">
我是b
<div id="c">我是c</div>
</div>
</div>
<script>
var a = document.querySelector('#a')
var b = document.querySelector('#b')
var c = document.querySelector('#c')
a.onclick = fn1;
b.onclick = fn2;
c.onclick = fn3;
function fn1(){
alert('a來了')
}
function fn2(){
alert('b來了')
}
function fn3(){
alert('c來了')
}
</script>
</body>
</html>
上面這段代碼一共有三個事件,三個div都分別綁定了單擊事件。在頁面中當單擊c會連續彈出3個提示框。這就是事件冒泡引起的現象。事件冒 泡的過程是：c --> b --> a 。c冒泡到b冒泡到a。
冒泡的阻止
方法：
1.event.stopPropagation(); 是事件對象Event的一個方法，作用是阻止目標元素事件冒泡到父級元素 2.event.cancelBubble = true; IE瀏覽器的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#a{
background: pink;
width: 400px;
height: 400px;
}
#b{
background: green;
width: 300px;
height: 300px;
}
#c{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="a">
我是a
<div id="b">
我是b
<div id="c">我是c</div>
</div>
</div>
<script>
var a = document.querySelector('#a')
var b = document.querySelector('#b')
var c = document.querySelector('#c')
a.onclick = fn;
b.onclick = fn;
c.onclick = fn;
function fn(event){
var e = window.event || event;
// 事件冒泡的阻止
if(e.stopPropagation){
e.stopPropagation(); // 通用寫法
}else{
e.cancelBubble = true; // 阻止IE
}
var str = this.innerHTML;
alert(str)
}
</script>
</body>
</html>
我們在這里將要談的是有關文字的標記，包括字體大小、顏色、字型...等變化，適當的應用可以增加頁面的美觀！
常用字體標記
<Hn>...</Hn> 標題 ，設定標題字體大小， n = 1 ( 大 ) ~ 6 ( 小 ) 會自動跳下一行。通常用在如章節、段落等標題上。
如 : <H2> 標題 </H2>
標題
如 : <H3 ALIGN = CENTER> 標題 </H3> ( 標題置中 )
標題
<B>...</B> 粗體字 。
如 : <B> 粗體字 </B>
粗體字
<I>...</I> 斜體字 。
如 : <I> 斜體字 </I>
斜體字
<U>...</U> 加底線 。
如 : <U> 加底線 </U>
加底線
<DEL>...</DEL> 橫線 ( 表示刪除 )。
如 : <DEL> 橫線 </DEL>
橫線
<TT>...</TT> 打字體 ( 固定寬度文字 )。
如 : <TT> 打字體 </TT>
打字體
<SUP>...</SUP> 上標字 。
如 : 字體 <SUP> 上標字 </SUP>
字體 上標字
<SUB>...</SUB> 下標字 。
如 : 字體 <SUB> 下標字 </SUB>
字體 下標字
<!...> 注解 ( 不會顯示在瀏覽器上 )，可以多行。
如 : <! 更新日期 : 2000/1/1>
設定字體大小、顏色、字型
有關設定文字的方法共有以下幾種 :
1.設定HTML文件主體文字顏色。<BODY>...</BODY>標記。
如 : <BODY TEXT=RED>...</BODY> 或
<BODY TEXT=#FF0000>...</BODY>
2.設定基本字體大小、顏色、字型。<BASEFONT>...</BASEFONT>標記。
3.設定字體大小、顏色、字型。<FONT>...</FONT>標記。
<BASEFONT>...</BASEFONT> 設定基本字體 ，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。
如 : <BASEFONT SIZE=4> 基本字體大小為 4 </BASEFONT>
基本字體大小為 4
如 : <BASEFONT COLOR =#FF0000> 設定顏色 </BASEFONT>
設定顏色
如 : <BASEFONT FACE = 標楷體 , 細明體 > 設定字型 </BASEFONT>
設定字型
<BIG>...</BIG> 基本字體加大 。
如 : <BASEFONT SIZE=4> 基本字體大小為 4，</BASEFONT>
<BIG> 加大為 5 </BIG>
基本字體大小為 4， 加大為 5
<SMALL>...</SMALL> 基本字體減小 。
如 : <BASEFONT SIZE=4> 基本字體大小為 4，</BASEFONT>
<SMALL> 減小為 3 </SMALL>
基本字體大小為 4， 減小為 3
<FONT>...</FONT> 設定字體大小、顏色、字型 ，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。
如 : <FONT SIZE=4> 字體大小為 4 </FONT>
字體大小為 4
如 : <BASEFONT SIZE=4> 基本字體大小為 4
<FONT SIZE= 1> 1字體大小為 5 </FONT>
<FONT SIZE=-2> -2字體大小為 2 </FONT>...</BASEFONT>
基本字體大小為 4
1字體大小為 5
-2字體大小為 2
如 : <FONT COLOR =#FF0000> 設定顏色 </FONT>
設定顏色
如 : <FONT FACE = 標楷體 , 細明體 > 設定字型 </FONT>
設定字型
新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
日?！边^坑“記錄
只記錄方法不說原理。。。
步驟：
ECharts下載
引入echarts.js
注意：這里好像只能用echarts.js,其它的不行，英文后面配置的時候要改東西(ps:我也不太不清楚)
修改echarts.js
打開echarts.js，在文件大概開始處添加如下代碼
window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :
如圖：
在文件內容末尾添加如下代碼：
exports.parseGeoJson = parseGeoJson;
return exports;
如圖：
layui添加配置并使用
ok了，和網上其它的相比，我這個應該是最簡單的配置了。
h5新增的表單標簽
原創weixin_46366721 最后發布于2020-02-29 12:27:39 閱讀數 13 收藏
展開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/ 谷歌 /
input::-webkit-input-placeholder{
color:blue;
}
/ 火狐19+ /
input::-moz--input-placeholder{
color:blue
}
/ 火狐4-18 /
input:-moz-input-placeholder{
color:blue;
}
/ ie高版本，ie+ /
input::-ms-input-placeholder{
color:blue;
}
/ 歐鵬 /
input::-o-input-placeholder{
color:blue;
}
</style>
</head>
<body>
<form action="" novalidate>
<input type="email">
<input type="submit">
<br>
<input type="url">
<input type="submit">
<br>
<input type="range">
<input type="submit">
<br>
<input type="number">
<input type="submit">
<br>
<input type="search">
<input type="submit">
<br>
<input type="color">
<input type="submit">
<br>
<input type="time">
<br>
<input type="month">
<br>
<input type="week">
<br>
<!-- <input type="datetime-local> -->
<input type="date">
<br>
<!-- <input type="text" required>
<input type="submit"> -->
<br>
<input type="number" step="3">
<input type="submit">
<br>
<input type="text" name="aa" autocomplete="off">
<input type="submit">
<br>
<input type="text" value="" placeholder="請輸入您的姓名：" autofocus>
<input type="submit">
<br>
<input type="text" placeholder="請輸入您的手機號：" pattern="^1[3|5|8]\d{9}$">
<input type="submit">
<br>
<input type="file" multiple>
<br>
<input type="url" list="lll">
<datalist id="lll">
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sina.com" label="新浪"></option>
</datalist>
<input type="submit">
</form>
</body>
</html>
h5新增type類型：
Type=“email” 限制用戶必須輸入email類型
Type=“url” 輸入的網址前面必須加上http://
Type=“range” 產生一個滑動條表單
Type=“number” 必須輸入的是數字，調整數字大小(谷歌瀏覽器輸入字母不可以，但是可以輸入e；火狐可以輸入字母，不能提交)
Type=“search” 產生一個搜索意義的表單（火狐瀏覽器沒有叉號，谷歌有）
Type=“color” 生成一個顏色選擇的表單；
產生很大的兼容問題：
type=“time” 限制用戶必須輸入時間類型
type=“month” 限制用戶必須輸入月份類型（火狐瀏覽器不顯示）
type="week"限制用戶必須輸入周類型
type="datetime-local"選取本地時間
type=“date”
新增表單屬性：
required 檢測是否為空；
min:最小值
max：最大值
step：數值增加的幅度； 如果輸入的是step=“3”,搜索框輸入2，按住上鍵調的話，會是3，因為法定值：-3 0 3 6 9
autocomplete是否自動提示信息 on（默認值）off;和name="" 一起使用；
placeholder：文本框的提示信息(value的值得手動刪除，而placeholder不用刪除，可以直接輸入內容)
autofocus：自動聚焦，一個頁面只能存在一個聚焦（auto：自動）
pattern：后面的屬性值是一個正則表達式
//手機號驗證pattern=“^1[3][5]\d{9}$”
novalidate：取消驗證，放在form里面
multiple:選擇多個文件上傳
list:提示信息；必須結合datalist標簽，綁定datelist (谷歌提示value和label，而火狐只有label提示)
h5:新增的表單標簽
datalist
option
output:計算結果輸出、腳本的輸出
標準格式注意：
super()和this()調用語句不能同時在一個構造器中。
super()或this()調用語句只能作為構造器中的第一句出現。原因：
無論通過哪個構造器創建子類對象，需要保證先初始化父類。
目的是，當子類繼承父類后，“繼承”父類所有的屬性和方法，因此子類有必要知道父類如何為對象進行初始化。
從結果上看：繼承性
子類繼承父類以后，就獲取了父類中聲明的屬性或方法。
創建子類的對象，在堆空間中，就會加載所父類中聲明的屬性。
從過程上看：
當我們通過子類的構造器創建子類對象時，我們一定會直接或間接的調用其父類的構造器，進而調用父類的父類的構造器，…直到調用了java.lang.Object類中空參的構造器為止。正因為加載過所的父類的結構，所以才可以看到內存中父類中的結構，子類對象才可以考慮進行調用。
強調說明：
雖然創建子類對象時，調用了父類的構造器，但是自始至終就創建過一個對象，即為new的子類對象。
html標簽分為兩種，內聯元素和塊級元素，首先我們先了解一下內聯元素和塊級元素的概念：
塊級元素：一般是其它元素的容器，可容納內聯元素和其它塊級元素，塊級元素排斥其它元素與其位于同一行，可設置寬度(width)高度(height)屬性，正常流中的塊級元素會垂直擺放。常見塊狀元素為“div”
內聯元素（行內元素）：內聯元素只能容納文本或者其他內聯元素，是塊級元素的后代，它允許其他內聯元素與其位于同一行，不能設置高度（height）和寬度（width）。常見內聯元素為“a”。
根據塊級元素的概念我們可以理解為塊級元素前后帶有換行符，也就相當于元素前后加了一個<br>標簽。我們可以把塊級元素想象成一個塊或一個矩形，所以塊級元素能設置高度寬度屬性
新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
例：
css文件:
復制代碼
代碼如下:
width:200px;
height:200px;
background:#666
}
div2{
width:200px;
height:200px;
background:#F00
}
html文件：
復制代碼
代碼如下:
<div id="div1">
div1
塊級元素排斥其他元素與其位于同一行
</div>
<div id="div2">
div2
塊級元素排斥其他元素與其位于同一行
</div>
顯示效果：
兩個div元素不位于同一行
根據內聯元素的概念，我們可以理解為內聯元素前后沒有換行符。我們可以把內聯元素想象成一條線，所以它不能設置height屬性和width屬性。
塊級元素（block element）標簽
address -地址
blockquote - 塊引用
center – 居中對齊
dir -目錄列表
div - 常用塊級容易，也是CSS layout的主要標簽
dl - 定義列表
fieldset - form控制組
form - 交互表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol - 排序表單
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
內聯元素(inline element)
a - 錨點
abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
bdo - bidi override
big - 大字體
br - 換行
cite - 引用
code - 計算機代碼(在引用源碼的時候需要)
dfn - 定義字段
em - 強調
font - 字體設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標簽
q - 短引用
s - 中劃線
samp - 定義范例計算機代碼
select - 項目選擇
small - 小字體文本
span - 常用內聯容器，定義文本內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 定義打字機文本
————————————————
版權聲明：本文為CSDN博主「前端學習線路」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/webxuexi168/article/details/104382660
一、你能學到什么？
①如何使用css變量 ②實現圣杯布局和雙飛翼的簡單思路 ③了解浮動和margin的特性
css變量設置(兩個布局都有的部分)
:root{
/ 左邊欄寬度 /
--lw:300px;
/負左邊欄寬度/
--lwf:-300px;
/ 右邊欄寬度 /
--rw:400px;
/負左邊欄寬度/
--rwf:-400px;
/ 高度 /
--height:300px;
}
二、圣杯布局的html和css代碼
html部分
<div class="holyGrail">
<div class="hg_main">main</div>
<div class="hg_left">left</div>
<div class="hg_right">right</div>
</div>
css 實現對應的四個class
.holyGrail {
height: var(--height);
/ 留出左右兩欄的布局 為了字體不被覆蓋/
padding-left: var(--lw);
padding-right: var(--rw);
}
.hg_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.hg_left{
position: relative;
left: var(--lwf);
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.hg_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
height: var(--height);
background-color: brown;
}
三、雙飛翼布局的html和css代碼
html部分
<div class="doubleWing">
<div class="dw_main">
<div class="dw_con">main</div>
</div>
<div class="dw_left">left</div>
<div class="dw_right">right</div>
</div>
css 實現對應的五個class
.doubleWing{
padding-right: var(--rw);
}
.dw_left{
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.dw_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.dw_con {
margin-left: var(--lw);
}
.dw_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
background-color: brown;
height: var(--height);
}
四、學會兩個布局的注意點
圣杯布局
在最外邊的類（holyGrail）左右要留出左欄和右欄的寬度（使用padding-left，padding-right)
中間的div.hg_main放在最上面，優先渲染，中間div自適應，width為100%
左中右欄的div都設置浮動，左欄通過margin-left:-100%移動到和中間的div同一起點，然后通過position: relative;
left: -（左欄的寬度）；會移動到最外層div的左內邊距的區域（中間div的左邊）
右欄可以通過margin-right:-(右欄的寬度)；移動到最外層div的右內邊距的區域（中間div的右邊）
雙飛翼布局
在中欄的div再加一個div,設置margin-left:左欄的寬度，這樣可以省略左欄的div使用postion和left的屬性移動
最外層的div可以不用預留左欄的位置了
五、兩個布局的對比的優缺點
布局 優點 缺點
圣杯 無多余dom 當中間的寬度小于左右的寬度時，結構混亂
雙飛翼 可以支持各種寬度，通用性強較強 需要多加一層dom
代碼下載地址
記得一定要自己去實現一下
藍藍設計的小編 http://m.skdbbs.com