簡介
CSS (cascading style sheet)層疊樣式表
CSS書寫方式
- 內嵌式:在head標簽中書寫style標簽。
- 外鏈式:用link標簽引入.ccs文件
<link rel="stylesheet" type="text/css" href=""/>
- 行內式:直接寫在標簽的style屬性上。
- 導入式:在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; 開啟右浮動,元素序號從右邊開始數。
使用浮動實現網頁布局注意事項:
- 需要垂直排列的盒子,不要設置浮動,只有需要并排顯示的盒子才要設置浮動。
- 一個浮動盒子的內部盒子還可以繼續浮動。
- 要實現復雜浮動就不要節約盒子。
定位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; 分別代表左右兩邊都不受,左邊不受影響、右邊不受影響。
清除浮動方法:
- 給后面的父盒子設置 clear:both;
- 在兩個盒子之間添加一個帶 clear:both; 的盒子
- 使用::after偽元素給盒子添加最后一個子元素,并添加 clear:both;
- 在浮動元素外套一個父盒子,并且父盒子形成BFC。
BFC
box formatting context ,塊級格式化上下文。
開啟后此盒子會變成頁面上一個獨立容器,容器里面的子元素不會影響外面的元素。里面的子元素也不會影響父元素及父元素以外的元素。
比如里面的子元素不能跑出父元素外面。比如解決margin塌陷(僅限父子塌陷)。比如父盒子不會受到子元素浮動造成的父盒子高度塌陷。比如開啟BFC可以阻止被其他浮動元素覆蓋。
如何開啟(形成、創建)BFC
- 脫離文檔流:開啟浮動,float值不是none。或者開啟position:absolute。
- display值設為inline-block、flex或者inline-flex或flow-root。
- 元素設置 overflow:hidden; (overflow:hidden 表示溢出盒子邊框部分隱藏,padding溢出部分還在)
- 添加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);
屬性值是:
- 軌道大小track-size:可以使用css長度,百分比,fr單位數值,auto,repeat() 函數等。
- 網格線名字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區域的垂直方向對齊方式。
屬性值:
- stretch:默認值,內容寬度占滿整個網格區域空間。
- start:上端對齊。
- center:居中對齊。
- end:下端對齊。
justify-items 屬性
設定 grid項與每個 grid區域的水平方向對齊方式。
屬性值:
- stretch:默認值,內容寬度占滿整個網格區域空間。
- start:左端對齊。
- center:居中對齊。
- 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函數
- repeat(); 函數值1為重復的次數,函數值2為要重復的內容,例如
grid-template-row:repeat(7,1fr)
函數值1可以為整數,也可以是 auto-fill,auto-fit。auto-fill,auto-fit需配合minmax() 使用。
設定項與容器的大小可以自動計算 auto-fill 與 auto-fit 的值,兩個差別是前者以項為準,后者以容器為準。 - fit-content(); 將給定大小夾緊為可用大小。
- 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容器內的位置。
屬性值可以是:
- 網格線自有的數字編號。
- 網格線的名字。
- span+數字,意為跨越多少格,通常用start定義開始位置,然后end用span+數字定義跨越多少格。例如
grid-row-start:1; grid-row-end:span 3;
- span+線名,意為跨越到名字相匹配的線上。
- auto
如果 start 和 end 超出設定的 grid-template-rows/colums ,則會創建隱式網格軌道。
網格項是可以重疊的,可以通過 z-index 控制堆疊順序。
grid-area 屬性
- 使用網格區域名字劃定 grid 項所在的位置,用法
grid-area: 區域名字;
這個區域名字不用加引號 - 或者使用四個方向的線段來劃定:
grid-area: 上邊開始/左邊開始/下邊結束/右邊結束;
align-self 屬性
設定 grid項 內的內容垂直方向的對齊方式。
屬性值:
- stretch:默認值,內容寬度占滿整個網格區域空間。
- start:上端對齊。
- center:居中對齊。
- end:下端對齊。
justify-self 屬性
- stretch:默認值,內容寬度占滿整個網格區域空間。
- start:左端對齊。
- center:居中對齊。
- end:右端對齊。
place-self 屬性
align-self 與 justify-self 的復合簡寫屬性,可以分別寫兩個值。
如果只寫一個值則水平方向和垂直方向都一樣。
例如 place-self:center;
即可實現垂直水平都居中。
grid 通常用法
先定模板,再把項放進模板。例如:
- 先定 grid-template-areas,定好模板名字。
- 然后 grid-template-rows/columns 定好模板軌道寬高。
- 再把 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 | 屏幕 |
打印頁面 | |
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; }