HTMl(超文本標記語言)
HTML 概述
超文本標記語言用來描述和定義網頁的
內容
HTML(超文本標記語言——HyperText Markup Language)是構成 Web 世界的一磚一瓦;它定義了網頁內容的含義和結構
“超文本”(hypertext)是指連接單個網站內或多個網站間的網頁的鏈接
1. HTML標簽功能區分
<!DOCTYPE html>
<!-- * 語言設置 -->
<html lang="en"><head><!-- ** 元信息 --><!-- * 字符集設置 --><meta charset="UTF-8" /><!-- * IE 兼容 --><!--? http-equiv="X-UA-Compatible" IE 特有屬性? content="IE=edge" 規定 IE 使用最新版本的標準模式渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- * referrer 設置 --><meta name="referrer" content="no-referrer" /><!-- * 移動端兼容 --><!-- ? name="viewport" 移動端設置? width=device-width 可視區域的寬度為設備寬度? height=device-height 可視區域的高度為設備高度? initial-scale=1.0 頁面首次被顯示時可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放? maximum-scale=1.0, minimum-scale=1.0 可視區域的縮放級別? user-scalable 是否可對頁面進行縮放,no 禁止縮放--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- * 標題 --><title>功能區分</title><!-- * 介紹 --><meta name="description" content="網頁介紹" /><!-- * 關鍵字 --><meta name="keywords" content="網頁關鍵字" /><!-- * 鏈接默認地址、默認打開方式 --><!-- ? 1. href：url；? 2. target：在何處打開鏈接； ? _blank：新窗口；_parent：上一級窗口；_self：當前窗口(默認)；_top：在瀏覽器的整個窗口打開鏈接,忽略任何框架--><base href="" target="_blank" /><!-- * 引入首頁樣式 --><link rel="stylesheet" href="./css/index.css" /><!-- * 引入首頁腳本 --><script src="index.js" async></script></head><body><!-- ** 語義化標簽 --><h1-h6>一 ~ 六級標題</h1-h6><p>段落</p><div>塊</div><span>行內塊</span><!-- ** HTML5 新增HTML語義化標簽 --><header>頭部</header><nav>導航</nav><main>主體</main><article>章</article><section>節</section><aside>側邊欄</aside><footer>底部</footer><!-- ** 超鏈接 --><a href="http://www.baidu.com" target="_blank"></a><!-- ** 圖像 --><img src="./image/logo.png" alt="圖像替換文本" /><!-- * 列表 --><!-- * 有序列表 --><ul><li>列表項</li></ul><!-- * 無序列表 --><ol><li>列表項</li></ol><!-- * 定義列表 --><dl><dt>列表項目</dt><dd>列表項目描述</dd></dl><!-- ** 表格 --><!-- ? border：邊框? cellpadding：單元格間距? cellspacing：單元格內邊距 --><table border="1" cellpadding="0" cellspacing="0"><!-- * 表格頭部 --><thead><tr><th>表頭</th></tr></thead><!-- * 表格腳注 --><tfoot></tfoot><!-- * 表格主體 --><tbody><tr><td>單元格</td></tr></tbody></table><!-- ** 表單 --><!-- ? action：提交地址；? method：提交方式 --><form action="http://www.baidu.com" method="post"><!-- ? value="初始值"? placeholder="提示文本"? checked="加載時是否選中(true、false)"? disabled 加載時輸入字段禁用? readonly 加載時輸入字段只讀? autofocus 加載時自動獲取焦點--><!-- * input 輸入框 --><input type="text" /><!-- 輸入框 --><input type="password" name="name" id="id" /><!-- 密碼框 --><input type="button" value="value" /><!-- 按鈕(不觸發提交) --><input type="checkbox" name="name" id="id" /><!-- 復選框 --><input type="radio" name="name" id="id" /><!-- 單選框 --><label for="name">元素標注</label><!-- 元素標注 --><input type="file" name="name" id="id" /><!-- 文件提交 --><input type="image" src="src" alt="alt" /><!-- 圖像形式文件提交 --><input type="reset" value="value" /><!-- 表單重置 --><input type="submit" value="value" /><!-- 表單提交 --><!-- * input HTML5新增屬性 --><input type="search" name="name" id="id" /><!-- 搜索框 --><input type="color" name="name" id="id" /><!-- 顏色選擇器 --><input type="range" name="name" id="id" /><!-- 滑動選擇框 --><input type="date" name="name" id="id" /><!-- 日期選擇框 --><input type="time" name="name" id="id" /><!-- 時間選擇框 --><input type="datetime-local" name="name" id="id" /><!-- 日期,時間選擇框 --><input type="url" name="name" id="id" /><!-- url輸入框:提交驗證 --><input type="email" name="name" id="id" /><!-- email輸入框:提交驗證 --><input type="number" name="name" id="id" /><!-- 數字輸入框:提交驗證 --><input type="tel" name="name" id="id" /><!-- 手機號碼輸入框:提交驗證 --><!-- * button 按鈕(觸發提交操作) --><button></button><!-- * textarea 文本域 --><textarea name="name" id="id" cols="30" rows="10"></textarea><!-- * select 下拉框 --><select name="name" id="id"></select><!-- 下拉框選項 --><option value="value"></option></form><!-- ** 腳本 --><script src="./js/vue.js"></script><!-- ** 樣式 --><style></style><!-- ** 音、視頻 --><!-- ? src：url地址? autoplay：是否自動播放? loop：重復播放? muted：是否靜音? controls: 顯示控件--><audio src="url" autoplay loop muted controls></audio><video src="url" autoplay loop muted controls></video><!-- ** 圖形 --><canvas></canvas><!-- ** 格式化標簽(不推薦) --><i>斜體</i><em>強調文本</em><b>粗體</b><strong>強調文本</strong><u>下劃線</u><ins>插入</ins><s>刪除線</s><del>刪除文本</del><sup>上標</sup><sub>下標</sub></body>
</html>
2. HTML標簽顯示區分
塊元素
- 可設置“width”和“height”
- 默認情況下,元素的寬度會占滿整行,這就意味著塊級元素的寬度會受到父級元素的寬度影響,而且不管元素是否占滿整行,它的兄弟元素都會另起一行
<div></div>
<h1-h6></h1-h6>
<p></p>
<ol></ol>
<ul></ul>
<dl></dl>
<table></table>
<form action=""></form>
內聯元素(行內元素)
- 不能設置“width”和“height”
- 默認情況下,元素的默認寬度為content的寬度,高度由font-size決定,內聯元素在未填滿父級元素的時候會水平排列,一般只會用來承載內容
- 行內元素在水平方向上的padding、border、margin的特性和塊元素一模一樣
- 行內元素在垂直方向上的
padding和border可以設置,但是不參與布局,margin不能設置除了a元素,行內元素不能包含塊元素行內元素脫離文檔流后,會變成塊元素
<a href=""></a>
<span></span>
<label for=""></label>
<code></code>
<!-- 格式化標簽 -->
<i>斜體</i>
<em>強調文本</em>
<b>粗體</b>
<strong>強調文本</strong>
<u>下劃線</u>
<ins>插入</ins>
<s>刪除線</s>
<del>刪除文本</del>
<sup>上標</sup>
<sub>下標</sub>
行內塊元素
- 可設置“width”和“height”
- 相對與內聯元素的優點是可以設置寬高,缺點是塊級內聯元素之間會出現間隙,
解決辦法是設置父級元素 font-size：0
<img src="" alt="">
<input type="text">
<select name="" id=""></select>
<button></button>
<textarea name="" id="" cols="30" rows="10"></textarea>
3. HTML語義化
HTML5的語義化指的是
合理正確的使用語義化的標簽來創建頁面結構,暨正確的標簽做正確的事
語義化的優點
- 在沒CSS樣式的情況下
頁面整體也會呈現很好的結構效果 代碼結構清晰易于閱讀利于開發和維護方便其他設備解析(如屏幕閱讀器)根據語義渲染網頁有利于搜索引擎優化(SEO)搜索引擎爬蟲會根據不同的標簽來賦予不同的權重
CSS(層疊樣式表)
CSS 概述
層疊樣式表用來描述 Web 內容的
外觀
層疊樣式表(Cascading Style Sheets,縮寫為 CSS),是一種 樣式表 語言,用來描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之類的 XML 分支語言)文檔的呈現;
CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題
CSS 是開放網絡的核心語言之一,由 W3C 規范 實現跨瀏覽器的標準化
1. 盒模型
當對一個文檔進行布局(layout)的時候,瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型 (CSS basic box model),將所有元素表示為一個個矩形的盒子(box) ,這個盒子,就是盒模型
一個盒子由四個部分組成: content + padding + border + margin
標準盒模型
瀏覽器默認的盒子模型,內容只為內容
- 盒子總寬度(width) = (contentWidth ) + padding + border + margin
- 盒子總高度(height) = (contentHeight ) + padding + border + margin
box-sizing: content-box
怪異盒模型
內容為 內容 + padding + border
- 盒子總寬度(width) = Width(contentWidth + padding + border) + margin
- 盒子總高度(height) = Height(contentHeight + padding + border) + margin
box-sizing: border-box
2. 格式化上下文
css2.1 提出的概念,定義的是頁面中的一塊渲染區域,或者這么理解,就是頁面中的一塊獨立的作用域,同一個格式化上下文的區域和不同格式化上下文之間的定位方式都會發生變化
BFC(塊級格式化上下文)
- BFC形成
- 根元素
- 脫離普通文檔流的元素(浮動,固定定位,絕對定位等)
- 非塊級元素(display設置了inline-block,table,flex)
- overflow屬性值不為visible的塊級元素
- BFC影響
- BFC是頁面上的獨立作用域,內部元素不會和外部元素產生影響
- 同一個BFC內的相鄰元素會發生垂直邊距的折疊,即兩者的邊距取決于雙方邊距的最大值而不是總和
- 計算BFC時,內部浮動元素也會被計算在內
- BFC應用場景
- 防止margin重疊(塌陷)
- 清除內部浮動
IFC(內聯格式化上下文)
- IFC形成
- 多個內聯元素排列在一起的時候就形成一個IFC,這些內聯元素直接不能穿插塊級元素
- IFC影響
- 一個IFC內的元素都是水平排列的
- 橫向的margin、border、padding屬性對這些元素都有效
- 垂直方向可以調整對齊方式
3. 三大特性
層疊性
- (權重相同)樣式作用到標簽上,發生了樣式沖突,后邊的樣式會把前邊的樣式給覆蓋掉(層疊掉)
- 就近原則
- 復合屬性不寫的值,取默認值
繼承性
- 子元素和父元素樣式沒有沖突的時候,子元素會繼承父元素的某些樣式
- 字體屬性(font)
- 文本屬性(text)
- 元素可見性(visibilit)
- 表格布局屬性
- 列表屬性(list)
- 光標屬性(cursor)
- a 標簽的字體顏色不能被繼承
- h1-h6標簽字體的大小也是不能被繼承的
優先級
∞!important
1,0,0,0行內樣式(style)
0,1,0,0ID選擇器(#id)
0,0,1,0類選擇器(.class)偽類選擇器(:hover)屬性選擇器([type="radio"])
0,0,0,1元素選擇器(div)偽元素選擇器(::before)
0,0,0,0通配符選擇器(*)繼承瀏覽器自帶
其他選擇器(對權重的計算沒影響,即不參與計算)選擇連接符：+,>,-, ,||
- 多個(樣式作用到同一個(類.標簽),發生了樣式沖突,
權重高的先執行 - !important > 行內式 > id > class > element > * > 瀏覽器自帶 > 繼承
- 不同的選擇器作用到同一個類(標簽),權重會疊加(相加);
權重可以疊加但不可以進位 - 當子元素和父元素樣式發生沖突的時候,權重相同的情況下,永遠會執行子元素自身的樣式
4. CSS 屬性書寫(順序)
善用繼承
inherit書寫樣式
內容顯示
display { // 元素顯示模式display: block; // 塊級display: inline; // 內聯display: inline-block; // 行內塊display: flex; // 彈性盒子display: grid; // 網格布局display: none; // 不顯示(占據空間消失,引起回流/重排和重繪)
}visibility { // 元素是否可見visibility: visible; // 元素可見(默認)visibility: hidden; // 元素不可見(占位置,引起重繪)visibility: collapse; // 表格元素中使用時,此值可刪除一行或一列
}overflow { // 元素溢出overflow: visible; // 內容不會被修剪(默認)overflow: hidden; // 內容會被修剪,并且其余內容是不可見的overflow: scroll; // 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容overflow: auto; // 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容
}opacity { // 元素的不透明級別(支持過度)opacity: 1; // 不透明opacity: 0; // 透明
}vertical-align { // 元素垂直對齊方式vertical-align: baseline; // 默認(對齊父元素基線)vertical-align: middle; // 父元素中部vertical-align: top; // 元素頂端與行內元素最高元素頂端對齊vertical-align: bottom; // 元素底端與行內元素最底元素底端對齊
}
position(定位)
position { // 定位position: relative // 相對定位(基于偏移前位置)position: absolute // 絕對定位(脫標,基于最近一級帶有定位的父元素定位(最終為瀏覽器窗口,若瀏覽器滾對則隨之滾動),左右margin失效)position: fixed // 固定定位(脫標,基于瀏覽器窗口,瀏覽器滾對不隨之滾動)position: sticky // 粘性定位(可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位)position: static // 靜態定位(默認)
}
float(浮動)
float { // 浮動(脫標)float: left // 左浮動float: right // 右浮動float: none // 無浮動
}
尺寸
width { // 寬度width: auto; // 寬度min-width: none; // 最小寬度max-width: none; // 最大寬度
}height { // 高度height: auto; // 高度min-width: none; // 最小高度max-width: none; // 最小高度
}
box(布局盒子)
border { // 邊框border: 1px solid #ccc; // 簡寫屬性border-width: 1px; // 邊框寬度border-style: solid; // 邊框樣式(solid:實線, dashed:虛線, dotted:點狀, double:雙線, none:無)border-color: #ccc; // 邊框顏色border-radius: 50%; // 圓角邊框(上左/上右/下右/下左)
}outline { // 輪廓outline: 1px solid #ccc; // 簡寫屬性outline-width: 1px; // 輪廓寬度outline-style: solid; // 輪廓樣式(solid:實線, dashed:虛線, dotted:點狀, double:雙線, none:無)outline-color: #ccc; // 輪廓顏色
}margin { // 外邊距margin: 10px; // 簡寫屬性(上/右/下/左; 上/左右/下; 上下/左右)margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;
}padding { // 內邊距padding: 10px; // 簡寫屬性(上/右/下/左; 上/左右/下; 上下/左右)padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;
}box-shadow { // 陰影* ? h-shadow 水平陰影位置,允許負值* ? v-shadow 垂直陰影位置,允許負值* ? blur 模糊距離* ? spread 尺寸* ? color 顏色* ? inset 將外部陰影 (outset) 改為內部陰影; box-shadow: 1px 1px 5px 2px #ccc inset;
}
background(背景)
注意: position 與 size 屬性共同聲明時：需用 / 進行分割
background { // 背景background: #ccc cover/center no-repeat content-box border-box fixed url(./image/logo.png); // 簡寫屬性background-color: #fff; // 背景顏色background-size: cover; // 背景大小(x, y, cover, contain) // ? cover:把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域,背景圖像的某些部分也許無法顯示在背景定位 區域中; contain:把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域background-position: center; // 背景位置(x, y)background-repeat: no-repeat; // 背景是否重復(repeat, no-repeat, repeat-x, repeat-y)background-origin: content-box; // 背景定位區域(content-box, padding-box, border-box)background-clip: border-box; // 背景裁剪區域(content-box, padding-box, border-box)background-attachment: fixed; // 背景是否固定(fixed:固定, scroll:隨著滾動)background-image: url(./image/logo.png); // 背景圖片(none, url())
}
font(字體)
注意: 簡寫時 font-size and font-family 必須書寫
font { // 字體font:12px/1 Arial, Helvetica, sans-serif; // 簡寫屬性font-size: 12px; // 字體大小line-height: 1; // 行高font-family:Arial, Helvetica, sans-serif; // 字體系列font-weight: bold; // 字體粗細(400:normal, 700:bold)
}
text(文本)
text { // 文本color: #000; // 顏色line-height: 1; // 行高text-align: center; // 文本對齊方式(left:左對齊, right:右對齊, center:居中對齊, justify:兩端對齊)text-decoration: none; // 文本裝飾(underline:文本下的一條線, overline:文本上的一條線, line-through:穿過文本下的一條線, blink:閃爍的文本)text-indent: 2em; // 文本首行縮進text-transform: none; // 文本大小寫(capitalize:單詞首字母大寫開頭, uppercase:全大寫, lowercase:全小寫,)word-spacing: 1em; // 單詞間距 white-space: nowrap; // 如何處理元素中的空白(normal:空白會被瀏覽器忽略(默認), nowrap:文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止,)text-overflow: ellipsis; // 文本溢出(clip:修剪文本, ellipsis:顯示省略符號來代表被修剪的文本, string:使用給定的字符串來代表被修剪的文本,)text-shadow: none; // 文本陰影
}
list-style(列表樣式)
list-style { // 列表樣式list-style-type: none; // 標記類型(none)list-style-position: inside; // 標記位置(none)list-style-image: none; // 標記圖片(none)
}
cursor(光標)
cursor { // 光標樣式cursor: pointer; // 小手cursor: default; // 箭頭cursor: crosshair; // 十字線cursor: move; // 移動cursor: text; // 指示文本cursor: wait; // 正忙(表或沙漏)cursor: help; // 可用的幫助(問號或一個氣球)
}
table(表格樣式)
table { // 表格樣式border-collapse: collapse; // 是否合并表格邊框()border-spacing: 0; // 單元格邊框之間的距離(x, y)caption-side: center; // 表格標題的位置(left, right, top, bottom, center)empty-cells: show; // 隱藏表格中空單元格上的邊框和背景(show:繪制, hide:不繪制)table-layout: auto; // 顯示表格單元格、行、列的算法規則(auto:自動, fixed:列寬由表格寬度和列寬度設定)
}
transform(2D/3D轉換)
transform { // 2D/3D轉換transform: translate(x, y, z) scale(x, y, z) rotate(x, y, z); // 簡寫屬性transform: translate(x, y, z); // 轉換transform: scale(x, y, z); // 縮放(一般為: 1/2 倍數)transform: rotate(x, y, z); // 旋轉
}
transition(過度)
transition { // 過度transition: all 1s linear 0s; // 簡寫屬性transition-property: all; // 屬性名稱(all:所有屬性)transition-duration: 1s; // 花費時間(以 s 為單位)transition-timing-function: linear; // 時間曲線(linear平均速度)transition-delay: 0s; // 何時開始(以 s 為單位)
}
animation(動畫)
@keyframes identifier { // 定義關鍵幀from{ } // 起始to{ } // 結束%{ } // 百分比設置
}animation { // 動畫animation: identifier 1s linear 0s infinite alternate; // 簡寫屬性animation-name: identifier; // 動畫名稱animation-duration: 1s; // 花費時間(以 s 為單位)animation-timing-function: linear; // 時間曲線(linear平均速度)animation-delay: 0s; // 何時開始(以 s 為單位)// 特有設置animation-iteration-count: infinite; // 播放次數(n:Number, infinite:無限)animation-direction: alternate; // 是否逆向播放(normal:正常播放, alternate:逆序播放)// 設置 infinite 后無效animation-play-state: paused; // 運行或暫停(running:正常播放, paused:暫停動畫))// 設置 direction 后無效animation-fill-mode: forwards; // 動畫時間之外狀態(backwards:回歸第一幀, forwards:保持最后幀)
}
5. CSS 布局
1. 普通流
默認布局、從左到右排列,當一行位置不夠時,另起一行向下排列
除了受padding和margin的影響外,還受到display的影響
2. 浮動
浮動元素脫離標準流
該元素的下一個兄弟元素中有內聯元素(通常是文字),則會圍繞該元素顯示,形成類似"文字圍繞圖片"的效果;即雖然浮動會讓元素脫離文檔流,但是文本內容會受到浮動元素的影響
float { // 浮動(脫標)布局float: left // 左浮動float: right // 右浮動float: none // 無浮動
}
3. 定位
position { // 定位布局position: relative // 相對定位position: absolute // 絕對定位(脫標)position: fixed // 固定定位(脫標)position: sticky // 粘性定位(相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位,須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同)position: static // 靜態定位(無定位)
}
4. flex
flex { // flex 布局display: flex; // 定義 flex 容器display: inline-flex; //定義行內 flex 容器// flex 容器flex-flow: flex-direction flex-wrap; // 簡寫屬性flex-direction: row; // 主軸方向(row:水平start, row-reverse:水平end, column:垂直start, column-reverse:垂直end)flex-wrap: nowrap; // 是否換行顯示(wrap:換行, nowrap:不換行)place-content: align-content justify-content; // 簡寫屬性align-content: center; // 縱軸空間分配(該屬性對單行彈性盒子模型無效)justify-content: center; // 主軸空間分配(flex-start:從左至右排列項目, flex-end:從右至左排列項目, center:居中排列項目, space-between:均勻排列每個元素、首個元素放 置于起點,末尾元素放置于終點, space-around:每個元素周圍分配相同的空間、兩側間距較少(顯示), space-evenly:均勻排列每個元素、每個元素之間的間隔相等, stretch:均勻分布項目 、拉伸‘auto’-大小的項目以充滿容器)gap: row-gap column-gap; // 簡寫屬性row-gap: 10px; // 元素行之間的間隙大小column-gap: 10px; // 元素列之間的間隙大小place-items: align-items justify-items; // 簡寫屬性align-items: center; // 控制十字軸上項目的對齊方式(flex-start:從左至右排列項目, flex-end:從右至左排列項目, center:居中排列項目, stretch:均勻分布項目 、拉 伸‘auto’-大小的項目以充滿容器)justify-items: center; // 為所有盒中的項目定義了默認的 justify-self(彈性布局中,該屬性被忽略)// item 項目flex: flex-grow flex-shrink flex-basis; // 簡寫屬性flex-grow: 1; // flex 增長系數flex-shrink: 1; // flex 收縮系數flex-basis: auto; // flex 元素初始大小justify-self: auto; // 單個盒子在其布局容器適當軸中的對齊方式(彈性布局中,該屬性被忽略)align-self: center; // 對齊當前 grid 或 flex 行中的元素,并覆蓋已有的 align-items 的值(屬性不適用于塊類型的盒模型和表格單元;如果任何 flexbox 元素的側軸方向 margin 值設置為 auto,則會忽略 `align-self`)
}
5. grid
grid { // grid 布局display: grid; // 定義 grid 網格display: inline-grid; // 定義行內 grid 網格// gird 容器 grid-template-columns: 100px auto 100px; // fr 容器剩余空間單位 minmax(最小,最大) rgrid-template-rows: 100px 100px;gap: column-gap row-gap; // 簡寫column-gap: 10px; // 列軌道寬度row-gap: 10px; // 行軌道寬度// 定義一個區域并為區域內項目進行命名(不需要命名使用 . )grid-template-areas: 'a b c''d e f''g h i';grid-auto-flow: row; // 項目排序方式(先行后列)默認,也可以設置 column 先列后行place-content: align-content justify-content; // 簡寫屬性align-content: center; // 總體項目排列(需容器還有空間)justify-content: center; // 總體項目排列(需容器還有空間)grid-auto-columns: auto; // 隱式網格列設置grid-auto-rows: auto; // 隱式網格行設置// item 項目align-items: center; // 項目在軌道內垂直對齊方式(與flex相似)justify-items: center; // 項目在軌道內水平對齊方式(與flex相似)grid-column-start: 2; // 2 列軌道開始grid-column-end: 4; // 4 列軌道結束grid-row-start: 2; // 2 行軌道開始grid-row-end: 4; // 4 行軌道結束grid-area: b; // 制定項目放到哪個區域(需與 grid-template-areas 配合使用)justify-self: auto; // 單個盒子在其布局容器適當軸中的對齊方式(彈性布局中,該屬性被忽略)align-self: center; // 對齊當前 grid 或 flex 行中的元素,并覆蓋已有的 align-items 的值(屬性不適用于塊類型的盒模型和表格單元;如果任何 flexbox 元素的側軸方向 margin 值設置為 auto,則會忽略 `align-self`)
}
6. 選擇器
基礎選擇器
| 序號 | 類型 | 選擇器 | 例子 | 例子描述 | CSS權重 |
|---|---|---|---|---|---|
| 1 | 通配符選擇器 | * | * | 選擇所有元素。 | 0,0,0,0 |
| 2 | 標簽選擇器 | element | p | 選擇所有 元素。 | 0,0,0,1 |
| 3 | 類選擇器 | .class | .intro | 選擇 class=“intro” 的所有元素。 | 0,0,1,0 |
| 4 | id選擇器 | #id | #firstname | 選擇 id=“firstname” 的所有元素。 | 0,1,0,0 |
復合選擇器語法
| 序號 | 類型 | 選擇器 | 例子 | 例子描述 | CSS權重 |
|---|---|---|---|---|---|
| 1 | 后代選擇器 | element element | div p | 選擇 元素內部的所有 元素。 | 0,0,0,1 |
| 2 | 子代選擇器 | element>element | div>p | 選擇父元素為 元素的所有 元素。 | 0,0,0,1 |
| 3 | 相鄰兄弟選擇器 | element+element | div+p | 選擇緊接在 元素之后的所有 元素。 | 0,0,0,1 |
| 4 | 通用選擇器 | element1~element2 | p~ul | 選擇前面有 元素的每個 元素。 | 0,0,1,0 |
| 5 | 并集選擇器 | element,element | div,p | 選擇所有 元素和所有 元素。 | 0,0,0,1 |
偽元素選擇器
| 序號 | 類型 | 選擇器 | 例子 | 例子描述 | CSS權重 |
|---|---|---|---|---|---|
| 1 | 偽元素選擇器 | :first-letter | p:first-letter | 選擇每個 元素的首字母。 | 0,0,0,1 |
| 2 | 偽元素選擇器 | :first-line | p:first-line | 選擇每個 元素的首行。 | 0,0,0,1 |
| 3 | 偽元素選擇器 | :before | p:before | 在每個 元素的內容之前插入內容。 | 0,0,0,1 |
| 4 | 偽元素選擇器 | :after | p:after | 在每個 元素的內容之后插入內容。 | 0,0,0,1 |
| 5 | 偽元素選擇器 | ::selection | ::selection | 選擇被用戶選取的元素部分。 | 0,0,0,1 |
動態偽類選擇器
| 序號 | 類型 | 選擇器 | 例子 | 例子描述 | CSS權重 |
|---|---|---|---|---|---|
| 1 | 鏈接偽類選擇器 | :link | a:link | 選擇所有未被訪問的鏈接。 | 0,0,1,0 |
| 2 | 鏈接偽類選擇器 | :visited | a:visited | 選擇所有已被訪問的鏈接。 | 0,0,1,0 |
| 3 | 用戶行為選擇器 | :active | a:active | 選擇活動鏈接。 | 0,0,1,0 |
| 4 | 用戶行為選擇器 | :hover | a:hover | 選擇鼠標指針位于其上的鏈接。 | 0,0,1,0 |
| 5 | 用戶行為選擇器 | :focus | input:focus | 選擇獲得焦點的 input 元素。 | 0,0,1,0 |
結構偽類選擇器
| 序號 | 類型 | 選擇器 | 例子 | 例子描述 | CSS權重 |
|---|---|---|---|---|---|
| 1 | 結構偽類選擇器 | :first-child | p:first-child | 選擇屬于父元素的第一個子元素的每個 元素。 | 0,0,1,0 |
| 2 | 結構偽類選擇器 | :lang(language) | p:lang(it) | 選擇帶有以 “it” 開頭的 lang 屬性值的每個 元素。 | 0,0,1,0 |
| 3 | 結構偽類選擇器 | :first-of-type | p:first-of-type | 選擇屬于其父元素的首個 元素的每個 元素。 | 0,0,1,0 |
| 4 | 結構偽類選擇器 | :last-of-type | p:last-of-type | 選擇屬于其父元素的最后 元素的每個 元素。 | 0,0,1,0 |
| 5 | 結構偽類選擇器 | :only-of-type | p:only-of-type | 選擇屬于其父元素唯一的 元素的每個 元素。 | 0,0,1,0 |
| 6 | 結構偽類選擇器 | :only-child | p:only-child | 選擇屬于其父元素的唯一子元素的每個 元素。 | 0,0,1,0 |
| 7 | 結構偽類選擇器 | :nth-child(n) | p:nth-child(2) | 選擇屬于其父元素的第二個子元素的每個 元素。 | 0,0,1,0 |
| 8 | 結構偽類選擇器 | :nth-last-child(n) | p:nth-last-child(2) | 同上，從最后一個子元素開始計數。 | 0,0,1,0 |
| 9 | 結構偽類選擇器 | :nth-of-type(n) | p:nth-of-type(2) | 選擇屬于其父元素第二個 元素的每個 元素。 | 0,0,1,0 |
| 10 | 結構偽類選擇器 | :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是從最后一個子元素開始計數。 | 0,0,1,0 |
| 11 | 結構偽類選擇器 | :last-child | p:last-child | 選擇屬于其父元素最后一個子元素每個 元素。 | 0,0,1,0 |
| 12 | 結構偽類選擇器 | :root | :root | 選擇文檔的根元素。 | 0,0,1,0 |
| 13 | 結構偽類選擇器 | :empty | p:empty | 選擇沒有子元素的每個 元素（包括文本節點）。 | 0,0,1,0 |
| 14 | 結構偽類選擇器 | :target | #news:target | 選擇當前活動的 #news 元素。 | 0,0,1,0 |
| 15 | 結構偽類選擇器 | :enabled | input:enabled | 選擇每個啟用的 元素。 | 0,0,1,0 |
| 16 | 結構偽類選擇器 | :disabled | input:disabled | 選擇每個禁用的 元素 | 0,0,1,0 |
| 17 | 結構偽類選擇器 | :checked | input:checked | 選擇每個被選中的 元素。 | 0,0,1,0 |
屬性選擇器
| 序號 | 類型 | 選擇器 | 例子 | 例子描述 | CSS權重 |
|---|---|---|---|---|---|
| 1 | 屬性選擇器 | [attribute] | [target] | 選擇帶有 target 屬性所有元素。 | 0,0,1,0 |
| 2 | 屬性選擇器 | [attribute=value] | [target=_blank] | 選擇 target=“_blank” 的所有元素。 | 0,0,1,0 |
| 3 | 屬性選擇器 | [attribute~=value] | [title~=flower] | 選擇 title 屬性包含單詞 “flower” 的所有元素。 | 0,0,1,0 |
| 4 | 屬性選擇器 | [attribute|=value] | [lang|=en] | 選擇 lang 屬性值以 “en” 開頭的所有元素。 | 0,0,1,0 |
| 5 | 屬性選擇器 | [attribute^=value] | a[src^=“https”] | 選擇其 src 屬性值以 “https” 開頭的每個 元素。 | 0,0,1,0 |
| 6 | 屬性選擇器 | [attribute$=value] | a[src$=“.pdf”] | 選擇其 src 屬性以 “.pdf” 結尾的所有 元素。 | 0,0,1,0 |
| 7 | 屬性選擇器 | [attribute*=value] | a[src*=“abc”] | 選擇其 src 屬性中包含 “abc” 子串的每個 元素。 | 0,0,1,0 |
否定偽類選擇器
| 序號 | 類型 | 選擇器 | 例子 | 例子描述 | CSS權重 |
|---|---|---|---|---|---|
| 1 | 否定偽類選擇器 | :not(selector) | :not§ | 選擇非 元素的每個元素。 | 不計算權重 |
7. CSS 函數
| 函數 | 描述 | CSS 版本 |
|---|---|---|
| attr() | 返回選擇元素的屬性值。 | 2 |
| calc() | 允許計算 CSS 的屬性值，比如動態計算長度值。 | 3 |
| cubic-bezier() | 定義了一個貝塞爾曲線(Cubic Bezier)。 | 3 |
| conic-gradient() | 定義了一個圓錐漸變。 | 3 |
| counter() | 設置計數器。 | 3 |
| hsl() | 使用色相、飽和度、亮度來定義顏色。 | 3 |
| hsla() | 使用色相、飽和度、亮度、透明度來定義顏色。 | 3 |
| linear-gradient() | 創建一個線性漸變的圖像。 | 3 |
| max() | 從一個逗號分隔的表達式列表中選擇最大的值作為屬性的值。 | 3 |
| min() | 從一個逗號分隔的表達式列表中選擇最小的值作為屬性的值。 | 3 |
| radial-gradient() | 用徑向漸變創建圖像。 | 3 |
| repeating-linear-gradient() | 用重復的線性漸變創建圖像。 | 3 |
| repeating-radial-gradient() | 類似 radial-gradient()，用重復的徑向漸變創建圖像。 | 3 |
| repeating-conic-gradient() | 重復的圓錐漸變。 | 3 |
| rgb() | 使用紅?、綠(G)、藍(B)三個顏色的疊加來生成各式各樣的顏色。 | 2 |
| rgba() | 使用紅?、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色。 | 3 |
| var() | 用于插入自定義的屬性值。 | 3 |
8. CSS 單位
- CSS 有幾個不同的單位用于表示長度
- 一些設置 CSS 長度的屬性有 width, margin, padding, font-size, border-width, 等
- 長度有一個數字和單位組成如 10px, 2em, 等
- 數字與單位之間不能出現空格;如果長度值為 0,則可以省略單位
- 對于一些 CSS 屬性,長度可以是負數
- 有兩種類型的長度單位：相對和絕對
瀏覽器支持
| 長度單位 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1 | 3 | 1 | 1 | 3.5 |
| ch | 27 | 9 | 1 | 7 | 20 |
| rem | 4 | 9 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20 | 9 | 19 | 6 | 20 |
| vmin | 20 | 9.0* | 19 | 6 | 20 |
| vmax | 26 | 不支持 | 19 | 不支持 | 20 |
注意: Internet Explorer 9 通過不標準的名稱 vm 來支持 vmin ;
相對長度
相對長度單位指定了一個長度相對于另一個長度的屬性;對于不同的設備相對長度更適用;
| 單位 | 描述 |
|---|---|
em | 它是描述相對于應用在當前元素的字體尺寸,所以它也是相對長度單位。一般瀏覽器字體大小默認為16px,則2em == 32px；（自身存在字體大小設置時以自身為主,字體大小逐層復合會有連鎖反應,不好調整） |
| ex | 依賴于英文字母小 x 的高度 |
| ch | 數字 0 的寬度 |
rem | rem 是根 em（root em）的縮寫,rem作用于非根元素時,相對于根元素字體大小；rem作用于根元素字體大小時,相對于其出初始字體大小。(除IE8即更早版本,均已支持) |
vw | viewpoint width,視窗寬度,1vw=視窗寬度的1% |
vh | viewpoint height,視窗高度,1vh=視窗高度的1% |
| vmin | vw和vh中較小的那個。 |
| vmax | vw和vh中較大的那個。 |
% | 百分比 |
注意: rem與em有什么區別呢？區別在于使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素;
絕對長度
絕對長度單位是一個固定的值,它反應一個真實的物理尺寸;絕對長度單位視輸出介質而定,不依賴于環境(顯示器、分辨率、操作系統等);
| 單位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
px | 像素 (1px = 1/96th of 1in) |
| pt | point，大約1/72英寸； (1pt = 1/72in) |
| pc | pica，大約 12pt，1/6英寸； (1pc = 12 pt) |
備注: 像素或許被認為是最好的"設備像素",而這種像素長度和你在顯示器上看到的文字屏幕像素無關;px實際上是一個按角度度量的單位;
9. 預處理器
CSS預處理器是一種專門的編程語言,用來為CSS增加一些編程特性(CSS本身不是編程語言)
CSS 預處理器主要目的
- CSS語法不夠強大(例如: CSS選擇器無法進行嵌套,導致CSS中存在較多重復的選擇器語句); CSS中無法定義變量以及沒有合理的樣式復用機制,導致整體CSS樣式難以維護
- 為了減少CSS代碼冗余,為CSS提供樣式復用機制,提高CSS代碼的可維護性
CSS 預處理器工作流程
各種預處理器語法不一樣,但最終工作流程是一樣的
- 以 Sass/Less/Styus 提供的語法規則編寫樣式代碼
- 經過編譯器把 Sass/Less/Styus 編寫的代碼轉換成標準的CSS代碼
- 瀏覽器加載解析轉換后的CSS樣式(瀏覽器只能解析標準的CSS代碼,而不能是 Sass/Less/Styus 等)
Scss、Sass
2007年誕生,最早最成熟的CSS預處理器,有兩種語法,分別以 .sass 和 .scss 為擴展名. SCSS 是 Sass3 引入的新語法,完全兼容 CSS3,并繼承了 Sass 的強大功能,和 CSS 語法結構更接近
Less
2009年誕生,受Sass影響大,以 .less 為擴展名
Stylus
2010年誕生,來自Node.js社區,主要用來給Node項目進行CSS預處理支持,以 .styl 為擴展名
10. CSS 布局方案
水平垂直居中
1. text-align + line-height
.layout {text-align: center;line-height: height;
}
2. position + 負margin
.layout {position: relative;.content {position: absolute;left: 50%;top: 50%;margin-top: -50%;margin-left: -50%;}
}
3. position + transform
.layout {position: relative;.content {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
}
4. position + margin:auto
.layout {position: relative;.content {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
}
5. display: table-cell
.layout{display: table-cell;vertical-align: middle;text-align: center;.content {display: inline-block}
}
6. display: flex
layout {display: flex;justify-content: center;align-items: center;
}
單列布局
特征：定寬、水平居中
1. 全等寬,自適應
原理說明：對header、content、footer統一設置width或max-width,并通過margin:auto實現居中
/* HTML */
<div class="layout"><div id="header">頭部</div><div id="content">內容</div><div id="footer">尾部</div>
</div>/* less */
.layout {/* width: 1200px; *//*設置width當瀏覽器窗口寬度小于1200px時,單列布局不會自適應;*/max-width: 1200px;margin: 0 auto;
}
2. 頭、尾全等寬,內容自適應
原理說明：header、footer的內容寬度為100%,但header、footer的內容區以及content統一設置width 或 max-width,并通過margin:auto實現居中
/* HTML */
<div id="header"><div class="layout">頭部</div>
</div><div id="content" class="layout">內容</div><div id="footer"><div class="layout">尾部</div>
</div>
/* less */
.layout {/* width: 1200px; *//*設置width當瀏覽器窗口寬度小于1200px時,單列布局不會自適應;*/max-width: 1200px;margin: 0 auto;
}
雙列&三列布局
二列布局的特征是側欄固定寬度,主欄自適應寬度
三列布局的特征是兩側兩列固定寬度,中間列自適應寬度
1. float+(margin / overflow: hidden)
原理說明：設置兩個側欄分別向左向右浮動,中間列通過外邊距給兩個側欄騰出空間,中間列的寬度根據瀏覽器窗口自適應
/* HTML */
<div id="content"><div class="sub">sub</div><div class="extra">extra</div><div class="main">main</div>
</div>/* less */
.sub{width: 100px;float: left;
}
.extra{width: 200px;float: right;
}
.main{margin-left: 100px; margin-right: 200px;// overfrow: hidden;
}
一些說明:
- 注意DOM文檔的書寫順序,先寫兩側欄,再寫主面板,更換后則側欄會被擠到下一列(圣杯布局和雙飛翼布局都會用到);
- 這種布局方式比較簡單明了,但缺點是渲染時先渲染了側邊欄,而不是比較重要的主面板
二列的實現方法
如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設置主面板的margin-right值,其他操作相同;反之亦然
2. position+margin
原理說明：設置兩個側欄分別向左向右定位,中間列通過外邊距給兩個側欄騰出空間,中間列的寬度根據瀏覽器窗口自適應
/* HTML */
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>/* less */
.sub, .extra {position: absolute;top: 0; width: 200px;
}
.sub { left: 0;
}
.extra { right: 0;
}
.main { margin: 0 200px;
}
一些說明:
- 本方法不限制DOM書寫順序,先寫主面板會使主面板部分優先渲染(一般主面板會比側欄內容重要)
- 與上一種方法相比,本種方法是通過定位來實現側欄的位置固定
- 如果中間欄含有最小寬度限制,或是含有寬度的內部元素,則瀏覽器窗口小到一定程度,主面板與側欄會發生重疊
二列的實現方法
如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設置主面板的margin-right值,其他操作相同;反之亦然
3. 圣杯布局(float + 負margin)
原理說明：
主面板設置寬度為100%,主面板與兩個側欄都設置浮動,常見為左浮動,這時兩個側欄會被主面板擠下去;通過負邊距將浮動的側欄拉上來,左側欄的負邊距為100%,剛好是窗口的寬度,因此會從主面板下面的左邊跑到與主面板對齊的左邊,右側欄此時浮動在主面板下面的左邊,設置負邊距為負的自身寬度剛好浮動到主面板對齊的右邊;為了避免側欄遮擋主面板內容,父元素設置左右padding值為左右側欄的寬度,給側欄騰出空間,此時主面板的寬度減小;由于側欄的負margin都是相對主面板的,兩個側欄并不會像我們理想中的停靠在左右兩邊,而是跟著縮小的主面板一起向中間靠攏;此時使用相對布局,調整兩個側欄到相應的位置
布局步驟:
- 三者都設置向左浮動
- 設置main寬度為100%,設置兩側欄的寬度
- 設置 負邊距,sub設置負左邊距為100%,extra設置負左邊距為負的自身寬度
- 設置父元素的padding值給左右兩個子面板留出空間
- 設置兩個子面板為相對定位,sub的left值為負的sub寬度,extra的right值為負的extra寬度
/* HTML */
<div id="bd"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div>
</div>/* less */
#bd {padding: 0 230px 0 190px;.main {float: left;width: 100%;}.sub {float: left;width: 190px;margin-left: -100%;position: relative;left: -190px;}.extra {float: left;width: 230px;margin-left: -230px;position: relative;right: -230px;}
}一些說明
- DOM元素的書寫順序不得更改
- 主面板部分優先渲染(一般主面板會比側欄內容重要)
- 當面板的main內容部分比兩邊的子面板寬度小的時候,布局就會亂掉;可以通過設置main的min-width屬性或使用雙飛翼布局避免問題
二列的實現方法
如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設置主面板的padding-right值,其他操作相同;反之亦然
4. 雙飛翼布局( float + 負margin )
原理說明：
雙飛翼布局和圣杯布局的思想有些相似,都利用了浮動和負邊距,但雙飛翼布局在圣杯布局上做了改進,在main元素上加了一層div, 并設置margin,由于兩側欄的負邊距都是相對于main-wrap而言,main的margin值變化便不會影響兩個側欄,因此省掉了對兩側欄設置相對布局的步驟
布局步驟:
- 三者都設置向左浮動
- 設置main-wrap寬度為100%,設置兩個側欄的寬度
- 設置 負邊距,sub設置負左邊距為100%,extra設置負左邊距為負的自身寬度
- 設置main的margin值給左右兩個子面板留出空間
/* HTML */
<div class="main-wrap"><div class="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>/* less */
.main-wrap {float: left;width: 100%;.main {margin: 0 230px 0 190px;}
}.sub {float: left;width: 190px;margin-left: -100%;
}.extra {float: left;width: 230px;margin-left: -230px;
}
一些說明
- 主面板部分優先渲染(一般主面板會比側欄內容重要)
- 圣杯采用的是padding,而雙飛翼采用的margin,解決了圣杯布局main的最小寬度不能小于左側欄的缺點
- 雙飛翼布局不用設置相對布局,以及對應的left和right值
- 通過引入相對布局,可以實現三欄布局的各種組合,例如對右側欄設置position: relative; left: 190px;,可以實現sub+extra+main的布局(元素移出返回)
二列的實現方法
如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設置main-wrap的margin-right值,其他操作相同;反之亦然
HTML and CSS 特性要點
HTML5 新特性
拖拽釋放:(Drap and drop) API ondrop,拖放是一種常見的特性,即抓取對象以后拖到另一個位置;在HTML5中,拖放是標準的一部分,任何元素都能夠拖放自定義屬性:data-id語義化標簽:header, nav, footer, aside, article, section, main音 / 視頻:audio / video畫布:Canvas地理:(Geolocation) API其實Geolocation 就是用來獲取到當前設備的經緯度(位置)localStorage:本地離線存儲,用于長久保存整個網站的數據,保存的數據沒有過期時間,直到手動刪除sessionStorage:該數據對象臨時保存同一窗口(或標簽頁)的數據,在關閉窗口或標簽頁之后將會刪除這些數據新增表單控件:search,color,range,date,time,datetime-local,url,email,number,tel新的技術:web worker(為 Web 內容在后臺線程中運行腳本提供了一種簡單的方法),web socket(提供了用于創建和管理 WebSocket 連接，以及可以通過該連接發送和接收數據的 API),Geolocation(獲取設備地理位置的可編程的對象)
CSS3 新特性
新增顏色模式:RGBA,HSLA文字陰影:text-shadow邊框:圓角邊框(border-radius);邊框陰影(box-shadow);圖片邊框(border-image)盒子模型:box-sizing背景:background-size background-origin background-clip漸變:linear-gradient , radial-gradient過渡:transition,可實現屬性的漸變自定義動畫:animate @keyfrom媒體查詢:多欄布局@media screen and (width:800px) (…)2D 轉換/3D 轉換:transform: translate (x, y) rotate (x, y) skew (x, y) scale (x, y)字體圖標:iconfont/icomoon彈性布局:flex布局網格布局:Grid布局
Canvas和SVG的區別是什么
Canvas
Canvas 通過 JavaScript 來繪制 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Canvas 與 SVG 的比較
Canvas
- 依賴分辨率
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結果圖像
- 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
SVG
- 不依賴分辨率
- 支持事件處理器
- 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
- 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
- 不適合游戲應用
位圖跟矢量圖的區別
位圖
位圖圖像也稱為點陣圖像，位圖使用我們稱為像素的一格一格的小點來描述圖像
矢量圖
矢量圖是根據幾何特性來繪制圖形，是用線段和曲線描述圖像，矢量可以是一個點或一條線，矢量圖只能靠軟件生成，矢量圖文件占用內在空間較小，因為這種類型的圖像文件包含獨立的分離圖像，可以自由無限制的重新組合
區別
- 矢量圖形與分辨率無關，可以將它縮放到任意大小和以任意分辨率在輸出設備上打印出來，都不會影響清晰度
- 而位圖是由一個一個像素點產生，當放大圖像時，像素點也放大了，但每個像素點表示的顏色是單一的，所以在位圖放大后就會出現咱們平時所見到的馬賽克狀。
瀏覽器兼容性前綴
-moz-: 代表firefox瀏覽器私有屬性
-ms-: 代表IE瀏覽器私有屬性
-webkit-: 代表chrome、safari私有屬性
-o-: 代表opera私有屬性
優雅降級,漸進增強
優雅降級和漸進增強印象中是隨著CSS3流出來的一個概念;由于低級瀏覽器不支持CSS3,但CSS3 的效果又太優秀不忍放棄,所以在高級瀏覽中使用CSS3 而低級瀏覽器只保證最基本的功能;關鍵的區別是他們所側重的內容,以及這種不同造成的工作流程的差異
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站,后續針對兼容問題進行設置
“漸進增強”觀點則認為應關注于內容本身,先針對兼容問題進行設置,后續再應用高級功能
響應式設計
網頁內容自動適配屏幕
- 媒體查詢方案
- 百分比 方案
- VH/VW 方案
- rem 方案
媒體查詢
CSS3 中的增加了更多的媒體查詢,就像if條件表達式一樣,可以設置不同類型的媒體條件,并根據對應的條件,給相應符合條件的媒體調用相對應的樣式表使用@Media查詢,可以針對不同的媒體類型定義不同的樣式,通過媒體查詢,可以通過給不同分辨率的設備編寫不同的樣式來實現響應式的布局,比如為不同分辨率的屏幕,設置不同的背景圖片比如給小屏幕手機設置@2x圖,為大屏幕手機設置@3x圖,通過媒體查詢就能很方便的實現
@media screen and (max-width: 1920px) { ... }
// 設置更多條件
@media screen (min-width: 375px) and (max-width: 600px) {body {font-size: 18px}
}
readonly 和 disabled 的區別
- 兩個屬性都可以作用于input等表單元素上，都使得元素成為“不可用”的狀態；
- 兩者的字面意義
- readonly表示“只讀”，一般表示對于文字內容只讀，即不可更改內容，對于非文字的表單“只讀”與“不只讀”似乎沒有啥區別；
- disabled表示“使殘廢，使無效”，都殘廢了，不管是什么內容，都是無效的。(禁用)
HTML and CSS 實現方案
rem 適配方案
1. 通用方案
- 設置根font-size: 625%(或其它自定的值,但換算規則1rem不能小于12px)
- 通過媒體查詢分別設置每個屏幕的根font-size
- CSS直接除以2再除以100即可換算為rem
優點: 有一定適用性,換算也較為簡單
缺點: 有兼容性的坑,對不同手機適配不是非常精準;需要設置多個媒體查詢來適應不同手機,單某款手機尺寸不在設置范圍之內,會導致無法適配
2. 手淘方案
- 拿到設計稿除以10,得到font-size基準值
- 引入flexible
- 不要設置meta的viewport縮放值
- 設計稿px/ font-size基準值,即可換算為rem
@rootSize: 37.5rem; // 設計稿 / 10
(10 / @rootSize) // px / 基準值
優點: 通過動態根font-size、viewpor、dpr來做適配,無兼容性問題,適配精準
缺點: 需要根據設計稿進行基準值換算,在不使用編輯器插件開發時,單位計算復雜
清除浮動
元素浮動脫標后,無法撐起父元素的高度,影響父元素的布局
與浮動元素同級的非浮動元素(內聯元素)會跟隨其后,影響布局
1. clear: both 方案
.block { // 在盒子布局的尾部放置一個塊級元素,設置不允許兩側有浮動元素clear: both;
}
2. 偽元素清除浮動方案
.clearfix:after {content: "."; // 偽元素必寫,添加內容為兼容寫法display: block; // 設置塊級元素以設置清除浮動屬性visibility: hidden; // 隱藏元素height: 0; // 高度為0,不顯示此元素clear: both; // 清除浮動
}
/* for IE */
.clearfix{*zoom: 1; // 兼容IE
}
注意: 也可以給父級元素設置overflow: hidden;或overflow: auto;清除浮動方案本質上是將同一個BFC中的兩個元素隔開
CSS畫三角形
- border是由三角形組合而成的
- 如果想要其中一個,只需要把另外三個的顏色都設為 transparent(透明)
- 不過其他隱藏的左邊框依然占據著空間,如果不想要,可以把右邊框的 border-width 設為 0
/* HTML */
div {width:0;height:0;border-style: solid;border-width: 40px 0px 40px 40px;border-color: transparent transparent transparent red;
}
效果如下：
小于1px的邊框
1. 漸變方案(效果較好)
.layout {position: relative;.layout::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 1px;background-image: linear-gradient(0deg, transparent 50%, #000 50%); // 0 edg 向↑ 90edg 向→;-webkit 原理實現 為 90edg 向↑,0 edg 向→}
}
2. 縮放方案
.layout {position: relative;.layout::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 1px;background-color: #000; // border-top: 1px solid #000;transform: scaleY(0.5);}
}
3. 縮放方案加強版(四邊)
.layout {position: relative;.layout::after {content: '';position: absolute;top: 0;left: 0;width: 200%;height: 200%;border: 1px solid #000;transform-origin: 0 0; // 縮放定位設置為左上角transform: scale(0.5, 0.5);}
}
4. 邊框陰影(最簡便)
.layout {box-shadow: 0 0 1px 1px #000 inset;
}
小于12px的字體
利用縮放將字體顯示縮小,但又因為縮放會針對所有顯示進行控制,所以設置時針對需要小于12px的字體標簽進行特定包裹設置即可
.layout {display: inline-block; // 行內塊,不影響布局transform: scale(0.8); // 10px
}
文本溢出顯示
1. 單行文本溢出顯示
.layout { // 前置條件: 設置寬度white-space: nowrap; // 是否折行overflow: hidden; // 溢出隱藏text-overflow: ellipsis; // 文本溢出部分以省略號代替
}
2. 多行文本溢出顯示
.layout {overflow: hidden; // 溢出隱藏text-overflow: ellipsis; // 文本溢出部分以省略號代替display: -webkit-box; // 將對象作為彈性伸縮盒子模型顯示-webkit-line-clamp: 4; // 控制最多顯示幾行-webkit-box-orient: vertical; // 設置伸縮盒對象子元素的排列方式
}
精靈圖(雪碧圖)
background-position：x,y;(X和Y一般都取負值)把圖片背景移動到自己需要的位置
)
![[圖解]企業應用架構模式2024新譯本講解24-標識映射3](http://pic.xiahunao.cn/[圖解]企業應用架構模式2024新譯本講解24-標識映射3)
C/C++版本)
