前端_CSS

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

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

CSS

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

通過選擇器來定位DOM(文檔對象模型)的元素,將各種樣式規(guī)則應(yīng)用在元素上,改變元素在頁面上的顯示方式

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

盒模型

標準盒模型 = content +border + padding +margin

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

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

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

塊級元素: 默認寬度是100%,塊級元素會自動從新的一行開始.div table h1-h6 p form ol section canvas audio video

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

BFC(塊級格式化上下文)

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

計算BFC容器的高度時,浮動元素也會參與計算.容器內(nèi)的Box會在垂直方向上一個接著一個放置.兩個相鄰的box的margin會發(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

層疊等級:在同一層疊上下文中,層疊等級才有意義. background-color < z-index: -1; < 塊級元素 < 浮動元素 < 行內(nèi)元素 < 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
基礎(chǔ)選擇器: 標簽選擇器,類選擇器,ID選擇器,通配符選擇器
組合選擇器: 標簽指定式選擇器后代選擇器并集選擇器
屬性選擇器:
通配符: *

預(yù)編譯語言

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

SaSS

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

變量: $basiccolor: green;

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

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

注意SASS中l(wèi)ist列表的索引從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;項目的排列順序,數(shù)值越小,排序越靠前,最小為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格式,根據(jù)壓縮分類(無壓縮/無損壓縮/有損壓縮),區(qū)別在于有損壓縮處理圖像,是去除某些像素的數(shù)據(jù),無法找回原圖,使用無損處理圖像,是對像素數(shù)據(jù)進行壓縮,可以找回原圖.
GIf是一種無損壓縮,只是對數(shù)據(jù)進行壓縮,基于LZW算法,壓縮率在50%,
JPG/JPEG格式,典型的有損壓縮圖像的格式,兩種的保存方式,BaseLine JPEG的儲存方式是按從上到下的掃描方式,把每一行順序的保存在JPEG文件中.Progressive JPEG格式是從模糊漸進到清晰.
PNG-8是PNG的索引色版本,是無損的,使用索引色的,點陣圖,更小的體積,透明度的調(diào)節(jié).PNG-24是PNG的直接色版本,是無損的,直接色的,點陣圖的,最佳效果,不在意圖片大小時使用.PNG-32比PNG-24多一個APlha通道,用來支持半透明.
Webp是同時支持有損和無損壓縮,使用直接色,點陣圖.
SVG是矢量圖,使用XML定義的語言,用來描述二維矢量以及柵格圖形.

GPU云服務(wù)器云服務(wù)器前端css css前端前端css框架浮動-前端-css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117348.html

發(fā)表評論

登陸后可評論

0條評論

HackerShell

男|高級講師

我要關(guān)注我要私信

TA的文章

??C++布爾值??

閱讀 1225·2021-09-26 09:55
前端_CSS

閱讀 3191·2019-08-30 15:55
cssfloat布局以及其他小技巧

閱讀 965·2019-08-30 15:53
CSS文本省略顯示

閱讀 2295·2019-08-30 13:59
一些面試時關(guān)于 CSS 的問題

閱讀 2379·2019-08-29 13:08
Vue入門——Vue的核心

閱讀 1106·2019-08-29 12:19
深度解析之異步加載和預(yù)加載

閱讀 3302·2019-08-26 13:41
小程序云開發(fā)之新聞類項目分析

閱讀 417·2019-08-26 13:24

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端_CSS

相關(guān)文章

前端構(gòu)建_webpack

2017-09-03 前端日報

**前端、HTML+CSS+JS編寫規(guī)范（終極版）**

**前端、HTML+CSS+JS編寫規(guī)范（終極版）**

**前端、HTML+CSS+JS編寫規(guī)范（終極版）**

前端進階之路: 前端架構(gòu)設(shè)計(1)-代碼核心

發(fā)表評論

0條評論

HackerShell

男|高級講師

TA的文章

??C++布爾值??

前端_CSS

cssfloat布局以及其他小技巧

CSS文本省略顯示

一些面試時關(guān)于 CSS 的問題

Vue入門——Vue的核心

深度解析之異步加載和預(yù)加載

小程序云開發(fā)之新聞類項目分析

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端_CSS

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！