我學到了那些HTML5 簡單標籤

標籤：under   顯示   nbsp   fixed   迴圈   ack   背景   順序   中間   

塊級格式化上下文：在父級建bfc，子級浮動導致高度塌陷可以找回高度         overfolw：hidden

 

常見會觸發bfc的：1.根項目  2.folat   3. overolw:auto scroll ,hidden4.display:table-cell, table-caption      inline-block,flex, inline-flex5.position:absolut,fixed 

定位：相對定位，相對於自身的位置移動   postion：relative

絕對位置：脫離文檔流  position：absolute

非靜態定位：position：relative

固定定位，脫離文檔流，以視口為準  position：fixed

z-index 層數和定位一起用 可以把覆蓋的內容顯示出來

在父級裡面 子級相對定位就跑不出去，以包含他的上一級為準

 

 

浮動   脫離文檔流

float：left/right 左浮動/右浮動   右浮動後順序會亂 可以先左浮動之後浮動他的父級

去掉無序列表的小圓點：

list-style：none；

　　　　　upper-coman；變成大寫

　　　　　lower-roman；變成小寫

　　　　　upper-alpha；/lower-alpha   英文大小寫

虛線  boder：  px dased 顏色；

點線 boder：  px dotted       ；雙實線  boder： px   double

定義四個方向的樣式 只需要在  boder-方向  後面的內容同上

長度和寬度一樣的話可以用  boder-reius：50%  可以調成圓形

boder-reius：px  px  px  px  可以把四個方向的角 調成圓角

 

色彩坡形     

    background：linear-gradient（顏色   顏色）

 

外邊框縮排

*{margin：0px；padding：0px}

 

 

 

元素陰影

box-shadow：px  px 模糊值px  外延顏色；

線性漸層

background：linear-gradient（to right，red，yellow）；角度漸層   90deg

放射狀漸層

 background：radial-gradient（red px；yellow    px）

那些樣式需要漸層   勻速

transition：all linear  1s；

迴圈

@keyframes box1{

from{

      background-----

     }

}

to{background----}

動畫屬性animation   

infinite  迴圈次數無線

 

行內標記准換為塊級

display：black

line-height：px

 

浮動

float：left/rite  左右浮動

右浮動會導致順序變亂   可以先左浮動  後浮動他的父級

clear：both  清除浮動

子級浮動  父級高度會塌陷  行內元素浮動後會視為塊級

 

在浮動文本元素時候設定寬度

 

 

定視口

 

background：顏色  url（圖片路徑）  no-repeat不平鋪

 

 

 

{

width

height

background：url（）no-repent

}

hover{

background-position：x   y

}

背景圖片設定

background-image：url（路徑）

平鋪方式

 

none不平鋪

橫向平鋪repeat-x

縱向平鋪repeat-y

固定在左上方  background-position：topright；

　固定中間   　　　　　　　　　　　　　　center  center；

　　　　　　　　　　　　　　　　　　　　　　px   px

改變圖片大小               size：  100%：100%；

橫向鋪滿    cover；     /contain

 

 

固定定主background- attachment：fixed；

 

 

 

文字傾斜

font-style：oblique

加粗

font-weight：bole

改變字型大小

font-weight：normal

 

文本首行縮排20px

text-indent：20px

詞間距

word-spacing：px

詞間距

letter-spacing：px

行高

line-height

置中

text-alight：center

加底線

text-decorationg：underlin

加上劃先

overline

字中間划過

變成大寫/小寫

text-transform：upprecase/lowercase

line-thyough

去底線

none

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

我學到了那些HTML5 簡單標籤