讓標籤相對於某個元素重新定義乙個新的位置，可以相對於元素本身的位置，或者相對于父元素，甚至相對於瀏覽器視窗進行定位
屬性： position:值：
1、relative 相對定位
特點：
相對於元素本身的位置
不脫離文件流,仍然佔位
使用場景：
微調元素位置
2、absolute 絕對定位
相對於離他最近的有定位屬性的父元素，如果父元素沒有定位屬性，則會往上一級尋找， 一直 到根標籤位置
特點：
脫離文件流，不佔位：子絕父相
3、fixed 固定定位
特點：
相對於瀏覽器視窗進行定位、脫離文件流
static 靜態（預設值）
【注意】： 定位需要配合偏移量：
left：
right：
top：
bottom：
4、定位層級:
z-index: n
層級數越大，顯示越靠上
有定位屬性的元素，z-index都預設是0
沒有定位屬性的元素設定z-index無效
脫離標準文件流
脫離標準文件流,層級提高：
幾種情況：
（1） float:left;
（2） float:right;
（3）position:absolute
（4） position:fixed
浮動脫離文件流，提高半個層級，不能完全覆蓋下面元素（不能覆蓋文字）
定位脫離標準文件流，提公升乙個層級，可以完全覆蓋下面元素及其內容
使盒子在其父元素中垂直水平居中:
父元素設定 position:relative
盒子：1、 已知盒子寬高
position:absolute;
left:50%;
top:50%;
margin-left: - 盒子寬的一半
margin-top: - 盒子高的一半
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 10px
圓形： border-radius: 50%
2、list-style:none 取消列表符號
list-style-type: 列表符號型別
（1） disc 實心圓（ul預設值）
（2） circle 空心圓
（3）square 矩形
（4） decimal 阿拉伯數字(ol預設值)
（5）decimal-leading-zero 以0開頭的數字
（6） lower-roman 小寫羅馬數字
（7）upper-roman 大寫羅馬數字
（8） lower-alpha 小寫英文本母
（9） upper-alpha 大寫英文本母
list-style-position:
值： outside 預設值,列表符號在li區域外面
inside 在裡面
（1） display: none 隱藏
（2） display: block 顯示
（3） visibility: hidden 隱藏
（4） visibility： visible 顯示
區別：
display:none隱藏 元素不佔位
visibility：hidden 隱藏 元素仍然佔位
4、 文字垂直對齊方式：
【注意】：這個屬性需要設定給行內或者行內塊，不可以設定給塊標籤
vertical-align:
值：（1）baseline 基線對齊（預設值）
（2）top 頂部對齊
（3）middle 中間對齊
（4）bottom 底部對齊
**對齊: 給設定vertical-align:middle
（1） 設定容器的font-size:0
（2）將型別轉換成block
2、 垂直方向的間距（由行高產生）
解決：（1） 設定行高為0
（2） 設定字型大小為0（水平垂直都可以解決）
（3） 將標籤轉換型別，block
（4）設定vertical-align的值不為baseline
透明度：
1、 rgba(red,green,blue,alpha) 不相容ie6,7,8
alpha 透明度，0-1
只是設定元素的背景透明，元素中的內容沒有透明效
2、 opacity 設定透明度 不相容ie6,7,8
值 0-1
元素包括其中的內容整體有乙個透明
3、ie6,7,8的透明
filter: alpha(opacity=num）
4、 transparent 透明色
前端學習日記10
新增模組 1 選擇器模組 2 邊框和背景 3 使用者介面 4 漸變 5 動畫 6 2d和3d 瀏覽器私有字首 瀏覽器廠商使用一種方式提前把屬性納為自己的標準,按時該屬性還沒有成為標準 字首 ie ms ms border radius chrome和safari webkit webkit bord...
前端學習日記11
transition transition propertype transition duration transiton timing function transition delay 過渡的復合屬性 其中，過渡的持續時間不可以省略 參與過渡的屬性省略 預設是all 過渡的速度變換曲線省略 預...
前端學習日記12
1 lumn count 3 分欄的數量 2 column gap 50px 欄目和欄目之間的間距 3 column width 500px 欄目的寬度 4 column rule 5px dotted yellow 欄目和欄目之間的邊線 邊框一樣 5 column span all 標題橫跨的列數...