前端_CSS

HackerShell 發(fā)布于2019-08-30 15:55 / 3176人閱讀

摘要：層疊樣式表控制網(wǎng)頁(yè)的樣式選擇器區(qū)分大小寫(xiě)通過(guò)選擇器來(lái)定位文檔對(duì)象模型的元素將各種樣式規(guī)則應(yīng)用在元素上改變?cè)卦陧?yè)面上的顯示方式使用方式內(nèi)聯(lián)樣式內(nèi)部樣式外部樣式盒模型標(biāo)準(zhǔn)盒模型盒模型空間內(nèi)邊距外邊距邊框塊級(jí)元素行內(nèi)元素塊級(jí)元素默認(rèn)寬度是塊級(jí)元

CSS

CSS(Cascading Style Sheet): 層疊樣式表,控制網(wǎng)頁(yè)的樣式.選擇器區(qū)分大小寫(xiě).

通過(guò)選擇器來(lái)定位DOM(文檔對(duì)象模型)的元素,將各種樣式規(guī)則應(yīng)用在元素上,改變?cè)卦陧?yè)面上的顯示方式

使用方式: 內(nèi)聯(lián)樣式 + 內(nèi)部樣式 + 外部樣式

盒模型

標(biāo)準(zhǔn)盒模型 = content +border + padding +margin

IE盒模型 = content(content + border + padding) + margin

空間 = padding(內(nèi)邊距) + margin (外邊距) + border (邊框)

塊級(jí)元素/行內(nèi)元素

塊級(jí)元素: 默認(rèn)寬度是100%,塊級(jí)元素會(huì)自動(dòng)從新的一行開(kāi)始.div table h1-h6 p form ol section canvas audio video

行內(nèi)元素: 和其他元素在同一行,寬度/高度時(shí)內(nèi)容的寬度和高度,內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變 a span b img input select strong

BFC(塊級(jí)格式化上下文)

塊級(jí)格式化上下文,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于BFC內(nèi)部的區(qū)域與外部的元素相互隔離,使內(nèi)外元素的定位不會(huì)影響.在IE下為layout,可通過(guò)zoom:1;觸發(fā).

計(jì)算BFC容器的高度時(shí),浮動(dòng)元素也會(huì)參與計(jì)算.容器內(nèi)的Box會(huì)在垂直方向上一個(gè)接著一個(gè)放置.兩個(gè)相鄰的box的margin會(huì)發(fā)生重疊.

觸發(fā)BFC: float: none; position: absolute; position: fixed; display: inline-block/table-cell/inline-flex/felx; overflow: visable;

層疊上下文
在三維空間.z軸高出普通元素.

觸發(fā)條件: html ,position, flex, transform opacity filter will-change

層疊等級(jí):在同一層疊上下文中,層疊等級(jí)才有意義. background-color < z-index: -1; < 塊級(jí)元素 < 浮動(dòng)元素 < 行內(nèi)元素 < z-index: 0 /auto; < z-index: 1;

顏色與單位

十六進(jìn)制: hex使用6個(gè)十六進(jìn)制編碼來(lái)表示顏色,2個(gè)一組,分表表示紅(R),黃(G),藍(lán)(B).

hsl色彩: hsl(60,100%,50%)

RGB顏色

px em rem %

布局

文本對(duì)齊方式: text-align: left/right/center/justify;

盒陰影: box-shadow: offset-x offset-y blur-raduis spread-radius;

透明度: opacity: 0.7;

字母的大小寫(xiě): text-transform: lowercase / uppercase / capitalize / initial /inherit / noen;

方向: top left right bottom;

定位: position: relative(元素的定位參照于最近的已定位祖先的元素) absolute fixed ;

      相對(duì)定位不會(huì)受到top/left/right/bottom影響.

堆疊順序: z-index: 10;

顯示: display: table/inline-table/tbale-row-group/table-cell;

變換 transform: scale(2) skewX;

輪廓 outline-width: thin /medium / thick / length /inherit;

圓角 border-radius: 25px;

字體

  color: orange;
  font-family: "Verdana";
  font-size: 16px;
  font-style: normal italic oblique;
  font-weight: 400;
  text-transform: none/lowsercase/uppercase/capitalize;
  text-decoration: none underline overline line-through;
  text-align: left right center;
  line-height: 20px ;

列表

list-style-type:none disc circle square decimal lower-alpha upper-alpha

背景

background-color: green; background-position:left center;
background-size: 120px;   background-repeat: no-repeat;
background-iamge:url("");

動(dòng)畫(huà)

列表項(xiàng)目

選擇器
偽類(lèi)選擇器:link :hover :active :visited
基礎(chǔ)選擇器: 標(biāo)簽選擇器,類(lèi)選擇器,ID選擇器,通配符選擇器
組合選擇器: 標(biāo)簽指定式選擇器后代選擇器并集選擇器
屬性選擇器:
通配符: *

預(yù)編譯語(yǔ)言

CSS的預(yù)編譯語(yǔ)言:基于CSS語(yǔ)言的語(yǔ)法擴(kuò)展,支持嵌套的書(shū)寫(xiě),擁有繼承機(jī)制,

SaSS

SaaS是對(duì)CSS的擴(kuò)展,允許使用變量,嵌套規(guī)則,混合,導(dǎo)入等功能且完全兼容CSS語(yǔ)法.

變量: $basiccolor: green;

嵌套: ul{padding:0; li {margin:0;}}

導(dǎo)入: @import url("s")

注意SASS中l(wèi)ist列表的索引從i開(kāi)始.

混合代碼在選擇器前面加上@mixin classname {} 引用時(shí)div { @include classname;}

Flex布局

Flex布局父元素

 display: felx | inline-felx;
 flex-direction: row | row-reverse | column | column-reverse; 決定主軸的方向
 felx-wrap: nowrap | wrap | wrap-reverse;  主軸如何換行
 felx-flow: row nowrap;
 justify-content: flex-start | flex-end | center | space-between | space-around;
 align-items: flex-start | felx-end | center | baseline | stretch;
 align=content: felx-start | felx-end | center | space=between | cpace-around | stretch; 多跟軸線的對(duì)齊方式,只有一條時(shí)不起作用.

Flex布局子元素

order: 0;項(xiàng)目的排列順序,數(shù)值越小,排序越靠前,最小為0.
flex-grow:0;項(xiàng)目的放大比例.
flex-shrink:1;
flex-basis: 350px;
flex: 0 1 auto;
align-self: auto | felx-start | flex-end | center | baseline | stretch;

圖片

圖片的類(lèi)型分為位圖和矢量圖,位圖最小單位是像素,每個(gè)像素都有自己的顏色信息,jpg,png,webp等都是位圖.矢量圖也叫向量圖,記錄元素的形狀以及顏色的算法.常見(jiàn)格式sbg,png格式,根據(jù)壓縮分類(lèi)(無(wú)壓縮/無(wú)損壓縮/有損壓縮),區(qū)別在于有損壓縮處理圖像,是去除某些像素的數(shù)據(jù),無(wú)法找回原圖,使用無(wú)損處理圖像,是對(duì)像素?cái)?shù)據(jù)進(jìn)行壓縮,可以找回原圖.
GIf是一種無(wú)損壓縮,只是對(duì)數(shù)據(jù)進(jìn)行壓縮,基于LZW算法,壓縮率在50%,
JPG/JPEG格式,典型的有損壓縮圖像的格式,兩種的保存方式,BaseLine JPEG的儲(chǔ)存方式是按從上到下的掃描方式,把每一行順序的保存在JPEG文件中.Progressive JPEG格式是從模糊漸進(jìn)到清晰.
PNG-8是PNG的索引色版本,是無(wú)損的,使用索引色的,點(diǎn)陣圖,更小的體積,透明度的調(diào)節(jié).PNG-24是PNG的直接色版本,是無(wú)損的,直接色的,點(diǎn)陣圖的,最佳效果,不在意圖片大小時(shí)使用.PNG-32比PNG-24多一個(gè)APlha通道,用來(lái)支持半透明.
Webp是同時(shí)支持有損和無(wú)損壓縮,使用直接色,點(diǎn)陣圖.
SVG是矢量圖,使用XML定義的語(yǔ)言,用來(lái)描述二維矢量以及柵格圖形.