前端_CSS

CSS

CSS(Cascading Style Sheet): 層疊樣式表,控制網頁的樣式.選擇器區分大小寫.

• 經過選擇器來定位DOM(文檔對象模型)的元素,將各類樣式規則應用在元素上,改變元素在頁面上的顯示方式
• 使用方式: 內聯樣式 + 內部樣式 + 外部樣式

盒模型

• 標準盒模型 = content +border + padding +margin
• IE盒模型 = content(content + border + padding) + margin
• 空間 = padding(內邊距) + margin (外邊距) + border (邊框)

塊級元素/行內元素

• 塊級元素: 默認寬度是100%,塊級元素會自動重新的一行開始.div table h1-h6 p form ol section canvas audio video
• 行內元素: 和其餘元素在同一行,寬度/高度時內容的寬度和高度,內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變 a span b img input select strong

BFC(塊級格式化上下文)

• 塊級格式化上下文,是一個獨立的渲染區域,讓處於BFC內部的區域與外部的元素相互隔離,使內外元素的定位不會影響.在IE下爲layout,可經過zoom:1;觸發.
• 計算BFC容器的高度時,浮動元素也會參與計算.容器內的Box會在垂直方向上一個接着一個放置.兩個相鄰的box的margin會發生重疊.
• 觸發BFC: float: none; position: absolute; position: fixed; display: inline-block/table-cell/inline-flex/felx; overflow: visable;

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

• 觸發條件: html ,position, flex, transform opacity filter will-change
• 層疊等級:在同一層疊上下文中,層疊等級纔有意義. background-color < z-index: -1; < 塊級元素 < 浮動元素 < 行內元素 < z-index: 0 /auto; < z-index: 1;

顏色與單位

• 十六進制: hex使用6個十六進制編碼來表示顏色,2個一組,分表表示紅(R),黃(G),藍(B).
• hsl色彩: hsl(60,100%,50%)
• RGB顏色
• px em rem %

佈局

• 文本對齊方式: text-align: left/right/center/justify;
• 盒陰影: box-shadow: offset-x offset-y blur-raduis spread-radius;
• 透明度: opacity: 0.7;
• 字母的大小寫: text-transform: lowercase / uppercase / capitalize / initial /inherit / noen;
• 方向: top left right bottom;

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

  相對定位不會受到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('');

動畫

• 列表項目

選擇器
僞類選擇器:link :hover :active :visited
基礎選擇器: 標籤選擇器,類選擇器,ID選擇器,通配符選擇器
組合選擇器: 標籤指定式選擇器 後代選擇器 並集選擇器
屬性選擇器:
通配符: *

預編譯語言

CSS的預編譯語言:基於CSS語言的語法擴展,支持嵌套的書寫,擁有繼承機制,

SaSS

SaaS是對CSS的擴展,容許使用變量,嵌套規則,混合,導入等功能且徹底兼容CSS語法.

• 變量: $basiccolor: green;
• 嵌套: ul{padding:0; li {margin:0;}}
• 導入: @import url('s')
• 注意SASS中list列表的索引從i開始.
• 混合代碼在選擇器前面加上@mixin classname {} 引用時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; 多跟軸線的對齊方式,只有一條時不起做用.

Flex佈局子元素

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

圖片

圖片的類型分爲位圖和矢量圖,位圖最小單位是像素,每一個像素都有本身的顏色信息,jpg,png,webp等都是位圖.矢量圖也叫向量圖,記錄元素的形狀以及顏色的算法.常見格式sbg,png格式,根據壓縮分類(無壓縮/無損壓縮/有損壓縮),區別在於有損壓縮處理圖像,是去除某些像素的數據,沒法找回原圖,使用無損處理圖像,是對像素數據進行壓縮,能夠找回原圖. GIf是一種無損壓縮,只是對數據進行壓縮,基於LZW算法,壓縮率在50%, JPG/JPEG格式,典型的有損壓縮圖像的格式,兩種的保存方式,BaseLine JPEG的儲存方式是按從上到下的掃描方式,把每一行順序的保存在JPEG文件中.Progressive JPEG格式是從模糊漸進到清晰. PNG-8是PNG的索引色版本,是無損的,使用索引色的,點陣圖,更小的體積,透明度的調節.PNG-24是PNG的直接色版本,是無損的,直接色的,點陣圖的,最佳效果,不在乎圖片大小時使用.PNG-32比PNG-24多一個APlha通道,用來支持半透明. Webp是同時支持有損和無損壓縮,使用直接色,點陣圖. SVG是矢量圖,使用XML定義的語言,用來描述二維矢量以及柵格圖形.