1.static:預設情況
2.relative：相對的，與正常位置對比
3.absolute：絕對的，與父元素位置對比
4.fixed：相對於瀏覽器視窗固定
5.sticky:粘性的，滾動後超出區域就粘在目標位置
1.margin：外邊距
2.border：邊框
3.padding：內邊距
4.content：內容
1.a:link:未訪問的鏈結
5.p:before：在標籤之前插入內容
6.p:after：在標籤之後插入內容
兩者的區別：
偽類用:分割，偽元素用::分割
偽類是一種額外的樣式，偽元素是一種虛擬元素
容器上的屬性：
1.flex-direction：決定主軸的方向
.container.container.container.container.container.container1.order：排列順序，數值越小越靠前，預設值為0
.item.item.item.item.item
//舉個例子：
.item
.itemalign-items:center
2.line-height:line-height:***px(***與父元素的高度一樣)
3.vertical-align:middle前提是display為inline-block
4.已知父元素高度,給子元素設定：
position:relative
top:50%
transform:translatey(-50%)
1.使用偽元素：
.div::after2.設定viewport的scale值+rem
1.當dpr=2時
em是根據父元素的font-size來計算的，比如span是div的子元素，html,div,span,其實span的font-size=20px
優缺點：這種方法適合新專案，老專案修改太大
層疊上下文：某些元素因為某些原因層疊到了一起
層疊順序：正z-index > z-index=0 > inline或者inlineblock盒子 > 浮動盒子 > block盒子 > 負z-index > 層疊上下文(background/border)
**法則：
誰大誰上，看層疊水平z-index，誰大誰在上面
後來居上，當層疊水平和層疊順序一樣時，後面的元素覆蓋前面的元素
邊框：border-radius:10px設定圓角，border-shadow:10px(右) 10px(下) 5px(陰影大小) #888888設定陰影
背景：background-image、background-size漸變：線性漸變background-image:linear-gradient（***），徑向漸變：background-image:radial-gradient（***）文字效果：
text-shoadow:文字陰影效果
box-shadow：盒子陰影效果
text-overflow：文字溢位效果
word-wrap：允許換行
word-break：換行方式，keep-all(詞之間換行),break-all(詞內部換行)
2d轉換：
translate(50px,100px)//從左邊移動50px，從頂部移動200px
rotate(30deg)//正值順時針旋轉，負值逆時針旋轉
scale(2，3)//寬度變為原來的兩倍，高度變為原來的三倍
skew(30deg,20deg)//向x軸傾斜20度，向y軸傾斜30度
rotatex(deg),rotatey(deg)過渡：
transition-property: width;(規定過渡的屬性名稱)
transition-duration: 1s;（過渡持續時間）
transition-timing-function: linear;（過渡效果方式）
transition-delay: 2s;（從何時開始）
animation-name: myfirst;(動畫名稱)
animation-duration: 5s;（持續時間）
animation-timing-function: linear;（效果方式）
animation-delay: 2s;（何時開始）
animation-play-state: running;（是否正在執行）
@keyframes myfirst（規則）
25%
50%
100%
}
邊框：box-sizing: border-box將padding內邊距和border邊框包含在width和height中
多**查詢：當寬度小於xx時，將其***x
兩邊固定寬度，中間自適應，即將中間子元素的寬度設定為 100%，左邊和右邊的子元素設定為固定的寬度(負margin保持在同一行)
弊端：當瀏覽器無線變窄，「聖杯」將會「破碎」掉
出發點：為了解決上面的弊端
為了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裡用margin-left和margin-right為左右兩欄div留出位置
也叫塊級格式化上下文，用於布局塊級盒子的一塊渲染區域，有一套渲染規則，決定其子元素如何布局以及和其他元素之間的關係和作用
根元素，即html元素
float的值不為none
overflow的值不為visible
display的值為inline-block,table-cell,table-caption
position的值為absolute，fixed
組織元素被浮動元素覆蓋
可以包含浮動元素
阻止margin重疊
前端學習筆記css篇（1）
1.響應式布局 常用的響應式布局方法 為不同解析度配置不同的css檔案 當解析度大於720px時 media screen and min width 720px 2.css動畫 css3的animation提供簡單的動畫效果，如設定透明度漸變 header keyframes c opacity ...
CSS 動畫學習筆記 Animation篇
首先了解一下animation的基本用法，使用其需要給動畫指定乙個週期持續的時間，以及動畫效果的名稱。可以看一下demo 注釋 這是乙個給透明和背景色屬性設定的乙個動畫過渡效果 實現很簡單 具體看到 中的注釋 1 block wrap 9 動畫效果，opacity為效果標題，keyframes必須要...
CSS學習筆記 傳統定位篇
在沒有使用任何定位和浮動情況下，html中塊元素從上到下排布 每個塊獨佔一行，自帶換行 內聯元素從左到右排布。1 靜態定位 static 一般的標籤元素不加任何定位屬性都屬於靜態定位，在頁面的最底層屬於標準流。靜態定位的元素不會受到 top,bottom,left,right影響。2 絕對定位 ab...