1.**布局
class="left">左td>
class="right">右td>
tr>
table>隱蔽的**布局
margin-top: 20px;
display: table;
width: 800px;
height: 200px;
} .table-row
.table-cell
class="table">
class="table-row">
class="left table-cell">
左div>
class="right table-cell">
右div>
div>
div>
2.盒子模型
display屬性：block、inline、inline-block
position屬性：static、relative、absolute、fixed
* static
按照文件流靜態布局
* relative
偏移是相對於元素本身，不會改變元素的空間
* absolute
脫離文件流，不會對其他元素造成影響
相對於最近的relative或者absolute
* fixed
脫離文件流，相對可視區域
* z-index
層級優先，定位為relative、absolute、fixed可以設定
3.flexbox
彈性盒子
盒子本來就是並列的
指定寬度即可
像文字一樣排block元素
沒有清除浮動等問題
需要處理間隙
間隙是由於元素的字型大小帶來的，解決的方法是將父元素的字型置零，子元素字型自定義。
width: 800px;
height: 200px;
font-size: 0;
}.left
.right
class="container">
class="left">
左div>
class="right">
右div>
div>
在不同裝置上正常使用
般主要處理螢幕大小問題
主要方法：
隱藏+折行+自適應空間
rem/viewport/media query
* viewport
name="viewport"
content="width=device-width, initial-scale=1.0">
當統一width=320（或其他）則會等比例放大介面
或者動態寫指令碼控制大小。
//隱藏式處理不和諧的介面
注意max-width比較大的寫在上面，查詢是從上往下。
語法：
box-shadow:inset offset-x offset-y blur-radius spread-radius color,...
.;@1：inset
有inset 則為內陰影，沒有insert 則為外陰影，預設為外陰影。
@2：offset-x
橫向陰影的大小，正值陰影在右邊，負值陰影在左邊，0的時候陰影中盒子後面，看不見的，如果有blur-radius值會有模糊效果。
@3：offset-y
縱向陰影的大小，值同offset-x。
@4：blur-radius
陰影的模糊程度，值越大，陰影越模糊。
@5：spread-radius
陰影的擴大縮小，正值時，陰影擴大；負值時，陰影縮小，預設為0，和盒子同樣大。
作用：
* 營造層次感（立體感）
* 充當沒有寬度的邊框
* 特殊效果
2.text-shadow
語法：
text-shadow: offset-x offset-y blur-radius color;
@2：offset-x
橫向陰影的大小，正值陰影在右邊，負值陰影在左邊，0的時候陰影中盒子後面，看不見的，如果有blur-radius值會有模糊效果。
@3：offset-y
縱向陰影的大小，值同offset-x。
@4：blur-radius
陰影的模糊程度，值越大，陰影越模糊。
作用：
* 立體感
* 印刷品質感
3.border-radius
* 圓角矩形
* 圓形 50%
* 半圓/扇形一些奇怪的角角
4.background
* 紋理、圖案漸變
* 雪碧圖動畫 改變背景在雪碧圖中的位置再加上動畫效果
* 背景圖尺寸適應
* 當比容器大時居中
background-position: center center;
* 保持長寬比不變覆蓋容器
background-size: contain（左圖）/cover（右圖）;
原理：clip-path 屬性為我們提供了一系列的座標來建立路徑也就是我們常常說的x，y。當建立完乙個閉合的路徑時，位於路徑內部的區域就可見，而路徑外的區域就不可見。這樣就實現了裁剪效果。我們可以用這個屬性來建立各種圖形，如圓形，多邊形，三角形，橢圓形等等，沒有你做不到，就怕你沒想到。
檢視我部落格裡面的介紹
* 對容器進行裁剪
* 常見幾何圖形
* 自定義路徑
1、如何用乙個div畫***
* box-shadow 無限投影
* ::befor / ::after
2、如何產生不佔空間的邊框
* box-shadow 不給模糊值
* outline
3、如何實現圓形元素（頭像）
* border-radius:50%
4、如何實現 ios 圖示的圓角
* clip-path: (svg)
5、如何實現半圓、扇形等圖形
* border-radius組合：
* 有無邊框、邊框粗細、圓角半徑
6、如何實現背景圖居中顯示/不重複/改變大小
* background-position
* background-repeat
* background-size(cover/contain)
7、如何平移/放大乙個元素
* transform: translatex (100 px)
* transform: scale (2)
詳解CSS應用（三）
less的安裝需要node.js和npm支援，首先安裝他們。brew install node 通過homebrew安裝 檢視是否安裝成功 node v npm v 安裝node環境之後，再安裝less npm install g less 全域性安裝，這樣就可以在任意地方編譯cssless使用命令...
CSS樣式詳解 二
這篇讓我們繼續上篇css之旅吧 上貨 border 邊框 width 寬度 height 高度 background color 背景顏色 今天週日了，明天你是否要繼續跟煌sir一起學習呢 今天週日了，明天你是否要繼續跟煌sir一起學習呢 格式 選擇器常用屬性值 none 元素不浮動 預設值 lef...
詳解css 定位與定位應用
原文 定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 沒有特別的設定，遵循基本的定位規定，不能通過z index進行層次分級。relative 不脫離文件流，參考自身靜態位置通過 top,bottom,left,r...