CSS

簡介

CSS (cascading style sheet)層疊樣式表

CSS書寫方式

  1. 內嵌式:在head標簽中書寫style標簽。
  2. 外鏈式:用link標簽引入.ccs文件
<link rel="stylesheet" type="text/css" href=""/>
  1. 行內式:直接寫在標簽的style屬性上。
  2. 導入式:在style標簽內寫@import url()。
<style> 
    @import url(".css"); 
</style>

CSS基本語法

選擇器{ 
    鍵:值; 
}

CSS注釋

/*注釋內容*/

CSS常用單位

符號 意義
px 和 % px 代表 pixel 像素,百分號是窗口的百分之幾
em font size of the element ,相對于元素的字體大小,如果元素沒有px,則會繼承父元素px
rem font size of the root element,相對于根元素的字體大小
vw viewport width,1vw 等于視口*寬度的1%
vh viewport height,1vh 等于視口*高度的1%

CSS選擇器 CSS Selector

標簽選擇器(Tag selector)

直接寫標簽名即可

div{ 
    width:100px;
    height:100px; 
}

類選擇器(Class selector)

用點(句號,full stop)來進行選擇,點類名

.class{ 
    background-color:red; 
}

同一類名鍵值沖突,將使用css書寫上后寫的

id選擇器(ID selector)

用井號 # 來進行選擇,井號id

#id{ 
    font-size:14px; 
}

復合選擇器

選擇器名稱: 用法
后代選擇器: 用空格表示后代
交集選擇器: 哦那個長用在標簽的某一類,例如div.1
并集選擇器: 用逗號隔開,一起選中

偽類選擇器

選擇處于特殊狀態下的元素,例如超鏈接a的4個特殊狀態

a:link 沒有被訪問過的超鏈接
a:visited 已被訪問過的a
a:hover 鼠標懸停下的a
a:active 正在激活的a

遵從“綠哈”(LVHA)順序寫,否則會有偽類不生效。
link→visited→hover→active

以下為css3選擇器,ie可能不兼容

元素關系選擇器

子選擇器 >大于號 兩元素必須是父子關系,選中父元素的直接子元素
相鄰兄弟選擇器 + 加號 A和B都是同一個父親,A+B選中B
通配兄弟選擇器 ~ 波浪號 A和B同級,A~B選中A后所有的同級B

序號選擇器

:first-child 
:last-child 
:nth-child(n)/(an+b)/2n+1 odd/2n even
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)

除了type都不可跨越種類

屬性選擇器

標簽[屬性] 選擇帶有方括號里屬性的標簽
標簽[屬性="值"] 選擇屬性與值相同的帶有此屬性標簽
標簽[屬性^="值"] 尖括號,以值開頭的帶有此屬性標簽
標簽[屬性$="值"] 美元號,以值結尾的帶有此屬性標簽
標簽[屬性*="值"] 星號,選擇含有該值屬性的標簽
標簽[屬性~="值"] 波浪號,以值空格分開
標簽[屬性丨="值"] 豎號,以值開頭的

CSS3新增偽類

:empty 選擇空標簽
:focus 選擇當前獲得焦點的表單元素
:enabled 選擇當前有效的表單元素
:disabled 選擇當前無效的表單元素
:checked 選擇當前已經勾選的單選按鈕或多選按鈕
:root 選擇根元素,即<html>標簽

偽元素

用雙冒號書寫

::before 匹配選中的元素的第一個子元素,必須設置content屬性
::after 匹配選中的最后一個子元素,必須設置content屬性
::selection 文檔中被用戶選中高亮的部分
::first-letter 塊級元素第一行的第一個字母/文字
::first-line 塊級元素第一行文字

層疊性和選擇器權重計算

層疊性: 多個選擇器可以同時作用于同一個標簽,效果疊加活覆蓋。
層疊性沖突處理: id權重>class權重>標簽權重
復雜選擇器權重計算:id個數,class個數,標簽個數(x,y,z)
!important提升權重

CSS元素分級:

行元素(display帶inline的元素)和塊元素(display為block的元素)

行元素:

不獨占一行(能并排顯示),設置寬高無效(能寫值但不表現),width和height寫多少,瀏覽器盒子模型就有多少,但沒任何效果
常見inline元素:span、a、strong。

塊元素:

獨占一行(不能并排顯示),能設置寬高等所有盒模型屬性,如果不設置width默認100%。
常見block元素:div、p、ul ol li、h1-h6

行內塊元素:

能并排顯示,能設置寬高。如果不設置,寬和高都由子元素撐起。

如果不在標簽內寫文本,直接寫在body上,會被識別成一段叫#text里寫的字符串。同樣是行內元素。

盒模型

盒模型4大元素:由內到外依次為 content 、pading 、border 、margin。
content:內容區 。
padding:內邊距,content與border之間的距離。
border:邊框。
margin:盒子與盒子之間的距離。
[圖片上傳失敗...(image-7397d6-1649463813126)]
W3C標準盒模型如上圖所示,同時也是瀏覽器顯示的盒模型。
?但是注意,盒子(box)與盒模型(box model)不是一個東西。

content

內容區,可以定義width和height,一般情況下寫width和height指的就是content的寬高。

padding

是盒子的內邊距,padding是四個方向的,只能設置數值。
可以分別用小屬性進行設置:padding-top、padding-right、padding-bottom、padding-left 。
四數值寫法:用四個數值以空格隔開進行設置,分別代表上右下左(從上開始順時針四個方向)。
三數值寫法:上 右 下 (左=右)
二數值寫法:上 右 (下=上、左=右)
一數值寫法:上 (右=上、下=上、左=右)
padding部分會強制繼承content部分的background,如果不想繼承只能采用 backgroud-clip:content-box; 取消。

border

border是盒子邊框,可以設置線寬,線形、線色,也是四個方向的。
border-width:線寬,可以設置數值;
border-style:線形,常見四種:solid 實線、dashed 虛 、dotted 點、double 雙;
border-color:線色。
也有四個方向小屬性:border-top 、border-right 、 border-bottom 、border-right ;也可以用多數值寫法,值法規則與padding一樣。
同時四個方向小屬性每個小屬性還能分出四個方向的線寬,線形,線色,
例如 border-top-width 、border-top-style 、 border-top-color。
無邊框:border值設為none。
如何利用邊框制作三角形:把顏色值設為 transparent 透明色。先設置四邊框透明色,content不設內容(寬高設為0),然后單獨設置一邊邊框顏色即可。

border-radius

border-radius屬性,圓角邊框,只能設置數值。單位通常為像素,值代表圓的半徑;單位也可以取百分值,只有百分值才能設置長方盒子為橢圓。當圓角直徑等于方盒子邊長一半,方盒子就會變為圓。
也有四個方向小屬性(從上開始順時針四個方向):上左,上右,下右,下左:
border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius 、 border-bottom-left-radius
四值寫法:順時針由上到下。
三值寫法:順時針由上到下,左上和右上和右下(左下=右上)
二值寫法:對角線由上到下,左上和右上(右下=左上、左下=右上)

border-image

屬性 描述
border-image-source 用在邊框的圖片的路徑
border-image-slice 圖片邊框向內偏移。(裁剪的尺寸,一定不家單位,上右下左順序)
border-image-width 圖片邊框的寬度(需要加單位)
border-image-repeat 圖像邊框是否平鋪repeat、鋪滿round或拉伸stretch

margin

margin是盒子外邊距,即盒子與盒子之間的距離。margin也有四個方向。
margin重疊(塌陷、大吞小):豎直方向的magin會發生重疊現象,小的會塌陷到大的margin中。父子元素也有margin塌陷問題。
塊元素水平居中:將左右margin值設為auto即可,例如: margin: 0 auto;
垂直居中需要使用絕對定位技術。盒子居中是相對于父盒子居中,文字居中是相對于父標簽居中,概念不一樣。

box-sizing屬性

默認值content-box,size屬性是用來設置寬高的,當設置:box-sizing:border-box; 后,width和heigh表示整個盒子大小,即根據border來計算width和height。

box-shadow屬性

寫法: box-shadow: X偏移量 Y偏移量;例如:box-shadow: 1px 3px ;
可選值:模糊度、陰影大小、顏色、內陰影inset。例如:
box-shadow:1px 1px 10px 3px black inset;
表示x軸偏移量1像素,y軸偏移量1像素,陰影大小為10,黑色的內陰影。
可添加多個陰影,用逗號隔開。
內陰影可以做內發光。

block屬性和inline屬性的盒子:

margin設定對inline元素的左右生效,對上下無效。padding對左右生效,對上下僅樣式生效,距離無效。

display屬性:

常用值

display:block; 轉為塊級元素
display:inline-block; 轉為行內塊元素
display:inline 轉為行內元素
display:none 將元素轉為不可見,在文檔流中不占位置
display:float-root 元素開啟bfc

將元素隱藏還有另一種方法,使用 visibility:hidden; 也可將元素隱藏,但元素不脫離文檔流,不放棄自己的位置。

浮動與定位與BFC

開啟浮動和絕對定位、固定定位都會使元素脫離文檔流,只要脫離文檔流的元素,就不分inline和block,脫離文檔流的內容一律能設置寬高。脫離文檔流后根據z-index屬性堆疊排序。
z-index屬性:值是一個沒有單位的正整數,數字大的可以壓蓋數值小的。
文檔流:html排版流程(flow)

浮動 float

浮動最初的功能:實現文字環繞圖片。最本質的功能:實現盒子并排。
浮動使用要點:要浮動,并排的所有元素都要設置浮動,父盒子要有足夠寬度,否則盒子會掉下去。
浮動的順序貼靠特性:子盒子會按照元素書寫順序進行貼靠,如果沒有足夠空間,則會尋找再前一個兄弟元素,有空間就可以鉆空子。
如何開啟浮動,元素添加:
float:left; 開啟左浮動,元素序號從左邊開始數。
float:right; 開啟右浮動,元素序號從右邊開始數。
使用浮動實現網頁布局注意事項:

  1. 需要垂直排列的盒子,不要設置浮動,只有需要并排顯示的盒子才要設置浮動。
  2. 一個浮動盒子的內部盒子還可以繼續浮動。
  3. 要實現復雜浮動就不要節約盒子。

定位position

position定位,常見值:relative,absolute,fixed,sticky,static(默認)

static 默認值

默認值,靜態的,定位跟隨文檔流排列的。可以認為是不開啟定位。

relative 相對定位

position:relative;
開啟后盒子相對自己原來的位置進行定位,開啟后根據位置屬性(left,right,top,bottom)偏移量進行位置調整,不脫離文檔流,會在老家留坑。

absolute 絕對定位

position:absolute;
開啟后,盒子會根據離自己最近的一個 開啟定位的祖先元素 進行定位,開啟后根據位置屬性(left,right,top,bottom)偏移量調整位置,會脫離文檔流,釋放位置。
利用絕對定位實現盒子垂直居中:

div{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top: -自己高度的一半; 
    margin-left: -自己寬度的一半;
}

絕對定位用途:用來制作“壓蓋”、“遮罩”效果;用來結合css sprites實現精靈圖使用;用來結合js實現動畫(例如輪播圖)

fixed 固定定位

position:fixed;
開啟后,盒子會根據視口進行定位,不管頁面如何滾動,它永遠固定在那里(只有設定值才生效)。脫離文檔流。

sticky 粘滯定位

position:sticky;
開啟后,設定top,left等值,當盒子到達視口viewport那個位置后會隨著視口移動。

清除浮動 clear

元素浮動后會脫離文檔流,如果不清除浮動將會對布局產生影響。
clear屬性:規定元素的哪一側不受其他浮動元素影響,只有塊元素能使用。
clear:both/left/right; 分別代表左右兩邊都不受,左邊不受影響、右邊不受影響。

清除浮動方法:

  1. 給后面的父盒子設置 clear:both;
  2. 在兩個盒子之間添加一個帶 clear:both; 的盒子
  3. 使用::after偽元素給盒子添加最后一個子元素,并添加 clear:both;
  4. 在浮動元素外套一個父盒子,并且父盒子形成BFC。

BFC

box formatting context ,塊級格式化上下文。
開啟后此盒子會變成頁面上一個獨立容器,容器里面的子元素不會影響外面的元素。里面的子元素也不會影響父元素及父元素以外的元素。
比如里面的子元素不能跑出父元素外面。比如解決margin塌陷(僅限父子塌陷)。比如父盒子不會受到子元素浮動造成的父盒子高度塌陷。比如開啟BFC可以阻止被其他浮動元素覆蓋。

如何開啟(形成、創建)BFC

  1. 脫離文檔流:開啟浮動,float值不是none。或者開啟position:absolute。
  2. display值設為inline-block、flex或者inline-flex或flow-root。
  3. 元素設置 overflow:hidden; (overflow:hidden 表示溢出盒子邊框部分隱藏,padding溢出部分還在)
  4. 添加clearfix:
.clearfix::before,.clearfix::after{
    content:''; 
    display:table; 
    clear:both; 
}

可同時解決高度塌陷和父子外邊距重疊。

圣杯布局

結構需要是:先center

<div class="contain">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

要點:給contain的三個元素開啟float,然后footer開啟clear。
contain開左右padding。
然后給center width100% ,開padding使得左右空出一段距離。
然后給left開啟 margin-left:-100%; 利用的是“盒子width、height、margin、padding的百分數是按父盒子的content width百分比來算的”
然后在給left做position:relative,right:自身寬度使得往左移就完成了left的設置。
再給right做margin-right為負自己的長度,這個時候right就相當于放棄了自己的長度,且會往上移。

flex布局 display:flex

  • 在flex誕生之前,一開始用的是table布局,后被淘汰,后使用 float 和 position 的搭配實現布局,但這兩個屬性并不是為布局而生的。flex是第一個真正意義上為布局而誕生的一套屬性。
  • flexible box , 意為“靈活的、彈性的盒子”,所以flex布局一般也叫做“彈性布局”。
  • 通過 display:flex;display: inline-flex; 開啟彈性布局。
display: flex;
//或
display: inline-flex;
  • flex 是設置盒子為塊元素彈性盒(獨占一行), inline-flex 是設置盒子為行內塊元素彈性盒(寬高由內容撐開)
  • 開啟 flex 后所有 直接子元素(flex項)強制變為行內塊元素,所有屬性自動帶上 inline ,就算是 flex 也是。

flex 構成內容

  • flex 由 flex容器(flex container) 和 flex項(flex item)構成。

flex容器:開啟了彈性布局的元素。
flex項:flex容器內所有直接子元素自動成為 flex 項。

  • 默認橫向是主軸main axis,豎向是交叉軸cross axis(副軸)。
  • flex 項默認會自動按主軸方向排列。

flex 容器屬性

flex-direction 屬性

  • flex-direction 屬性設定主軸的方向(即flex項的排列方向)
屬性值 意義
row 默認值,主軸為橫向,方向從左往右
row-reverse 主軸為橫向,方向從右往左
column 主軸為豎向,方向從上往下
column-reverse 主軸為豎向,方向從下往上

flex-wrap 屬性

  • flex-wrap屬性定義如果主軸線排不下所有內容如何換行。
屬性值 意義
nowrap 默認值,不換行,如果flex項總長度比flex容器大,flex項的主軸方向長度不生效,強制收縮
wrap 換行,如果flex項總長度比flex容器大,flex項主軸長度屬性不受任何影響
wrap-reverse 換行,第一行在最下方,flex項排列方向同主軸向

flex-flow 屬性

  • flex-direction 和 flex-wrap 的組合簡寫屬性,默認值 row nowrap

align-items 屬性

  • 多行或列flex項在副軸上,align-content默認值是stretch,每一個flex項都是在 等分線 上開始的。
  • align-items 屬性定義多行或列flex項,有等分線存在的情況下,如何進行副軸上的排列
屬性值 意義
stretch 默認值,意為有彈性的,如果flex項未設置在副軸上的長度,則自動拉伸占滿整個容器的副軸長度
flex-start 按副軸等分線開始端對齊
flex-end 按副軸等分線結束端對齊
center 副軸上等分線與等分線之間居中對齊

justify-content 屬性

  • justify-content 屬性定義 flex項在主軸上的對齊排列方式
屬性值 意義
flex-start 默認值,按主軸開始端對齊
flex-end 按主軸結束端對齊
center 主軸上居中對齊
space-between 兩端對齊,flex項之間的space都相等,start和end 與項之間無space
space-around 每個項與正軸平分線兩側的間隔相等
space-evenly 所有space平均分,start與項,項與項,項與end之間的space都相等

align-content 屬性

  • align-content 屬性定義 flex項在副軸上的對齊方式,默認值是stretch,更改此屬性值后將無視副軸等分線,所以只有一行時無法使用此屬性的center。
屬性值 意義
stretch 如果flex項未設置在副軸方向上的長度,則自動拉伸占滿容器的副軸長度
flex-start 按副軸開始端對齊
flex-end 按副軸結束端對齊
center 副軸上多行項無視副軸等分線然后一起居中對齊
space-between 兩端對齊,flex項之間的space都相等,start和end 與項之間無space
space-around 每個項兩側的間隔相等
space-evenly 所有space平均分,start與項,項與項,項與end之間的space都相等

flex項 的屬性

  • 改變了默認值即為開啟某項屬性

flex-grow 屬性

  • 默認值為0,可設定為其他正整數。
  • 開啟此屬性的 flex項 會按設定的數值比例占據 space 。只開啟部分,沒開啟的則不占space。
  • 例如:如果所有 flex項的 flex-grow 都為1,著他們將會等分剩余space。如果只開啟一個項的 flex-grow,則這個項不論設為多少都獨占所有space。
  • 開啟此屬性后將無視flex項在正軸方向上的長度以及 flex-basis

flex-shrink 屬性

  • 默認值為1,可設定為其他正整數。
  • 開啟此屬性的 flex項 會按設定的數值比例占據超出的 space;默認值為1即如果flex容器空間不足,所有同級flex項默認一起等比縮小。
  • 如果設置為0,則不縮小,負值無效。通常就是用來設為0。

flex-basis 屬性

  • 默認值為auto,可設定為其他長度,例如像素長度或百分長度。
  • 開啟此屬性的 flex項 即定義在分配 space 之前,flex項占據的主軸方向上的長度。
  • 當一個元素同時設置了 flex-basis 和主軸方向上的寬或高,flex-basis 優先級更高。

flex 屬性

是 flex-grow,flex-shrink,flex-basis的復合簡寫,默認值 0 1 auto

order 屬性

定義flex項在flex容器中排列的序號,默認值為0,數值越小,排列越靠前。

align-self 屬性

允許開啟了此屬性的 flex項與其他項有不一樣的對齊方式,會覆蓋align-item屬性。
默認值為auto,表示繼承父元素的align-items屬性值,如果沒有父元素,則等同于stretch。

grid 布局

  • grid意為網格、方格的意思,所以grid布局一般稱為“網格布局”
  • 通過 display: grid;display: inline-grid; 可以開啟網格布局。
  • 成為了grid容器的盒子,column、float、clear、vertical-align 屬性無效,且容器內的直接子元素強制成為 grid 項。

grid構成內容

  • grid容器(grid container)、grid項(grid item)、grid line 網格線,grid track 網格軌道、grid cell 網格單元、grid area 網格區域。

新的單位

fr單位:fraction的縮寫,意為“片段”,剩余空間的分配數。
gr單位:網格數(沒有被w3c采納)

grid容器屬性

grid-template-rows 和 grid-template-columns

  • grid-template-rows 是設定每個rows軌道的大小以及網格線名字。
  • grid-template-columns 是設定每個columns軌道的大小以及網格線名字。
grid-template-rows: [first] 100px [line2] 200px [line3];
grid-template-columns: repeat(5,1fr);

屬性值是:

  1. 軌道大小track-size:可以使用css長度,百分比,fr單位數值,auto,repeat() 函數等。
  2. 網格線名字line-name:網格線名字可以用中括號里寫名字為網格項命名,一條線可以寫多個名字,用空格隔開,如果沒命名,系統會默認加上數字以及 區域-star,區域-end 的命名。
  • 如果grid-template-columns只有一個值,那就只有一列,這列的寬度就是這個值,這列就只有一個grid項,其余grid項會根據grid-auto-flow的默認值強制多行排布。
  • 如果grid-template-rows只有一個值,那就只設置第一行的軌道大小,其余都是auto。

grid-template-areas 屬性

  • 設定網格區域命名,如果不為區域命名,可以用none。
  • 每一行的區域命名,用算雙引號引起來。每一行的區域數都要一樣,否則該屬性不生效。
  • 可以用點 . 代表未命名的區域。
  • 每個區域必須是矩形,不可十字形,Z字型等。

grid-template 屬性

template 是 模板、樣板 的意思。
grid-template 是 grid-template-rows 和 grid-template-columns 和grid-template-areas 的復合簡寫屬性。
不推薦使用,可讀性差,難維護。

grid-gap(后已改為gap)

gap: 10px 20px;
  • 該屬性是 grid-row-gap 和 grid-column-gap 的復合簡寫屬性。
  • 第一個值是 grid-row-gap 第二個值是 grid-column-gap。
  • 如果只寫一個值,這這個值同時代表 grid-row-gap 和 grid-column-gap。

grid-row-gap 和 grid-column-gap

grid-row-gap: 10px ;
  • gap 是空隙的意思,這兩個屬性可以設定網格與網格之間間隙的大小。
  • 屬性值為長度,例如10px。
  • 只能設定一個值,該grid容器內這個方向所有的gap都是這個值。

grid-auto-flow 屬性

設定如果grid項超出設定的column或row的軌道數,這些超出的grid項如何排布填充放置。
默認值為 row,還有 column、dense(不推薦使用)

grid-auto-rows 和 grid-auto-columns

設置 rows 和 columns 的隱式網格軌道大小。

grid 屬性

是 grid-template 和 grid-auto-flow 和 grid-auto-rows 和 grid-auto-columns 的復合簡寫屬性。

align-items 屬性

設定 grid 項與每個grid區域的垂直方向對齊方式。
屬性值:

  1. stretch:默認值,內容寬度占滿整個網格區域空間。
  2. start:上端對齊。
  3. center:居中對齊。
  4. end:下端對齊。

justify-items 屬性

設定 grid項與每個 grid區域的水平方向對齊方式。
屬性值:

  1. stretch:默認值,內容寬度占滿整個網格區域空間。
  2. start:左端對齊。
  3. center:居中對齊。
  4. end:右端對齊。

place-items 屬性

align-items 與 justify-items 的復合簡寫屬性,可以分別寫兩個只。
如果只寫一個值則水平方向和垂直方向都一樣。
例如 place-items:center; 即可實現垂直水平都居中。

align-content 和 justify-content

grid 也可以使用 align-content 和 justify-content 。items是內容與容器的對齊方式,content 是容器與父容器的對齊方式。

place-content 屬性

place-content 屬性是 align-content 和 justify-content 的復合簡寫屬性。
align-content 默認值是 stretch,justify-content是 start。

其他知識:grid可用的css函數

  1. repeat(); 函數值1為重復的次數,函數值2為要重復的內容,例如 grid-template-row:repeat(7,1fr)
    函數值1可以為整數,也可以是 auto-fill,auto-fit。auto-fill,auto-fit需配合minmax() 使用。
    設定項與容器的大小可以自動計算 auto-fill 與 auto-fit 的值,兩個差別是前者以項為準,后者以容器為準。
  2. fit-content(); 將給定大小夾緊為可用大小。
  3. minmax(); 定義了一個長度范圍的閉區間,用法 minmax(最小值,最大值)。最小值最大值可以是長度,百分數,fr單位數,或者max-content、min-content、auto。

grid 項屬性

grid-row 和 grid-column

  • grid-row 是 grid-row-start 和 grid-row-end 的復合簡寫。
  • grid-column 是 grid-column-start 和 grid-column-end 的復合簡寫。
  • 屬性值 start/end 用斜杠隔開。
grid-row: first / span 7 ;
grid-column: 1 / 5 ; //不推薦用數字,因為less等預處理會進行運算

grid-row-start 和 grid-row-end、grid-column-start 和 grid-column-end

  • grid-row-start 和 grid-row-end 使用上下網格線劃定開始位置和結束位置以確定grid項在grid容器內的位置。

  • grid-column-start 和 grid-column-end 使用左右網格線劃定開始位置和結束位置以確定grid項在grid容器內的位置。

  • 屬性值可以是:

    1. 網格線自有的數字編號。
    2. 網格線的名字。
    3. span+數字,意為跨越多少格,通常用start定義開始位置,然后end用span+數字定義跨越多少格。例如 grid-row-start:1; grid-row-end:span 3;
    4. span+線名,意為跨越到名字相匹配的線上。
    5. auto
  • 如果 start 和 end 超出設定的 grid-template-rows/colums ,則會創建隱式網格軌道。

  • 網格項是可以重疊的,可以通過 z-index 控制堆疊順序。

grid-area 屬性

  • 使用網格區域名字劃定 grid 項所在的位置,用法 grid-area: 區域名字;這個區域名字不用加引號
  • 或者使用四個方向的線段來劃定:
    grid-area: 上邊開始/左邊開始/下邊結束/右邊結束;

align-self 屬性

設定 grid項 內的內容垂直方向的對齊方式。
屬性值:

  1. stretch:默認值,內容寬度占滿整個網格區域空間。
  2. start:上端對齊。
  3. center:居中對齊。
  4. end:下端對齊。

justify-self 屬性

  1. stretch:默認值,內容寬度占滿整個網格區域空間。
  2. start:左端對齊。
  3. center:居中對齊。
  4. end:右端對齊。

place-self 屬性

align-self 與 justify-self 的復合簡寫屬性,可以分別寫兩個值。
如果只寫一個值則水平方向和垂直方向都一樣。
例如 place-self:center; 即可實現垂直水平都居中。

grid 通常用法

先定模板,再把項放進模板。例如:

  1. 先定 grid-template-areas,定好模板名字。
  2. 然后 grid-template-rows/columns 定好模板軌道寬高。
  3. 再把 grid項 用 grid-area 劃分區域名字。

CSS其他屬性

常用文本樣式:

color屬性

設置文本內容前景色,值可以用單詞、十六進制表示法、rgb表示法,rgba表示法

color: #fff; 
color: red; 
color: rgb(0,0,0); 
color: rgba(0,0,0,.5);

font-size屬性

設置文本字號,單位為px,em,rem

font-weight屬性

設置文本字重(粗細),常見四種值(值為字體文件自帶,如果沒有就沒有):

normal 正常,與400等值
bold 加粗,與700等值
light 細體
bolder 更粗

font-style屬性

設置字體斜體italic、傾斜oblique,默認值normal正常

font-family屬性

用于設置字體,可以一次放幾個,用逗號隔開。
擁有字體文件后,可以用@font-face定義字體,如下:

@font-face { 
    font-family:; 
    src: url(); 
}

font屬性合寫

font-style(和、或)font-weight + font-size/line-height + font-family;

text-decoration屬性

設置文本下劃線、刪除線、頂線,默認值none沒有

underline 下劃線
line-through 刪除線
overline 頂線

text-indent屬性

定義首航文本內容縮進量,單位通常是em(字符寬度)

text-align屬性

元素添加 text-align:center; 可實現元素內的#text文本水平居中

text-shadow屬性

給#text文本添加文字陰影,屬性值同box-shadow

line-height屬性

用于定義行高,單位通常是px,也可以不寫單位。不寫單位表示字號的n倍,也可以寫百分數。
單行高等于盒子高度,即可實現#text文本在盒子內垂直居中。
如果不考慮居中,從設計角度來看,文字行高定義150%-170%是最好的閱讀體驗。

letter-spacing 屬性

字符間距

writing-mode 屬性

文本方向,值vertical-rl:從右向左閱讀;配合text-orientation:mixed; 屬性,可以讓文本保持豎直或傾斜。

list-style屬性

list-style:<' list-style-type '> || <' list-style-position '> || <' list-style-image '>

可設置在文字內還是文字外 outside | inside 。可以放圖片,設置url即可。

overflow屬性

可分別設置overflowX和overflowY,默認值visible,hidden隱藏,scroll、auto滾動條

其他文本知識:

繼承性:

文本相關屬性普遍具有繼承性,給祖先設置,后代會繼承生效。
比如:font-開頭的、text-開頭的、line-開頭的、color、list-開頭的。
在繼承情況下,選擇器權重計算失效,采用“就近原則”。除非選中的是同一個標簽再比權重

單行文本溢出容器用...代替寫法:

.text-ellipsis{ 
    white-space:no-wrap;    //溢出不換行 
    overflow:hidden;         //溢出隱藏
    text-overflow:ellipsis;     //...替代顯示 
}

單行文本溢出不能和flex布局搭配使用,解決方法是形成多層嵌套。

多行文本溢出用...代替寫法

.multiline-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orent: vertical;
    white-space: normal !important;
    word-wrap: break-word;
}

僅webkit內核瀏覽器可用,-webkit-line-clamp是控制在多少行結尾用...代替。
使用多行文本溢出的容器不要設置高度。

其他盒子屬性

outline屬性

outline 為外邊框線,外輪廓,該屬性不影響盒子布局
屬性值為:粗細,邊框樣式,顏色。
還有個 outline-offset 為以盒子中心為點的邊框偏移量,負值就會變成內邊框線。
可以使用修改 outline 屬性修改input獲取焦點時的外發光

column屬性

column 多列排布,
屬性值1列寬,屬性值2多少列。如果只寫屬性值1,則鋪滿盒子寬度。

背景 background

背景顏色

background-color 屬性:
屬性值可用英文,十六進制,rgb(),rgba(),HSL(),HSLA()。
padding區域是強制繼承 content 區顏色的。

背景圖片

background-image 屬性:
屬性值是路徑url方式,可插入多張,用逗號隔開。
外聯樣式表找路徑從css文件出發,內聯樣式表從html出發。

圖片比盒子小會自動重復平鋪,用 background-repeat 屬性可設置平鋪方式。
值no-repeat不平鋪;repeat-x X軸平鋪;repeat-y Y軸平鋪;repeat 默認值,x、y都平鋪。

背景尺寸

background-size屬性:
值為寬度和高度,單位可以是數值,也可以是百分比,也可以auto,例如

div{
    background-size: 100px 100% ;       //寬度100px,高度100%
}

值為cover表示將背景圖片智能改變尺寸撐滿盒子。
值為contain表示將背景圖片尺寸智能改變以容納到盒子。

{background-size: cover ;}

常用,強制一圖等比撐滿無空隙,從左上角開始計算,溢出部分隱藏。

{ background-size: contain ; }

圖片撐開,直至撐滿最短邊,空隙用重復填充,可用no-repeat。

背景裁切

background-clip屬性:

意義
border-box 延伸至邊框(默認值)
padding-box 延申到內邊距,配合border為dotted,dashed等可察覺
context-box 裁切至內容區

僅裁切,但不改變圖片起源坐標,要設置起源用 background-origin 屬性改變,值與上面一樣,也是border-box、padding-box、context-box。

背景固定

background-attachment 屬性:
要開啟小盒子滾動和窗口滾動才可察覺。不常用。

效果
fixed 不滾,窗口滾動背景也不滾
local
scroll 默認

背景圖片定位

background-position 屬性:
值可以為偏移量left、top、right、bottom 以及 center ;

實現背景居中滿鋪盒子,可用:

background-position: center center ;
background-size: cover ;

配合i、u、b標簽開啟position和background position可實現css sprite(css精靈圖)

background 復合屬性

值可以填寫顏色 圖片url 重復repeat 位置position 尺寸寬高;

背景覆蓋性
background > background-image > background-color

?從以上層級來看,漸變色不是 background-color 能用的,background能用,但不方便理解,套漸變盡量用background。

注意 從這里開始步入CSS3屬性知識

注: 像漸變等這種CSS3新特性,舊瀏覽器需要添加私有性前綴,例如:
-webkit-、-moz-、-ms-、-o-

漸變

線性漸變值:linear-gradient( ); 函數

函數值:
第一個:方向,可 to x 或者 角度 45deg 。例如:

{ background: linear-gradient( to right ); }
或者
{ background: linear-gradient( 45deg ); }

第二個:開始色,第n個:結束、過渡色。例如:

{ background: linear-gradient( to right , red , blue , yellow); }

在顏色中間可用空格隔開寫每個顏色的開始位置,例如:

{ background: linear-gradient( to right , red  , blue 30% , yellow 70% ,green ); }

徑向漸變(輻射漸變):radial-gradient( ); 函數

函數值:第一個值為徑向形狀,也可以是兩個顏色值。
尺寸:

closest-side 徑向形狀與盒子最近邊相切
farthest-side 徑向形狀與盒子最遠邊相切
closest-corner 徑向形狀與盒子最近角相切
farthest-corner 徑向形狀與盒子最遠角相切

形狀:
circle 圓 , ellipse 橢圓

高級CSS3

變形:transform 屬性

附加屬性:transform-origin 屬性:改變變形原點位置。
transform屬性只能設置一次,一次寫多個值,多寫后面的會把前面的覆蓋。

斜切變形

屬性值為 skew( ) 函數時,會進行斜切變形,參數為角度,例如:

{transform: skew( 10deg ,20deg );}

縮放變形

屬性值為 scale( ) 、scaleX( ) 、scaleY( )函數時,會進行放大縮小變形。參數為數字,大于1放大,小于1縮放。可傳入多個值,例如:

{transform: scale( .1 ,3);}

旋轉變形

屬性值為 rotate( ) 函數時。(默認z軸,也有 rotateX 和 rotateY )參數為角度,單位為deg,角度為正數時,順時針方向,負數逆時針,例如。

{transform: rotate(45deg) ;}

位移變形

屬性值為 translate( ) 函數時,進行旋轉變形,還有translateX( ),和translateY( ) ,參數為位移距離,與relative相似,transform-origin改變不了,位移變形同樣可以應用與盒子垂直居中。

3D變形

rotateX 和 rotateY 函數。

3D旋轉后可進行3D空間移動。例如:

{
    transform: rotateX(50) translateX(100px) translateY(100px) ;
}

transform-style 屬性

父元素進行3D轉換時,子元素是否保留已經進行的3D轉換。

說明
preserve-3d 開啟保留
flat 默認值,不開啟

perspective屬性

用來給父盒子定義透視強度,值為距離舞臺的距離。

CSS3 動態

過渡 transition屬性

當樣式發生改變的時候,自動添加補幀動畫。
必要值:實現過渡的屬性和過渡持續時間,例如:

{transition: width 2s ; }

可以定義多個過渡,用逗號隔開。

四要素(四個小屬性)

屬性名 說明
transition-property 哪些屬性要過渡
transition-duration 過渡持續時間
transition-timing-function 過渡速率曲線
transition-delay 開始延遲時間

transition-property

屬性值可寫all,即所有屬性都參與過度

transition-timing-fuction屬性

過渡動畫速率(緩動參數)

常見值 意義
linear 勻速
ease 緩動
ease-in 緩進
ease-out 緩出
ease-in-out 緩進出
cubic-bezier( ) 貝塞爾曲線函數

動畫 animation

定義關鍵幀與時長后自動播放的動畫,必要值:動畫名和動畫時間,例如:

{animation: anima 10s ; }

六要素(六個小屬性)

屬性名 意義
animation-name 動畫的名字
animation-duration 動畫時長
animation-timing-function 動畫速率曲線
animation-delay 動畫播放延遲
animation-iteration-count 動畫循環次數
animation-direction 第2n次播放是否倒放
animation-fill-mode 當動畫結束后元素保持什么狀態

animation-name:

如何定義動畫以及給動畫命名,格式:

@keyframes 動畫名字{
    開始狀態{ }
    過渡狀態{ }
    結束狀態{ }
}

也可以直接定義2幀(開始幀和結束幀),例如:

@keyframes animaName{
    from{ }
    to{ }
}
或者
@keyframes animaName{
    0%{ }
    100%{ }
}

也可以定義多幀動畫,用百分數定義不同階段的關鍵幀,例如:

@keyframes animaName{
    0%{ }
    10%{ }
    35%{ }
    90%{ }
    100%{ }
}

animation-fill-mode

當值為none時
none為默認值,在動畫執行前和動畫執行后,對元素的樣式不會產生影響。
從上圖可以看到,值為none時,動畫執行前和執行后的狀態和無動畫的狀態是一致的,動畫執行前和執行后對元素沒有產生任何樣式影響。動畫執行后跳到無動畫狀態。

當值為forwards時
forwards當使用這個值時,告訴瀏覽器:動畫結束后,元素的樣式將設置為動畫的最后一幀的樣式。
從上圖可以看出,值為forwards時,動畫執行前的狀態和無動畫狀態一致,但是動畫執行后狀態卻不一樣,查看動畫效果,你會發現他的狀態和動畫最后一幀的狀態相同。

當值為backwards時
從CSS樣式可以看到,動畫我們有設置延遲1s,為了便于觀察動畫執行前的狀態。
backwards當使用這個值時,告訴瀏覽器:動畫開始前,元素的樣式將設置為動畫的第一幀的樣式。
從上圖可以看出,值為backwards時,動畫執行前的狀態和無動畫狀態 不一致,可以看出,它的狀態和動畫第一幀相同,但是動畫執行后狀態卻和無動畫時的狀態相同。

當值為both時
both當使用這個值時,告訴瀏覽器:同時使用forwards和backwards兩個屬性值的效果。
從上圖可以看出,動畫執行前是動畫第一幀的效果,動畫執行后是動畫最后一幀的效果。

濾鏡屬性

  • filter屬性可以接濾鏡函數
  • filter: blur(); 模糊,參數為像素單位的數值,數值越大越模糊
  • 還有 contrast,grayscale,hue-rotatr,drop-shadow

calc() 函數

calc() 函數可以再聲明屬性值時執行一些計算,函數執行后返回計算后的值。,例如

width: calc(100%-77px);

可以進行加減乘除運算,且運算符號的兩邊必須加上空格

媒體查詢 media query

@media screen and (min-width:1200px){}
//中括號里面的內容只對1200寬以上的窗口起作用

為什么需要媒體查詢

一套樣式不可能適應各種大小的屏幕,媒體查詢可設定條件使得內容只在滿足條件的情況下呈現內容。

常見媒體類型

名稱 意義
all 默認值,所有媒體類型
screen 屏幕
print 打印頁面
speech 朗讀器

如果使用默認值,可以同時省略 all 和 and ,必須同時,例如:

@media {}

媒體查詢中的邏輯

呈現方式 意義
and
,
not
only

and 串聯,not 取反,,或拆成并聯,例如:

@media all and (min-width:900px) and (max-width:1920px){}
@media screen and (min-width:500px) , speech and (min-width:1000px){}

媒體屬性

  • 例如:min-width / max-width / width orientation:landscape/portrait
  • 多數情況下使用帶有 “min-”和“max-”前綴的,用于表達最小是多少最大是多少,避免了css的 < 和 > 符號沖突。
  • 策略:從小大大用min,從大到小用max

移動端其他知識

nomrmalize.css

更好用的重置css默認樣式方法,官網地址:
http://necolas.github.io/normalize.css/

點擊一些標簽高亮背景取消

-webkit-tap-highlight-color: transparent;

給按鈕和輸入框自定義樣式

需要關掉apppearance。
-webkit-appearance: none;

禁用長安頁面時的彈出菜單

img,a { -webkit-touch-callout: none; }

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容