html和css基础整理
生活随笔
收集整理的這篇文章主要介紹了
html和css基础整理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html，css基礎
文檔基礎結構
DOCTYPE：
document type 聲明文檔類型 告訴瀏覽器以何種規范解析當前文檔 html：以H5的標準解析文檔結構標簽
<html></html>作為頁面中一個最大的標簽，包裹住其他小標簽，稱其為根標簽<head></head>文檔的頭部，在這其中必須包含tilte標簽<title></title>文檔的標題，給頁面設置標題<body></body>文檔發主體，頁面中的內容基本都放在改標簽里。html：
根標簽，網頁中最大的標簽，有且僅有一個。所有的標簽必須寫在HTML內lang="en" language：定義當前文檔語言類型en：english 英語head：
head：頭標簽，設置字符集，說明性的標簽，頁面標題，外部文件，內部樣式表等...charset:一般寫在head標簽內的第一行，保證頁面標題不會出現亂碼。UTF-8:一種通用的編碼方式，解決中文亂碼。body：
body:設置網頁的主體內容。基礎標簽
標題標簽：h1最大，h6最小。默認樣式：上下外邊距，字體大小，字體樣式。 emeat語法：h${標題$}*6 $:從1開始生成 *n 生成到n.{}:定義標簽中的文本。p：段落文本標簽，塊元素，所有的文本標簽都是行內/行元素，p除外。默認的外邊距，上下16px --><p>段落標簽</p>div:標準的塊標簽，默認寬度100%，高度由內容撐開。(沒有內容高度為“0”)行內元素：寬高均由內容決定。span:普通文本標簽。屬性
contenteditable="true"//定義可編輯文本 <bdo dir="rtl">大衛佛海v哦i文化</bdo>//顯示位置，rtl即right to left從右往左 draggable="true" //定義可拖拽文本 target="_blank" //打開新窗口 title="首先是教學設計" //懸浮提示文本標簽：
<span>普通文本</span><strong>語義化加粗文本，強調文本的重要性。</strong><b>加粗文本，不具有強調意義。</b><em>具有強調意義，表示文本的重要性。</em><i>斜體文本，不具有強調意義。</i><del>具有強調刪除意義，表示被棄用的內容</del><s>刪除線文本</s><ins>具有強調意義，表示新增的內容</ins><u>插入文本</u><small>小號字體</small><big>大號字體</big><!-- 計算機輸出文本 --><code>電腦自動輸出</code><kbd>鍵盤碼</kbd><samp>計算機代碼樣式</samp><var>變量</var><pre>預格式文本。尊敬的XXX:pre標簽可以定義有格式的文本，文本中的所有空格以及換行都可以顯示。其他標簽之內的文本與換行只能編譯為一個英文空格符，標簽之間的換行也會被編譯為一個英文空格符。真厲害。亞亞子??</pre><sup>上標</sup><sub>下標</sub>語義化結構標簽
語義化結構標簽：根據內容的結構"內容語義化"，選擇合適的標簽"標簽的語義化"。作用:便于開發者閱讀，讓瀏覽器爬蟲和機器更好的解析。優點：1. 在沒有css樣式的情況下，頁面也能呈現出很好的內容結構"代碼結構".2. 代碼結構清晰，方便閱讀和團隊合作開發。3. 方便搜索引擎識別頁面結構，有利于SEO(搜索引擎優化)。4. 方便其他設備解析(屏幕閱讀器，盲人閱讀器，移動設備)，以語義化的方式渲染頁面。<nav>標記導航，僅對頁面中重要的鏈接群使用</nav><header>頁眉，通常包含LOGO，主導航，全站鏈接以及搜索框...</header><main>頁面主要內容，一個頁面只能使用一次。</main><aside>側邊欄，定義所有內容之外的部分或之外的一組鏈接等。</aside><section>區域，一段，定義頁面中的章節或塊，代替div</section><footer>頁腳，只有當父元素是body時才是整個頁面的頁腳</footer>超鏈接和路徑
a:超鏈接 href：url,網頁鏈接。target:設置新超鏈接的打開方式。_self:默認值，默認在當前標簽頁打開超鏈接。_blank:新建標簽頁打開超鏈接。title:光標懸停時的提示文本。相對路徑:./:查找同級文件../:查找上級文件../../:查找上兩級文件絕對路徑:C:/Users/mac/Desktop/開課第一天/02-標簽.html圖片
img:圖像、圖片src:圖片資源路徑，支持網絡圖片或本地圖片。alt:圖片加載失敗時的提示文本列表標簽
列表標簽ul:unorder list 無序列表li：list 列表選項。ol:order list 有序列表dl：define list 自定義列表dt：define title 自定義標題dd：define details 自定義詳情表單標簽
表單標簽 form 創建表單。action：定義表單數據發往何處。method：定義發送數據的方式。get/post。單行文本輸入框 type:定義表單的類型text：文本輸入框password:密碼輸入框number:數字輸入框tel:手機號碼輸入框email:郵箱輸入框color:顏色選擇器file:文件選擇器type屬性
<input type="text"><input type="password" name="" id=""><input type="number" name="" id=""><input type="tel" name="" id=""><input type="email"><input type="color"><input type="file"><!-- 年月日選擇器 --><input type="date"><!-- 本地年月日時選擇器 --><input type="datetime-local"><!-- 周選擇器 --><input type="week"><!-- 月選擇器 --><input type="month"><p><!-- 單選，必須定義相同的name，才可以實現單選。 -->男 <input type="radio" name="sex">女 <input type="radio" name="sex"></p><p><!-- 多選 --><input type="checkbox"></p><!-- 進度條 --><input type="range"><!-- 圖片按鈕 --><input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"><button>普通按鈕</button><!-- 提交按鈕，value:定義按鈕的值。 --><input type="submit" value="登錄"><!-- 按鈕 --><input type="button"><!-- 重置按鈕 --><input type="reset" value="清空"><!-- 隱藏的輸入框 --><input type="hidden">列表選擇器：
select：列表選擇器size:屬性用于定義多選時，所顯示選項的個數，默認值：4.multiple：允許多選。optgroup：選項組label:定義選項組標題。option：選項value：選項的值.disabled:屬性用于設置禁用的標簽。selected:屬性用于定義默認選中項。HTML中定義，屬性與值相同時，可以省略屬性值。name:屬性用于定義表單控件的名稱。多行文本輸入框：
多行文本輸入框 name:定義表單控件的名稱。cols:一行所顯示英文字符的個數，顯示的列數。rows:顯示的行數(取值為英文字符的行數)fieldset:對表單內的元素分組。legend:對不同的分組進行文字說明。<fieldset><legend>標題</legend>datalist:此標簽與文本輸入框結合，相當于一個下拉框，input既可以手動輸入，又可以下拉選擇。將datalist的id屬性值賦值給input的list屬性，即可實現。<datalist id="record"><option value="HTML5.0"></option><option value="CSS3.0"></option><option value="Javascript"></option></datalist>CSS樣式
1. 行內樣式表。2. 內嵌樣式表。3. 外聯樣式表。引用方式的優先級。正常情況下：行內樣式 > 內嵌樣式 > 外聯樣式非正常情況下：內嵌樣式和外聯樣式會有瀏覽器的執行順序問題(最后引用的會覆蓋之前的樣式。)CSS選擇器
>父子選擇器 父元素>子元素 空格代表后代選擇器 ~ 代表兄弟選擇器 + 相鄰兄弟選擇器 瀏覽器是怎么解析css選擇器的：-css選擇器的解析是從右往左解析的。如果從左至右匹配，發現不符合規則需要回溯，會損失很多性能。-若從左至右匹配，先要找到所有的左邊第一個節點，對應的每個節點上尋找其父元素節點直到找到根元素或滿足條件的匹配元素，則結束這個分支遍歷。偽類選擇器
-根據序號查找元素，稱之為 序號選擇器。-根據類型查找元素序號選擇器
:nth-child(n)根據：前指定的標簽選擇第n個為此標簽的元素。如果是even(2n+1)就是偶數,odd(2n+1)就是奇數(正數) :nth-last-child(n)倒數第n個子元素 :last-child(n)選擇最后一個：前指定的子元素。 :first-child(n)選擇第一個：前指定的子元素。 :only-child 選擇唯一的子元素。--------以下根據標簽類型選擇 :first-of-type根據標簽類型選擇第一個元素。 :last-of-type根據標簽類型選擇最后一個元素。 :nth-of-type(n)根據指定標簽類型選擇第n個標簽(正數) :nth-last-of-type(n)根據指定標簽類型選擇倒數第n個標簽(倒數)擴展
1、:first-child：表示選擇第一個子元素，如 .box1 p:first-child 表示選擇box盒子中的第一個p2、：nth-child():表示選擇任意序號的子元素，如 .box2 p:nth-child(3)表示選擇box2盒子中的第三個p。另外nth-child還可以寫成an+b的形式，如 .box2 p:nth-child(3n+2)表示從第二個p開始，每三個p選擇一個 ps：2n+1等價于odd及奇數，2n等價于even及偶數3、:nth-of-type：表示選擇同種標簽指定序號的子元素，如 .box3 p:nth-of-type(3)表示box中p類型的第三個p4、:nth-last-child()：表示倒數選擇5、:nth-last-of-type()：表示倒數選擇交集選擇器
每個選擇器都有自己的權重值，簡稱權值，權值越大，優先執行。 id選擇器>class選擇器/偽類/屬性>元素選擇器 100 10 1選擇器優先原則：!important(10000) > 行間樣式(1000) > ID 選擇器(100) >class 選擇器｜偽類選擇器｜屬性選擇器(10) >元素選擇器｜偽元素選擇器(1) > 通配符選擇器｜子選擇器選擇器｜相鄰兄弟選擇器(0)權重高的那條樣式對元素起作用，權重相同的，后寫的樣式會覆蓋前面寫的樣式。選擇器權值可以相加 !important(無條件優先執行，權重10000)交集選擇器：選擇器連接使用，多個選擇器選擇一個標簽。并集選擇器
, 用逗號分隔多個選擇器，同時選擇多個標簽*:not(body,html)意思指選擇除了html，body標簽之外的其他標簽偽元素選擇器
::selection 定義光標選中時的樣式 ::first-letter 為某個元素中的第一個字符設置樣式，有符號會連帶符號，可以加個空格解決 ::first-line 定義首行文本的樣式 ::placeholder 定義input的placeholder屬性的樣式 ::before {content:"" //content必須設置，如果不需要插入文本可以為""} 在某個元素之前插入一些內容 ::after 在某個元素之后插入一些內容 //如果同時使用了before和first-letter兩個為元素，第一個字要從before里面的內容開始算起 //first-letter和first-line兩個偽元素不適用于行內元素，在行內元素內兩個選擇器均失效 //first-letter的優先級高于first-linetarget目標偽類選擇器
實現點擊a標簽，改變div(目標元素可點擊)的樣式 如何實現？綁定a與div，將div的id屬性值賦值給a標簽的href屬性。 target目標偽類選擇器查找目標元素時觸發：target焦點取消默認樣式
:focus{outline: none; }顏色明暗亮度調節
opacity:取值0-1，越靠近1越亮背景圖片
定義背景圖片如何重復顯示。repeat:重復顯示no-repeat:不重復顯示repeat-y:重復y列repeat-x:重復x行 background-position: x軸 y軸;取值：number(px/%)、關鍵字。關鍵字：left right top bottom center background-position: center center; vh:view height 視口高度(可視區域的高度) 100vh=可視區域總高 vw:view width 視口寬度(可視區域的寬度) 100vw=可視區域總寬 background-position-x:-100px(50%) background-position-y:300px(50%) background-size:寬 高； 取值： number(px/%)、關鍵字 關鍵字：cover contain一個值，值為寬度，高度默認等比例縮放（默認值為auto）contain：背景圖片等比例縮放，直至高度或寬度填充滿整個容器為止，容器可能留白cover：背景圖片等比例縮放直至高度和寬度填充滿整個容器為止，圖片可能顯示不完全 background-attachment: fixed;固定背景圖片，不隨頁面的滾動二滾動，此屬性只對body有效 兩個背景圖片的設置css3之前，一個元素只能設置一個背景圖片。 使用方式： 1.定義多重背景時，需要給background-image設置多個url(),多個值以","隔開。 2.每個圖片都具有背景圖的任何屬性，每個屬性都需要定義多組值，一組值對應一張背景圖，多組值之間使用","隔開。 background-image: url(圖片1),url(圖片2);background-position: left bottom,0 0;background-size: 500px auto;background-repeat: no-repeat,repeat;背景漸變
background-image: linear-gradient(red, black) linear-gradient（漸變方向，顏色，顏色......）線性漸變 漸變方向:to bottom從上往下(默認值)to top從下往上to left從右往左to right從左往右to top left從左上角，后面可以依次推 deg 角度取值 0deg -360deg 六點方向開始順時針方向，0deg即六點方向正下方，從下往上看90deg即九點方向正左方，從左往右看180deg即十二點方向正上方，從上往下看270deg即三點方向正右方，從右往左看徑向漸變
radial-gradient(中心形狀單詞，顏色，顏色....) 如: background-image: radial-gradient(circle,red,blue)可以定義每種顏色的分布空間，如下例子： background-image: radial-gradient(circle,red 20%,blue 10%,blue 30%)文本樣式
@font-face 自定義字體 自定義字體名稱 font-family src:url()引入字體 字體默認大小為16px。 字體粗細font-weight：bold（400-700，400和noemal是正常字體，700粗體） text-align：justify 文本兩端對齊 文本水平對齊方式：laft左對齊right右對齊center居中justify多行文本兩端對齊 line-height: 行高，文本垂直居中，值與邊框高度相等，行高沒有單位時，取值為font-size的倍數。單位%，相對font-size letter-spacing： 字間距 空格在css中叫做“后代選擇器”在html中叫做“空格分隔符” text-indent 文本縮進 rem相對根元素 em相對父元素text-decoration-line: ;文本裝飾線的位置，必須值underline：下劃線；linr-through：中劃線/文本貫穿線overline：上劃線text-decoration-color: ;文本裝飾線的顏色，可選值，不定義時默認取值coler的顏色text-decoration-style: ;文本裝飾線的樣式，可選值。不定義時默認值為solid(實線)。 dotted(點線) dashed(虛線)double(雙線)wavy(波浪線)none(無樣式，去掉下劃線)以上三個屬性的簡寫方式，叫做“復合屬性”text-decoration：bule wavy underline 3px；顏色，樣式，位置，邊框大小。最后一個值可能不被瀏覽器支持，刪除即可，但一部分可以支持大小寫轉換
text-transform：capitalize:首字母大寫uppercase：轉換為大寫lowercase：轉換為小寫方向逆轉
direction: rtl;從右往左right to left ltr：從左往右left to right direction:定義文本的閱讀方向，與html中的dir屬性一致unicode-bidi:; 可以改變direction不能逆序的情況，對direction的一個增強normal:默認值bidi-override:文本的一個重寫排列方式
writing-mode:; 定義文本在水平或垂直方向的排布方式值：vertical-lr:文本垂直方向排列，從左往右讀(IE瀏覽器不能用此值，可以用tb-lr)vertical-rl文本垂直方向排列，從右往左讀(IE瀏覽器不能用此值，可以用tb-rl)horizontal-tb:默認值，文本水平方向排列，從上往下閱讀 white-space:; 屬性定義空白符如何顯示值：pre:多個空格不會合并;換行符有用,且文字不會受到盒子寬度的影響.文本怎么寫就怎么顯示，保留文本所有的空格和換行（文本一行排列不下不會自動換行）pre-line：只保留換行不保留空格pre-wrap：保留空格與換行，文本一行排列不下時會自動換行nowrap; 強制內容在一行顯示，文本不換行text-overflow: 文本溢出如何顯示。ellipsis：溢出的文本顯示為省略號溢出文本顯示省略號的條件：1. 固定的寬度2.文本不換行3. 溢出隱藏4.溢出文本為省略號文本陰影
text-shadow:; 文本陰影：值一：X軸陰影，正值左側，負值右側陰影。必須值值二：Y軸陰影，正值底部陰影，負值頂部陰影。必須值 值三：陰影的模糊程度，值越大陰影越模糊。可選值值四：陰影的顏色，可選值盒子模型
外邊距
包括 margin-border-padding-contentmargin：外邊距，盒子之間的距離。取值1-4個值一值：上下左右外邊距二值：上下 左右外邊距三值：上 左右 下外邊距四值：上 右 下 左外邊距margin定寬居中只對塊元素有效，行和行內塊元素無效bottom：下外邊距top：上外邊距left：左外邊距right：右外邊距邊框
border-color:;顏色，可選值width:;寬度，可選值style:;樣式，必須值(double：雙線 dotted：點線 dashed：虛線 soild：實線)復合寫法：border：bule dashed 10px;左邊框顏色：border-left-color:; 下邊框：border-bottom:none; 去邊框 text-align：justify 文本兩端對齊注意：設置border / padding會改變盒子的總寬高度 默認情況下盒子總寬高的計算方式。width=內容寬height=內容高總寬=左右邊框+左右內邊距+內容寬總高=上下邊框+上下內邊距+內容高box-sizing：屬性用于修改盒子的計算方式content-box：盒子默認計算方式border-box：修改盒子的計算方式（固定盒子總寬高，不會被填充撐大）修改后盒子總寬高的計算方式邊框圓角
border-1:;值為半徑，取值100%為圓一組值可以用/分開，比如50px/100px。/前后為兩個半徑值畫的圓焦點連接即為樣式10px 20px/10px 20px相當于10px/10px 20px/20px即兩組半徑畫的圓相交而得10px 20px 30px 40px/10px 20px 30px 40px相當于10px/10px 20px/20px 30px/30px 40px/40px即四組值半徑畫的圓相交而得取值50px;即x軸50px，y軸50px為半徑畫圓，取值50px/100px即第一個圓50px，第二個100px為半徑畫圓取四個值：一個值：四個角兩個值：左上右下 右上左下三個值：左上 右上左下 右下四個值：左上 右上 右下 左下border-top-left-radius：定義左上圓角（其余角也可以這樣定義）盒子陰影
box-shadow值一：x軸陰影，正值右側陰影，負值左側陰影值二：y軸陰影，正值底部陰影，負值頂部陰影值三：陰影的模糊程度 值越大陰影越模糊值四：陰影的寬度。值五：陰影的顏色值六：inset 內層陰影外邊距合并/塌陷
外邊距的合并發生在塊級元素之間。(浮動，絕對/固定定位元素除外)只會在垂直方向發生，水平方向不影響1. 相鄰的兄弟之間的外邊距合并2. 父元素的第一個子元素的上外邊距/最后一個子元素的下外邊距會穿透父元素，表現為父元素的外邊距兩個外邊距的值設置/margin合并規則：同為正值取最大一正一負值相加同為負值取最小 margin合并解決方案：塊狀格式化上下文：BFC如果一個元素符合BFC的條件會成為一個獨立的容器，容器內部的元素會垂直的沿著其父元素的邊框排列，和外部元素會不影響觸發BFC的條件：1. 浮動元素：float 除了none之外的值。2. 絕對/固定定位元素：position：absolute/fixed3. display值為inline/inline-block，只要不是塊級元素4. overflow：除了visiable之外的值(hidden/auto/scroll)都可以解決方案一：給父元素設置為塊狀格式化的元素BFC(觸發BFC條件) 解決方案二：給父元素添加邊框(border) 解決方案三：給父元素添加padding(值不小于零)元素的特性
根據元素不同的特性可以將元素劃分為三類：1.行元素(文本類標簽（不含p標簽）)多個行元素相鄰時會在同一行排列，一行排列不下會自動換行。默認寬高皆由內容決定設置寬高無效可以轉換塊或者行內塊元素margin上下無效，左右有效2.塊元素(結構標簽，標題標簽，p標簽，列表標簽，td....)默認情況下，塊元素獨占一行，垂直排列默認寬高100%，高度由內容決定可以設置寬高可以轉換行或者行內塊元素margin上下左右均有效3.行內塊元素(input button img taxtarea select)多個行內塊元素相鄰時會在同一行排列，一行排列不下自動換默認寬高皆由內容決定(一部分標簽例外)可以設置寬高只能轉換塊元素不能轉換行元素margin上下左右均有效 元素之間可以相互轉換(行內塊不能轉換為行內)display：inline：(轉換為行元素)block：(轉換為塊元素，或者顯示元素和none互用)none：(隱藏元素)inline-block：(轉換為行內塊元素)定寬居中
定寬居中只對塊元素有效
margin左右left/right取值為auto左側auto表示水平剩余空間在元素左側使元素居右右側auto表示水平剩余空間在元素左側使元素居左 auto取值只對塊元素有效左右同時取值auto元素水平居中，或margin:0 auto;行，行內塊元素水平居中需要給父元素設置樣式，單獨給行，行內塊元素設置無效浮動布局
float：浮動東布局，可以使浮動的元素向左或向右移動，直到遇到父元素的邊界或浮動的兄弟元素。left：向左移動right：向右移動 浮動的元素會脫離文檔流，如果父元素沒有定義高度，這時父元素的高度為零，父元素之后的元素布局會發生改變。文本會避開浮動的元素，形成圖文環繞的效果。float-left元素從左往右排列 float-right元素從右往左排列清除浮動
浮動的元素脫離文檔流會影響布局，所以要清除浮動 清除浮動的方法:1.給父元素添加高度（適合父元素有固定高度的情況）2.給父元素添加overflow-hidden;（注意：溢出的內容會隱藏，適用于不隱藏的情況）3.給使用浮動的元素之后添加一個空塊，為其設置clear:both;（弊端：頁面使用較多會出現較多的空的塊元素)基線對齊
什么是基線？元素水平排列時，垂直對齊的位置叫做“基線”。空塊/img的基線在底部。文本的基線在四線三格的第三條線。（baseline（此值只針對有文本的屬性）基線在四線三格的第三條線)多行文本元素的基線在最后一行文本四線三格的第三條線。定位
position:static 靜態定位默認的定位方式，靜態定位的元素在文檔流內從上往下(塊)、從左往右(行/行內塊)排列。元素默認的定位方式叫做“流式布局”relative 相對定位absolute 絕對定位fixed 固定定位固定定位，將元素固定到指定的位置，不隨頁面的滾動而滾動。參照物：瀏覽器可視區域。使用left，right， top，bottom屬性偏移元素的位置top/left優先級高于 right/bottomsticky 粘性定位calc(計算函數)
支持計算不同單位的值，運算符與值之間必須使用空格隔開。先乘除后加減，小括號修改運算優先級 left：calc(50% - 100px);效果等同于 left：50% margin-left:-100pxtop：calc(50% - 100px);效果等同于 left：50% margin-left:-100px相對定位
relative：相對定位，定位的元素不會脫離文檔流使用left、right、top、bottom屬性偏移元素參照物：相對定位元素初始位置絕對定位
absolute：絕對定位，定位的元素會脫離文檔流使用left、right、top、bottom屬性偏移元素參照物：自定義。如何讓自定義：1.必須是絕對定位的上級元素2.上級元素必須要有定位方式（static除外）絕對定位欸的元素會逐級向上查找有定位方式的上級元素，以有定位方式的上級元素作為參照。如果上級元素都沒有定位方式，則最終查找至body為止。以body作為參照。非定位元素，百分比相對于父元素絕對定位元素，百分比相對參照物如果父元素本身沒有定位方式則為其添加相對定位，因為相對定位不會脫離文檔流，不會影響布局如果上級元素本身有定位方式，則無需為其修改/添加粘性定位
sticky:可以被認為是一個固定定位和相對定位的結合。在視口滾動到小于top值時，元素是一個相對定位，大于top值時，元素為固定定位注意：1.需要在嵌套中使用粘性定位（非body嵌套）父元素的高度不能低于粘性定位的高度2.必須指定top屬性（0也可以）3.粘性定位元素只在其父元素之內生效。4.父元素不能使用overflow：hiddenflex布局(彈性布局)
flex布局，又稱彈性布局，用來為盒模型提供最大的靈活性，任何一個容器都可以指定為flex布局采用flex布局的元素，成為flex容器，簡稱“容器”，它的所有子元素自動成為容器成員，稱為flex項目，簡稱“項目”。容器內存在兩條軸線，水平的主軸和垂直的交叉軸。 display:flex;定義水平方向，水平方向就是主軸。垂直方向就是交叉軸定義垂直方向，垂直方向就是主軸。水平方向就是交叉軸主軸和交叉軸是根據自己定義的，可變的。默認水平的主軸和垂直的交叉軸注意：設為flex布局后，子元素的float，clear和vertical-align，屬性將失效容器屬性（父級）
flex-direction:;屬性用于定義項目的排列方向，默認值：row 主軸為水平方向，起點在左端row-reverse：主軸為水平方向，起點在右端column：主軸為垂直方向，起點在上端column-reverse：主軸為垂直方向，起點在下端justify-content:屬性用于定義項目在主軸的對齊方式。flex-start:項目主軸起點對齊，默認值。flex-end：項目主軸終點對齊。center:項目主軸居中。space-between:項目在容器中兩端對齊，項目之間間距相等space-around：項目之間間距相等，是項目到容器兩端的兩倍。space-evenly:項目之間間距和項目到容器兩端間距相等align-items：屬性定義項目在交叉軸的對齊方式normal:默認值，項目不設置高度，高度=容器高度。baseline:對齊文本的四線三格的第三條基線對齊。flex-start:容器交叉軸起點對齊flex-end:交叉軸終點對齊center:交叉軸居中對齊。多行彈性布局，彈性布局的項目默認不換行flex-wrap:;屬性用于定義項目的換行方式nowrap:默認值，單行，項目不換行wrap：多行，項目換行，首行在上方wrap-reverse：多行，項目換行，首行在下方align-content:;屬性用于定義多條軸線在交叉軸的對齊方式stretch：默認值，當項目沒有高度時，多行的高度占滿整個容器。有高度時，無效.flex-start:多條軸線交叉軸起點對齊。flex-end:多條軸線交叉軸終點對齊。center:多條軸線居中對齊space-between: 軸線兩端對齊，軸線之間的距離相等 space-around: 軸線之間間距相等，是軸線到兩端的兩倍space-evenly:間距均相等注意：此屬性只對多行有效 ------------------------------------------------------ justify-content: space-evenly可以使每個元素之間和元素距離邊距的距離都相等，但是兼容性比較差（iphone的SE上不支持，會失效，相當于沒有設置）， space-evenly將剩余空間平均分割，例如有5個元素，這樣就有6個相同寬度的間隔空間，間隔空間的數量等于元素的數量加一。有5個元素，justify-content: space-between最左邊和和最右邊的元素分別占據最左邊和最右邊的空間，然后剩余空間平均分割，這樣就有4個相同寬度的間隔空間，間隔空間的數量等于元素數量減一。項目屬性（后代）
order:屬性用于定義項目的排列順序，值越小項目越靠前(支持負值)，默認為0 align-self：屬性允許單個項目有與其他項目不同的對齊方式。align-self屬性的優先級>align-items屬性 flex-grow:屬性用于定義項目的放大比例，主軸存在剩余空間時項目才會放大， 如果每個項目的值都為1時，將均分主軸剩余空間 flex-shink:定義項目的縮小比例，默認值為1，表示當空間不足時。所有項目等比例縮小，值為0時，表示當空間不足時。項目不縮小，取值越大，表示當空間不足時，項目縮小的越快越厲害 flex-basis:屬性定義項目所占據的空間，優先級高于width。顯示與隱藏
display:none 隱藏/不占據原來空間 display: block; 顯示visibility:hidden 隱藏/占據原來空間 visibility: visible; 顯示opacity:0; 透明/取值0-1，0為完全透明，1為不透明，0.5半透明，后代元素都會繼承，rgba只改變背景顏色的透明度 opacity: 1; 顯示精靈圖
一張小圖片填滿容器。小圖片的高度=100%*100% 大圖的寬度100%*n個小圖寬度 大圖的高度100%*n個小圖高度設置精靈圖的好處:將多張較小的圖片放在一張大圖上，減少瀏覽器對服務器的請求z-index堆疊層級
z-index：堆疊層級，對非定位元素和靜態定位無效 取值正值，在沒有設置層級的元素之上 取值負值，在沒有設置層級的元素之下 只能取整值，不能取小數 值越大，元素越靠上2D轉換&過渡
2D轉換平移 縮放 旋轉transform：2d轉換，使...轉換/變化translate:(X軸，Y軸)平移 translateX:水平X軸平移 正值向右 負值向左translateY垂直Y軸平移 正值向下 負值向上translateZ往前平移 正值向前 負值向后(只在三維空間有效)origin:屬性定義轉化的基準點取值：center top/bottom left/right/number類型的值rotate(360deg);旋轉，單位deg正值，順時針旋轉負值，逆時針旋轉 可以和origin結合取點scale();縮放，值>1——>放大 值<1——>縮小一個值的話，影響寬高兩個值的話，值一寬度，值二高度 transform: skew(30deg, 120deg);設置傾斜效果 過渡transition-property: 規定應用過渡的css屬性。可以指定某個css屬性應用過渡效果，如width，height；可以指定所有css屬性應用過度效果，alltransition-duration:設置過渡的時間 單位s/ms opacity:.1;設置透明度transition-timing-function: ease;緩動函數"時間曲線”ease：默認值，逐漸減速ease-in：加速ease-in-out：先加速后減速ease-out：減速linear：勻速transition-delay: 2s;設置過渡效果延遲的時間以上四個屬性的簡寫復合屬性transition：值順序：過渡所花費的時間 過渡延遲時間 過渡的css屬性。 緩動函數"時間曲線” 應用過度的時間和應用過度的屬性必須值 后倆值無順序，filter濾鏡
filter：濾鏡，給圖片添加濾鏡效果值：grayscale():給圖片添加特效，變成灰色 范圍0-100%，值越大，圖片越灰sepia():褐色，圖片為復古風，范圍0-100%，opacity():圖片透視，取值0-1，0完全透明，0.5半透明，1不透明hue-rotate()：色相轉換，用來改變圖片的色相，單位degcontrast()：明暗的對比度，明暗程度，值越小圖片越暗，值越大圖片越亮brightness():曝光率，值越大顏色越亮invert():反色，類似照片底片效果blur():圖片的模糊程度，值越大越模糊，pxdrop-shadow(x軸10px，y軸10px，模糊度10px，顏色red)：可以根據圖片輪廓添加陰影，值和盒子陰影一樣3D轉換
transfrom-style:preserve-3d;設置元素是在2d平面內，還是三維空間中值：flat：默認值，指定元素在2d平面內preserve-3d;指定元素是在三維空間內translateZ():Z軸平移 正值向前 負值向后（需要定義觀察者距離和三維空間）backface-visiblity:的屬性定義元素的背面/反面 面向觀察者時是否可見值：visible，默認值，背面可見hidden，背面不可見perspective:100px;設置透視距離，觀察者到平面的距離,值越大距離越遠，值越小距離越近perspective-origin:定義觀察者的位置，類似transform-origin屬性；transfrom：rotate3d(1,1,1,90deg)：前三個值代表xyz軸，0表示不旋轉，1表示旋轉，后面是旋轉的角度響應式布局-媒體查詢
什么是響應式布局？
響應式布局指的是同一個頁面在不同的屏幕尺寸下有不同的布局方式。傳統的開發方式是pc端開發一套移動端開發一套。而使用響應式布局只要開發一套就夠“缺點是css樣式較重”。
響應式布局實現方案 —— 媒體查詢
CSS3 Media Query(媒體查詢) @media可以根據不同的屏幕尺寸設置不同的樣式，頁面適用于PC端，移動端“在調整瀏覽器試圖可以查看”。媒體查詢可以用于檢測設備“viewpoint(視圖窗口)的寬度和高度，旋轉方向(橫屏或豎屏)，分辨率大小”。
width與device-width
width通常指的是視口寬度。device-width指的是屏幕的物理寬度。
例如：一部手機的屏幕分辨率是1136 * 640，豎屏的device-width是640，橫屏時是1136，移動端的屏幕基本上都是全屏的所以一般width=device-width。但是height與device-height的情況不一樣(瀏覽器上方的地址欄和下方的工具欄不算近視圖窗口高度之內)，所以一般的媒體查詢不采用height。
語法規則
直接在css樣式中添加
@media mediatype 操作符 (media featrue) { CSS-code}
以@media開頭，然后指定設備類型“mediatype”，接著添加操作符，然后在()中規定媒體/設備特征，最后是{代碼塊“書寫格式與css相同(屬性名：值)”}
邏輯運算符
- and：一般在擁有多個媒體特征的時候使用，必須條件都滿足的情況下會執行樣式。
- not：用于排除設備類型，或條件取反。
- only：指定某個媒體設備。
- all：適用于所有設備。
設備類型 mediatype
- screen：適用于電腦，平板，智能手機。
- all：適用于所有類型。
- print：適用于打印機和打印預覽。
- speech：適用于屏幕閱讀器。
媒體特性 Media Feature
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等于0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等于0 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| grid | 用來查詢輸出設備是否使用柵格或點陣。 |
| height | 定義輸出設備中的頁面可見區域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區域高度。 |
| max-monochrome | 定義在一個單色框架緩沖區中每像素包含的最大單色原件個數。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width 定義輸出設備中的頁面最大可見區域寬度。 | |
| min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率。 |
| min-color | 定義輸出設備每一組彩色原件的最小個數。 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數。 |
| min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區域高度。 |
| min-monochrome | 定義在一個單色框架緩沖區中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小分辨率。 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度。 |
| monochrome | 定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等于0 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大于或等于寬度。 |
| resolution | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序。 |
| width | 定義輸出設備中的頁面可見區域寬度。 |
| min-device-pixel-ratio | 最小設備像素比。 |
| width/height ： | 定義輸出設備中的 頁面可見區域寬度/高度，輸出的是你的網頁可見區域的寬高。 |
| device-width/height ： | 定義輸出設備的屏幕可見寬/高度。不管你的網頁是在safari打開還是 |
CSS實現媒體查詢
實現響應式布局需要使用媒體查詢。 媒體查詢語法：@media mediatype 連接符/邏輯運算符 查詢條件{滿足查詢條件，執行的樣式}@media 媒體查詢mediatype：設備類型 screen：適用于電腦、平板、智能手機。邏輯運算符：and，所有條件都要成立，才能執行{}中的樣式。not，不查詢指定設備，條件取反(反條件)only，指定某個設備類型orientation：判斷設備類型是橫屏還是豎屏landscape：查詢橫屏portrait：查詢豎屏min-width 最小寬度，相當于>=如min-width:600px 屏幕>=600時，才執行樣式max-width，最大寬度，相當于<=如max-width:1200px 屏幕<=1200時，才執行樣式min-height:最小高度max-height:最大高度媒體查詢代碼寫在最下面注意：@media查詢多個不同屏幕時，依照屏幕尺寸從大到小排列@media查詢的樣式要放置在樣式表底部webapp
Native App開發
Native App開發即我們所稱的傳統APP開發模式（原生APP開發模式），
該開發針對iOS、Android等不同的手機操作系統要采用不同的語言和框架進行開發，
該模式通常是由“云服務器數據+APP應用客戶端”兩部份構成，APP應用所有的UI元素、
數據內容、邏輯框架均安裝在手機終端上。
Web App開發
Web App開發即是一種框架型APP開發模式（HTML5 APP 框架開發模式），
該開發具有跨平臺的優勢，該模式通常由“HTML5云網站+APP應用客戶端”兩部份構成，
APP應用客戶端只需安裝應用的框架部份，而應用的數據則是每次打開APP的時候，
去云端取數據呈現給手機用戶。
移動端的解決方案：
1，專用型：PC端頁面和移動端頁面分別開發。當用戶請求頁面時，服務器先判斷用戶的設備類型，
然后根據用戶設備類型返回響應類型的頁面，PC端一套代碼，移動端一套代碼。(代表有百度，餓了么)
2，通用型：只設計一個頁面，頁面本身能夠根據不同的瀏覽器尺寸，顯示為不同的樣式。
一套代碼適應PC端和移動端，這種頁面叫做響應式布局頁面（蘋果官網，bootstrap）
meta標簽
meta標簽提供關于HTML文檔的元數據。元數據不會顯示在頁面上，
但是對于機器是可讀的。它可用于瀏覽器（如何顯示內容或重新加載頁面），
搜索關鍵詞等，或其他 web 服務。
meta 標簽用于網頁的與中
屬性
- name：常用的選項有Keywords(關鍵字) ，description(網站內容描述)，author(作者)，robots(機器人向導)等。
- http-equiv：可用于代替name項，常用的選項有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie設定)，Window-target(顯示窗口的設定)，content-Type(顯示字符集的設定)等。
- content：根據name項或http-equiv項的定義來決定此項填寫什么樣的字符串。
用以說明生成工具（如Microsoft FrontPage 4.0）等；
頁面關鍵詞(告訴搜索引擎頁面是與什么相關的)。content規定一個逗號分隔的關鍵詞列表 - 相關的網頁。將最重要的關鍵詞放在最前面，讓相關的關鍵詞相鄰。
版權
description 規定頁面的描述。搜索引擎會把這個描述顯示在搜索結果中。定義關鍵詞的meta標記項放在定義描述的meta項之前。
定義網頁作者
Robots(機器人向導)用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
- robots是一組使用逗號(,)分割的值，
- 通常有如下幾種取值：none，noindex，nofollow，all，index和follow。
- all：文件將被檢索，且頁面上的鏈接可以被查詢；
- none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
- index：文件將被檢索；
- follow：頁面上的鏈接可以被查詢；
- noindex：文件將不被檢索；
- nofollow：頁面上的鏈接不可以被查詢。
申明編碼方式
一個頁面過上一定的時間，自動轉到另一個頁面或者站點去。content中的6表示時間，單位為秒，url=后面是你要轉向的網址。
讓網頁每隔一段時間刷新一次，10秒刷新一次。
告訴瀏覽器網頁所識別的文件類型及語言類型，比如說，我們要讓瀏覽器識別HTM/HTML類型的簡體中文網面。
Web App開發需要增加的標簽或設置：
- H5文檔類型：
-
viewport 視口設置：
viewport視窗，窗口。viewport的寬度決定了html這個標簽的寬度
width 寬度，可設為px或 device-width
height 高度，可設為px或 device-height，通常不用設置
比如：width=device-width表示我們將viewport的寬度設為跟設備一樣寬，
以iPhone6為例，iPhone6的橫向分辨率為750，轉換之后所代表的css寬度為375px，
這個時候viewport的寬度就為375px，也即是html的寬度為375px。
一般設計稿也是以375或者750來出圖，這樣就可以很方便的在設備上實現頁面了。
initial-scale 初始的縮放比例（默認設置為1.0）
minimum-scale 允許用戶縮放到的最小比例（默認設置為1.0）
maximum-scale 允許用戶縮放到的最大比例（默認設置為1.0）
user-scalable 是否允許用戶通過雙指縮放（默認設置為 no 或者 0，因為我們不希望用戶放大縮小頁面) -
指定頁面為 Web App,全屏模式
- 指定 Web App 系統狀態欄樣式：
隱藏狀態欄/設置狀態欄顏色：只有在開啟WebApp全屏模式時才生效。
content的值為default | black | black-translucent 。
- 指定 Web App 的標題：添加到主屏后的標題
- 禁止自動識別手機號/郵箱地址
- 指定 Web App 圖標：
- 指定 Web App 啟動圖片：
視口 viewport 單位
移動互聯網發展起來之后，引入了 vw、vh 兩個單位，以方便 Web App 和手機頁面的開發。
使用 vw、vh 能很好地解決寬度、高度適配問題，比使用 % 單位更高級！
vw、vh可以理解為：
相對于視口的寬度。視口被均分為100單位的vw
相對于視口的高度。視口被均分為100單位的vh
即：
x vw = x% * (viewport width)
x vh = x% * (viewport height)
即可以指定 height: x vh;
也可以指定 height: x vw;
比單純指定 height: x %; 要有用得多！
動畫
animation-name: ;定義動畫名稱 animation-duration: ;定義動畫持續時間 animation-delay:n ; 負值：動畫n秒后開始，執行n秒后的樣式，之前的不執行(跳過幾秒) 正值：延遲n秒之后開始 animation-timing-function: ;規定動畫的速度曲線默認是“ease”取值：ease：默認值，逐漸減速ease-in：加速ease-in-out：先加速后減速ease-out：減速linear：勻速 animation-iteration-count: ;定義動畫執行的次數，可以是number值(數字)/infinite(無限播放) animation-fill-mode: forwards;//規定動畫結束的狀態backwards：動畫播放結束，回到初始狀態forwards：動畫播放結束，停留至最終狀態。 animation:4s infinite ease-in 2s bgcolor動畫屬性的簡寫方式。animation 前一個時間值，動畫所持續的時間。第二個時間值，動畫延遲的時間必須值：動畫名稱，動畫所持續的時間animation-direction: alternate;//規定動畫是否在下一周期逆向播放。值：normal:默認值，始終從起點到終點播放alternate:交替播放。alternate-reverse:元素反轉方向，再交替播放。如:元素默認在左側，則反轉至右側，再進行交替播放。animation-play-state: paused;規定動畫是否正在運行或停止，默認running運行，paused停止@keyframes 動畫名稱{} @keyframes定義關鍵幀動畫。 form{}初始樣式 //可以百分比代替 等同于0% to{}結束樣式 //等同于100%動畫庫
1. 引用動畫庫<link rel="stylesheet" href="./animate.css">2. 給需要動畫的元素添加class關鍵字 animate__animated 3. 將所需要的動畫名稱 添加給 class屬性。<div class="animate__animated animate__backInDown">哈哈哈</div><p class="animate__animated animate__jackInTheBox">animate.css</p><p class="animate__animated animate__fadeInLeftBig">animate.css</p>鼠標樣式
cursor:;設置鼠標的變化default:默認正常鼠標指針pointer:鼠標變為小手形狀wait:加載效果help:幫助選擇效果crosshair:十字準星，精準選擇效果se-resize:拉伸效果，對角調整s-resize:垂直調整ne-resize:右上角調整col-resize:表格樣式列調整row-resize:表格樣式行調整zoom-out:縮小鏡zoom-in:放大鏡move:上下左右調整，移動選擇效果text:文本輸入標 文本選擇/輸入效果url("圖片地址"),auto; 設置指針為自定義圖片效果,需要設置下兩個屬性值:auto/default，不然不顯示，推薦32*32的小圖片圖片要是png/gif格式IE瀏覽器不支持gif/png等圖片背景渲染
background-clip:;Z屬性用于控制背景顏色的渲染區域border-box:默認值，渲染border之內的區域(包含border)padding-box:渲染padding之內的區域(包含padding)content-box:渲染content之內的區域(包含content)重復性線性漸變
background-linear-gradient()重復線性漸變邊框裁剪
border-image:;邊框圖片border-image-slice:;設置四個方向的裁剪距離，值為numberfill:邊框圖片填充內容部分。默認邊框圖片填充border部分，中間的圖像部分會被丟棄 border-image-width:;定義邊框圖片填充的寬度。如果不定寬度，那么默認是元素border的寬。值：numberborder-image-outset:length|number;作用：規定邊框圖像超過邊框盒的量。length：表示設置邊框圖像（border-image）與邊框的距離，默認為0。number：代表相應的border-width的倍數。說明：1、border-image-outset屬性規定邊框圖像超出邊框盒的量，包括上下部和左右部分。如果忽略第四個值，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同。2、border-image-outset屬性不允許使用任何負值。音頻視頻
video:視頻 audio:音頻音視頻必須要添加controls屬性。controls:播放控件。 autoplay:自動播放，必須定義muted才有效。muted:靜音播放loop:循環播放preload:是否自動加載(如果使用該屬性，則表示視頻在頁面加載是進行加載，并預備播放)視頻格式:ogg、MP4、MPEG4、WebM格式source:定義多個媒體資源加載規則：瀏覽器支持第一個視頻類型則執行第一個，不支持第一個則匹配第二個視頻類型，依次類推...注意:當使用source標簽定義多個媒體資源時，video/audio標簽不能使用src屬性，否則source將不會被加載。src:媒體資源路徑type:定義媒體類型mark:標記標簽，定義帶有記號/標記的文本，需要突出某段文本時使用。繼承性
inherit:;繼承，指定某個屬性繼承父元素的樣式如width:inherit;繼承父元素的寬background-color:inherit;繼承父元素的背景顏色 子元素定義了或者自帶默認樣式優先級最高，默認不繼承，只能自己加樣式，不會去繼承父元素的樣式表格
table定義表格caption定義表格標題tr定義表格中的一行行th 定義表格的標題行td 表格塊thead表頭 tfoot頁腳 tbody主體rowspan：行合并，用于設置一個單元格占幾行。 colspan：列合并，用于設置一個單元格占幾列。border=1 定義表格的邊框 cellspacing 是邊框與邊框之間的間隙大小； cellpadding 是邊框與其內容的間隙大小；值：number數字border-collapse: collapse;設置單元格合并值：separate：默認值，不合并collapse：合并 label標簽表格table可以自定義寬高；writing-mode: vertical-lr;垂直排列去邊框通用：table table tr>td:first-child {border-left: none;}table table tr:first-child>td {border-top: none;}table table tr>td:last-child {border-right: none;}table table tr:last-child>td {border-bottom: none;}邊框補充凹凸效果
border-style:groove;3D凹槽效果 border-style:ridge; 3D壟起效果溢出隱藏
當元素固定寬高，不被內容撐開時，如果內容的寬高超出元素本身的寬高，超出元素邊界的內容任然會顯示。overflow: 設置元素溢出部分內容的顯示方式，默認為顯示。值：visible：默認值：內容不會被隱藏，溢出的內容出現在元素大小之外。hidden：溢出的部分不顯示。scroll：溢出的內容可以滾動查看，出現xy軸。auto：隱藏溢出內容，根據內容多少顯示出現滾動條。overflow: hidden; overflow: scroll; overflow: auto; overflow: visible; overflow-x: 設置水平方向溢出內容的顯示方式。overflow-x: scroll; overflow-y: 設置垂直方向溢出內容的顯示方式。 overflow-y: scroll; 文本不換行 white-space: nowrap; text-overflow: ellipsis; 文本溢出以省略號...為后綴。 resize: 允許用戶調整元素的大小。值：none：默認值，不能調整元素的大小。horizontal：允許用戶調整元素的寬度。vertical：允許用戶調整元素的高度。both：允許用戶調整元素的寬高。HTML特殊轉義字符列表(放在 實體名稱 實體編號的上面點擊一下就有顯示)
最常用的字符實體
Character Entities
| 半方大的空白（半個中文寬度) | ? | ? | |
| 全方大的空白(中文空格) | ? | ? | |
| 不斷行的空白格(英文空格) | ? | ? | |
| < | 小于 | < | < |
| > | 大于 | > | > |
| & | &符號 | & | & |
| " | 雙引號 | " | " |
| ? | 版權 | ? | ? |
| ? | 已注冊商標 | ? | ? |
| ? | 商標（美國） | ? | ? |
| × | 乘號 | × | × |
| ÷ | 除號 | &pide; | ÷ |
ISO 8859-1 (Latin-1)字符集
多選框改變樣式
用label綁定多選框label::after{、background-color:red;可以改變多選框}內嵌網頁
iframe內嵌式網頁，內嵌網頁內容多的時候會顯示滾動條。(行內塊元素，不是塊元素，margin:0 auto無效，可以設置display變成塊元素)src:內嵌網頁路徑 frameboeder:定義內嵌網頁是否顯示邊框，0顯示1不顯示scrolling：是否顯示滾動條，auto(默認值，內容超出時顯示，反之不顯示)，no不顯示滾動條src屬性所加載的頁面鏈接，可作為初始頁面顯示a超鏈接:target屬性定義超鏈接的打開方式。_self:在瀏覽器當前標簽頁打開_blank:瀏覽器的新建標簽頁打開。取值為iframe的name值，則表示在指定的內嵌網頁中打開鏈接。 a標簽的target屬性綁定iframe的name的值，可以設置a標簽的頁面在iframe中打開總結
以上是生活随笔為你收集整理的html和css基础整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10桌面便签小工具下载,可固定电脑
- 下一篇： ISO9001-2008标准（中英文对照