一、視口
視口在默認情況下也沒你可以放大或者縮小。因爲體驗不好，且容易產生布局錯誤，所有頁面要禁止用戶縮放
1、視口屬性：viewport
content：視口內容
width=device-width 頁面寬度默認等於設備寬度
initial-scale=1.0 初始化縮放比例爲1.0
maximum-scale=1.0 最大縮放比例爲1.0
minimum-scale=1.0 最小縮放比例爲1.0
user-scalable=no/yes 是否禁止用戶的縮放功能
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
拓展：禁止縮放以後最大和最小的縮放比寫不寫視情況而定
寫代碼的時候可以不寫。但是標準寫一個完整的meta的時候必須寫
二、
background-size 寬(x)高(y)
兩個都是數字的時候參考父盒子的寬高
只有一個數值的時候等比例縮放（一個值代表寬度）
兩個都是百分比的時候參考父盒子的寬高
只有一個百分比數值的時候等比例縮放（一個百分比的時候代表寬度）
background-size：cover 覆蓋，等比例放大填滿整個盒子，不會存在空白
1、當盒子比圖片大的時候，圖片會填滿盒子
2、當盒子比圖片小的時候，圖片不一定全部顯示出來，左上角部分開始顯示
background-size：contain 等比例放大直至一遍達到父盒子的邊框，存在空白的部分
簡寫：background：url() no-repeat color position /size(/必須填寫)
三、佈局（混合佈局：流式+less+rem+flex）
流式佈局（百分比佈局）自行了解聖盃佈局
1、盒子的寬度不給具體的像素值，然後盒子用%來代替
彈性佈局（flex佈局）
1、標準流盒子一行顯示 display：inline-block
問題：出現間隙（左側是換行出現的，下側是基線對齊出現的：用vertical-align:middle 解決）
2、浮動流盒子一行顯示 float：left
問題：父盒子失去高度，要清除浮動
3、定位流盒子一行顯示 position：absolute
問題：子盒子會層疊在一起
4、彈性佈局盒子一行顯示 display：flex（父盒子設置）
默認情況下，盒子沿着主方向排布（主軸默認方向從左向右 ）
優點：1.沒間隙 2.不會失去高度 3.不會層疊
父盒子常見屬性：
主軸方向：
flex-direction：row從左向右，類似左浮動
flex-direction：row-reverse從右向左，類似右浮動
flex-direction：colum垂直從上向下
flex-direction：colum-reverse垂直從下向上
主軸對齊方式：
justify-content:flex-start 從左開始向右結束類似左對齊
justify-content:flex-end 從右開始向左結束類似右對齊
justify-content:center 居中對齊，類似text-align：center
justify-content:space-betwent 各個元素之間距離相同，父元素剩餘空間均分
justify-content:space-around 子元素周圍的距離相同
側軸對齊方式：
align-items：stretch 默認將子元素的高度拉伸填滿盒子（前提子元素無高度）
align-items：flex-start 再開始位置，靠上
align-items：flex-end再結束位置，靠下
align-items：center 居中
flex-wrap：wrap 多行換行
垂直水平居中：
align-items：center
justify-content:center
多行對齊：
align-content:stretch 拉伸，高度拉伸填滿父盒子
align-content:flex-start 多行靠上
align-content:flex-end 多行靠下
align-content:center 多行居中
align-content:space-betwent 將父元素的空間均分
align-content:space-around 行的上下距離相同
flex-flow 符合屬性 （瞭解）
flex 比例劃分：
父元素： display：flex
子元素：flex:1（每個子盒子都能獲得的一部分）
子元素其他屬性：
align-self 單獨控制某一個盒子的側軸對齊方式，這個屬性優先級高於align-items
order：數值；修改彈性子元素的排序，數值越小位置越靠前（默認是從0 開始的）
background:radial-gradient(方向，色值，色值)，方向不寫的情況下顯示從上向下
四、less
less優點1、兼容所有的css語法
2、less文件保存會生成對應的css文件
3、html導入的時候只能選擇css文件，less文件不識別
聲明變量：@變量名：變量值
變量運算：變量 運算符 數值
混合用法：多個重複屬性封裝成一方法
.方法名 （）{ 公用屬性；}
&表示外層元素
五、rem（rem佈局 rem+less+媒體查詢）
html和body的默認字體大小是16px
rem(root em )
em是相對於父元素的字體大小來設置的
rem是相對於html元素的字體大小（和父元素無關）
優點：可以通過修改html中的字體大小來改變頁面中的大小，可以整體控制
六、媒體查詢（Media Query）
@media media type(媒體類型：all 所有設備|screen 平板手機|print 打印機打印預覽) and（and 並且 | not 非 |only 來指定某個某個特定的）media feature(媒體特性：width | max-width | min-width){滿足條件的css樣式}
@media screen and (){} ---------小括號裏面不帶有分號，各個部分用空格分開
例子：@media screen and (max-width：200px){}
rem / 75 *測量數據 = 測量數據 / 75 * rem
七、響應式佈局
頁面會根據屏幕的寬度顯示不同的不同的佈局效果
利用媒體查詢設置設置響應式佈局
@media screen and (min-width:992px) and (max-width:1199px) { }
@media screen and (min-width:768px) and (max-width:991px) { }
@media screen and (max-width:767px) { }
八、Bootstrap框架
跟佈局有關的常用框架有：Bootstrap，Amaze UI，Framework7
起步：下載使用的爲源碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- 將以下的導入路徑修改成本地路徑 --> <!-- 1.引入本地bootstrap.css --> <link href="./lib/css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <!-- 以下兩個js文件也要改成本地路徑 --> <!-- 2.引入本地jq文件 --> <script src="./lib/js/jquery-1.12.4.min.js"></script> <!-- 3.引入本地的bootstrap.js文件 --> <script src="./lib/js/bootstrap.js"></script> </body> </html>
全局css樣式：
form表單：
修改以後使用的：
<div class="main"> <form> <div class="form-group"> <label for="exampleInputEmail1">郵箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">上傳文件</label> <input type="file" id="exampleInputFile"> <p class="help-block">提示：上傳身份證反正面！</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 登錄 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form>
按鈕：修改使用的
<a class="btn btn-default btn-primary" href="#" role="button">鏈接</a> <button class="btn btn-default btn-danger" type="submit">按鈕</button> <input class="btn btn-default btn-warning" type="button" value="輸入框"> <input class="btn btn-default btn-success" type="submit" value="提交">
調用類名：
btn-default 默認樣式 btn-primary 首選項（背景色深藍色） btn-success 成功（背景色綠色） btn-info 一般信息（背景色淡藍色） btn-warning 警告（背景色橘黃） btn btn-danger 危險（背景色紅色） btn-link 鏈接 btn-lg 大按鈕 btn-sm 小按鈕 btn-xs 超小按鈕
柵格系統：
柵格佈局是將頁面內容顯示區域平均分爲12列
container:響應式版心根據屏幕的寬度調整版心的寬度
container-fulid百分比寬度
col-lg-* lg大屏幕（大於等於1200px）col代表列 *代表佔據幾列
col-md-*md中屏幕（大於等於992px）
col-sm-*sm小屏幕（大於等於768px）
col-xs-*xs移動端屏幕（小於768px）
響應式工具：
| 超小屏幕手機 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
|---|---|---|---|---|
| .visible-xs-* | 可見 | 隱藏 | 隱藏 | 隱藏 |
| .visible-sm-* | 隱藏 | 可見 | 隱藏 | 隱藏 |
| .visible-md-* | 隱藏 | 隱藏 | 可見 | 隱藏 |
| .visible--* | 隱藏 | 隱藏 | 隱藏 | 可見 |
| .hdden-xs | 隱藏 | 可見 | 可見 | 可見 |
| .hdden-sm | 可見 | 隱藏 | 可見 | 可見 |
| .hdden-md | 可見 | 可見 | 隱藏 | 可見 |
| .hdden-lg | 可見 | 可見 | 可見 | 隱藏 |
導航條
源碼
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
修改後是用的：
<nav class="navbar navbar-default"> <!-- container-fluid頁面100%寬度 --> <!-- containe響應式版心 --> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Bootstrap中文網</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Bootstrap2中文文檔</a></li> <li><a href="#">Bootstrap3中文文檔</a></li> <li><a href="#">Bootstrap4中文文檔</a></li> <li><a href="#">Less教程</a></li> <li><a href="#"> Query API</a></li> <li><a href="#">網站實例</a></li> </ul> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">關於</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
模態框：
源碼
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
修改使用：
修改後是用的：
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 點擊 </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="exampleInputEmail1">郵箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">上傳文件</label> <input type="file" id="exampleInputFile"> <p class="help-block">提示：上傳身份證反正面！</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 登錄 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
轉換大小寫：
<!-- 轉換成小寫 -->
<p class="text-lowercase">JIFANGYAN</p>
<!-- 轉換成大寫 -->
<p class="text-uppercase">jifangyan</p>
<!-- 單詞首字母大寫 -->
<p class="text-capitalize">ji fang yan</p>
H5C3動畫
過渡屬性：transition
變換屬性：transform
平移效果：translate
縮放效果：scale
旋轉效果：rotate
修改旋轉點座標：transform-origin
視距（一般600-1000）:perspective
聲明動畫關鍵字：@keyframes
調用動畫屬性：animation
無線循環播放：infinite
反向播放：alternate
動畫結束位置：animation-fill-mode:forwards
鼠標懸停的時候動畫停止： animation-play-state: paused
複習單位：
px寫多少就是多少
寫百分比的時候參考的是父元素的寬高（設置margin值爲百分比的時候參考的是父盒子的寬度）
em參考當前盒子的字體大小
rem參考的是html的字體大小
拓展：view:視口
vw、wh將瀏覽器的寬高分成100分
width：10vw瀏覽器寬度的10/100
height：10vh瀏覽器高度的10/100