HTML和CSS简单整理
前言：hello 家人們，本文章用于自己整理筆記使用，邏輯會有點混亂，不建議小白入手從上往下查看，有什么指導歡迎評論區暢聊 (｡･?･)ﾉﾞ
基本結構
結構 – html
表現 – css
行為 – js
html的常用標記
文本標題（h1-h6）
注：文本標題標簽自帶加粗，有自己的文本大小，并且獨占一行，有默認間距
<p></p>段落文本
標識一個段落(段落與段落之間有段間距)
換行(br)
<hr />水平線
加粗：
<b>
<strong>
傾斜：
</em>強調文本
<i>傾斜文本
<u>文本下劃線
<s>刪除線
<del>刪除線
<sub>下標
<sup>上標
CSS
層疊樣式表 英文全名：cascading style sheets WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁信息的顯示進行控制，簡單說就是如何修飾網頁信息的顯示樣式。
引入CSS
兩種方式：
第一種：
<link rel="stylesheet" type="text/css" href="目標文件的路徑及文件名全稱" /> (鏈接的方法寫給html文件)rel（relation）：用于定義文檔關聯，表示關聯樣式表；
type：定義文檔類型；
第二種：
<style type="text/css">@import url(目標文件的路徑及文件名全稱);</style>兩種引入外部樣式表link和import之間的區別：
差別1：
本質的差別：link屬于XHTML標簽，而@import完全是CSS提供的一種方式。
差別2：
加載順序的差別：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。
差別3：兼容性的差別：@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
差別4：使用dom(document object model文檔對象模型 )控制樣式時的差別：當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的
第三種：
行內樣式（內聯樣式）-- 標簽內部寫style屬性
CSS選擇器
層級：
e>f 子選擇器
e+f 相鄰兄弟選擇器
e~F 通用
E:hover>F f是e的后代 f的樣式發生改變
E:hover+F F是緊挨著E f的樣式發生改變
E:hover~F F是E后面的元素 f的樣式發生改變
屬性：
[屬性名]
標簽[屬性名]
(E)[屬性名=“屬性值”]
(E)[屬性名~=“屬性值”]
定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”不能不寫
(E)[屬性名^=“屬性值”] 以什么開頭的屬性名
(E)[屬性名$=“屬性值”] 以什么結尾的屬性值
(E)[屬性名*=“屬性值”] 包含屬性名不要求單獨詞，也就是可識別屬性值
(E)[屬性名|=“屬性值”] 以-開頭，zh-cn
偽類：
結構偽類：尋找子標簽
：first-child 選擇第一個元素
：last-child-選擇最后一個元素
：nth-child(){}小括號里面可以是 even/odd/number(數字）/2n-1 選擇第幾個或者是某一類型
:nth-last-child(){}小括號里面可以是 even/odd/number(數字）/2n-1 從后面開始數選擇第幾個或者是某一類型
：first-of-type 選擇某一類型的第一元素
：last-of-type 選擇某一類型的最后一個元素
:nth-of-type(){}小括號里面可以是 even/odd/number(數字）/2n-1 同一類型的第幾個或者具備某一條件的元素
;nth-last-of-type(){}小括號里面可以是 even/odd/number(數字）/2n-1 從后面開始數選擇同一類型的第幾個或者具備某一條件的元素
：only-child 元素是父級元素里面的唯一一個元素
：only-of-type 元素是父級元素里面同一類型的唯一一個子元素
：root匹配根元素html
:empty匹配空元素
目標偽類選擇器
E:target 選擇匹配E的所有元素，且匹配元素被相關URL指向
UI狀態偽類選擇器
E:enabled 匹配所有用戶界面（form表單）中處于可用狀態的E元素
E:disabled 匹配所有用戶界面（form表單）中處于不可用狀態的E元素
E:checked 匹配所有用戶界面（form表單）中處于選中狀態的元素E
E:selection 匹配E元素中被用戶選中或處于高亮狀態的部分
案例：多選框隱藏，lable背景色變色
否定偽類選擇器
E:not(s) （IE6-8瀏覽器不支持:not()選擇器。）
匹配所有不匹配簡單選擇符s的元素E
動態偽類選擇器
E:link：
鏈接偽類選擇器
選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上
E:visited ：
鏈接偽類選擇器
選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上
E:active：
用戶行為選擇器
選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點和按鈕上
鼠標按下的超鏈接的狀態
E:hover：
用戶行為選擇器
選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover
鼠標劃過超鏈接時的狀態
E:focus 用戶行為選擇器 選擇匹配的E元素，而且匹配元素獲取焦點：
焦點之后
群組選擇器 ，逗號
選擇器權重：
/* 通配符選擇器: * 代表頁面中所有標簽，權重是0000 /
/ id選擇器 > 類名選擇器 > 標簽選擇器 /
/ 標簽選擇器權重： 0001 /
/ 類名選擇器權重： 0010 /
/ id選擇器權重： 0100 /
/ 行內樣式權重： 1000 /
/ !important權重最高: 10000 */
繼承樣式的權重為0000
偽元素選擇符的權重為0001
包含選擇符的權重：為包含選擇符的權重之和
偽類選擇符的權重為0010 如 :link :visited…
CSS文本屬性
文本大小
{font-size:12px;}單位還可以是em，是父級元素的font-size的倍數；/系統默認的字號大小為16px
16px/ppi為標準字體大小默認值,即1em.默認情況下，1em=16px,0.75em=12px;
文本字體
{font-family:字體1，字體2，字體3；}
多個字體瀏覽器首先會尋找字體1、如存在就使用改字體來顯示內容，如在字體1不存在的情況下，則會尋找字體2，如字體2也不存在，按字體3顯示內容，如果字體3 也不存在；則按系統默認字體顯示；
當字體是中文字體時，需加雙引號；
當英文字體由多個單詞組成時，需加雙引號如（“Times New Roman”）
文本顏色
{color:顏色值;}red/#f00/rgb(255,0,0)
用十六進制(是計算機中數據的一種表示方法)表示顏色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
顏色模式：光色模式
R G B
FF 00 00
顏色值的縮寫：
當表示三原色的三組數字同時相同時，可以縮寫為三位;
當用十六進制表示顏色值時，需要在顏色值前加“#”
# fa 00 00
RGB表示方式：color:rgb(255,0,0);
rgba：顏色的透明color:rgba(255,0,0,0.5);透明度值表示范圍0-1之間，如：0.1，0.2
文字加粗
font-weight:bolder(更粗的)/bold（加粗）/normal（常規）/100—900;從細到粗的變化**
文本傾斜
font-style：italic/oblique/normal（取消傾斜，常規顯示）;
italic和oblique都是傾斜的文字, 但區別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果.
水平對齊方式
{text-align:left左/right右/center居中/justify兩端對齊(在部分瀏覽器中，對于中文不起作用);} 只針對文本或圖片**
垂直對齊方式
{vertical-align:top上/bottom下/middle居中/baseline基線（某些特定的元素類型起作用）;}
文字行高
{line-height:normal/50px;}line-height:20px; line-height:2em; (當行高的單位省略時，默認為em)
當單行文本的行高等于容器高時，可實現單行文本在容器中垂直方向居中對齊；
當單行文本的行高小于容器高時，可實現單行文本在容器中垂直中齊以上；
當單行文本的行高大于容器高時，可實現單行文本在容器中垂直中齊以下
文本修飾
text-decoration:none/underline/overline/line-through
none:沒有修飾
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線
首行縮進
{text-indent:20px/2em;}
1）text-indent可以取負值；
2）text-indent屬性只對第一行起作用。
font復合屬性
font:weight style size/line-height family
單行文本溢出 超出的部分變成省略號
容器寬度：width：200px； white-space: nowrap; 文本不換行 text-overflow: ellipsis; 超出的部分變成省略號 overflow: hidden; 超出的部分隱藏起來擴展知識點：實現多行文本溢出時產生省略號：不能給高度！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
挨個兒介紹：
text-overflow:
? 屬性值clip 裁切，超出的部分被截取
? 屬性值ellipsis 超出的部分變成省略號
white-space:屬性值: normal默認值，文本自動換行，有換行和連續多個空格時，只保留一個空格
nowrap文本不換行，有換行和連續多個空格時，只保留一個空格
pre保留文本中的換行和空格
pre-line有多個連續空格時，只保留一個，但是保留換行符。
pre-wrap保留一部分空白符序列，但是正常的進行換行
CSS列表
無序列表
ul,li有序列表
<ol> <li>自定義列表
<dl> <dd><dt>屬性：
list-style:none;去掉列表符號
disc/square
circle
邊框的屬性和屬性值
邊框樣式：*border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)*none(去掉邊框);
背景
background-color 背景顏色
background-image: url() 背景圖片
background-repeat 背景平埔 repeat平埔 no-repeat不平鋪 repeat-x橫向平埔 repeat-y 縱向平埔
background-position: 背景定位 兩個屬性值： 水平位置 豎直位置 數值可以為百分比，px，也可以為left,rihgt,top,bottom,center
background-attachment : scroll (隨內容一塊滾動)/ fixed（固定，不隨內容一塊滾動，根據可視窗口固定位置；）
背景圖的大小：
conver:覆蓋的意思，等比例放大這個圖片，鋪滿這個盒子為止，容易出現裁剪效果
contain:包含的意思，等比例放大這個圖片，只要有圖片撐滿某一個方向就結束，容易出現留白區域
多背景寫法
超鏈接標簽a
href屬性： 鏈接的路徑可以為本地相對路徑或者網絡中的路徑
target屬性：
? 默認值 _self 在當前窗口打開新頁面
? _blank 在新的窗口打開頁面
title屬性： 鼠標放到標簽上時出現的提示語
CSS控制單詞換行屬性
word-break
keep-all不允許文字斷開
break-all允許在單詞內換行 可以強行截斷英文
word-wrap
單詞換行
break-word在長單詞或URL地址內部進行換行 將內容在邊界內換行不截斷英文
text-transform 控制文本大小寫
capitalize首字母大寫
uppercase全部轉成大寫
lowercase全部轉成小寫
font-variant
把英文字母轉成大寫，之前是小寫的字母字體大小不變
small-caps
<div>AAAaaaaaaaaaaaaaaabbbbbbccccccccccccccccc</div>div{font-variant:small-caps;}[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mvzJJeXr-1653535299599)(file://C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220302121539472.png?lastModify=1653495956)]
盒模型注意事項(margin重疊問題)
margin值的解析：左右邊界累加，正常文檔流的上下邊界重合。
在正常文檔流下，子元素（塊，獨占一行的）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(子元素或父元素不設置任何浮動及定位的屬性，或父元素不設置邊框的情況下。)
margin的上下間距重疊問題
現象：2個上下并列結構的時候,如果給上面的盒子添加了margin-bottom,同時給下面的盒子添加了margin-top,此時應該解析的垂直間距是2者之和,但是瀏覽器解析的時候,會按照最大數值去解析。
解決方法：A、給下面的盒子添加父元素且添加聲明overflow:hidden;
浮動
1、浮動會脫離網頁文檔，與其他不浮動的元素發生重疊
2、但是不會與文字發生重疊，文字會環繞浮動元素顯示
使用float出現高度塌陷的原因
1.沒有給父標簽添加高度
2.所有子標簽全部浮動，標簽浮動后脫離文檔流，不會再頁面中占據位置，導致父標簽高度塌陷
解決高度塌陷
1.給父標簽添加固定高度
2.給父標簽添加overflow:hidden
3.在父標簽結尾添加一個空標簽（不能浮動）并且設置
4.給父標簽添加偽元素
::after{content: '';display: block;clear: both;}清除浮動只是改變元素的排列方式，該元素還是漂浮著，不占據文檔位置。
清除浮動
給父元素添加聲明overflow:hidden;(缺點：會隱藏溢出的元素)**
在浮動元素下方添加空塊元素,并給該元素添加聲明：clear:both;height:0;overflow:hidden;
萬能清除浮動法：
選擇符:after{ content:""; clear:both; display:block; height:0; visibility:hidden; overflow:hidden; }(缺點：偽元素選擇器在IE7及以下瀏覽器不識別，所以此方法只能解決IE8 及以上瀏覽器高度塌陷問題）
元素類型
塊級元素
獨占一行
添加的寬高可以生效
可以正常添加margin-top/bottom,padding-top/bottom
A）塊狀元素在網頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區域，B）默認情況下，塊狀元素都會占據一行；默認情況下，塊狀元素會按順序自上而下排列。C）塊狀元素都可以定義自己的寬度和高度。D）塊狀元素一般都作為其他元素的容器，它可以容納其它內聯元素和其它塊狀元素。我們可以把這種容器比喻為一個盒子
注:p標簽是一個塊元素，但它只能作為內聯元素（inline element）的容器；
標題標簽之間不能互相嵌套
常用的塊狀元素包塊div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,table,tr,td等；
行內元素
可以與其它行內元素共處一行
添加寬高不生效
在添加margin-top/bottom,padding-top/bottom時可能無法正常顯示
A) 內聯元素的表現形式是始終以行內逐個進行顯示； 橫著排B) 內聯元素沒有自己的形狀，不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定，它的最小內容單元也會呈現矩形形狀；C)內聯元素也會遵循盒模型基本規則，但是對于margin和padding個別屬性值不生效
常見的內聯元素如：a,span,i,em,strong,b,br,u,del,s,sub,sup等
行內塊元素
可以與其它行內元素/行內塊元素共處一行
添加寬高可以生效
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點
常見的行內塊元素如：img，input，select，textarea等
display 可以更改元素類型
block,inline,inline-block,flex,list-item…
塊級標簽中li標簽的display屬性值為list-item
只有元素類型是行內塊或者設置了display：inline-block的時候才支持vertical-align屬性
定位
position 定位屬性和屬性值
固定定位fixed
脫離標準文檔流
固定在屏幕的某個位置【以瀏覽器的視口作為參照物】，會讓行內元素轉化為塊級元素，也可以讓之前margin:0 auto 失效，要想讓margin:auto重新起作用，必須要配合邊偏移量值為0一起使用
粘性定位sticky
粘性定位沒有脫離標準文檔流
當top值大于前面元素高度時，在滾動到父元素之前正常排布，當滾動到父元素時，這時候按照正常的固定定位執行
position :sticky[必須要配合邊偏移量一起使用否則無效]
特性:在有滾動條的父元素中才可以執行向對應的效果，當前面有元素時，會先判斷top的跟前面元素剩余高度值的大小，如果top值小于剩余高度值會先隨著界面滾動，知道剩余高度值等于top屬性值時才會執行固定定位;當top屬性值大于前面元素高度時，一滾動到父元素的區域立馬執行固定定位不會脫離標準文檔流
margin: e auto依然生效不能讓span設置寬度高度
相對定位relative
沒有脫離文檔流
相對定位遵循正常的文檔流，將依據right，top，left，bottom（相對定位）等屬性在正常文檔流中相對自身位置進行偏移；其層疊通過z-index屬性定義.
絕對定位absolute
脫離了文檔流
margin-方位:參考為參照物的寬度的百分比//*margin-left: 5e%;
width/left/right/margin-方位:參考的是參照物的寬度height/top/bottom:參考的是參照物的高度
定位元素的層級屬性
z-index : auto |number
設置定位對象的層疊順序。
auto：默認值。遵循結構，后寫的定位元素層的順序靠上。
number:無單位的整數值。可為負數，數值越大，層的順序越靠上
說明：
此屬性僅僅作用于 position 屬性值 relative 或 absolute,fixed ，sticky的對象。
錨點連接的語法和應用場景
命名錨點的作用：在同一頁面內的不同位置進行跳轉。
錨點鏈接語法：
1)給元素定義命名錨記名
語法：<標記 id=“命名錨記名”> </標記>
2)命名錨記連接
語法：
透明
IE9以下瀏覽器寫法：filter:alpha(opacity=value);取值范圍 0-100之間的整數值
兼容其他瀏覽器寫法：opacity:0.5; (value的取值范圍0-1 0.1,0.2,0.3-----0.9—1)
rgba(255,255,0,0.5)(最后一位值表示透明，取值范圍0-1) 只支持IE8以上的瀏覽器
表格
<table border="5px" style="text-align: center;vertical-align: middle;" cellpadding="10px" cellspacing="10px"><tr bgcolor="pink"><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td><td>2222222</td></tr><tr><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td></tr><tr><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td><td>4444444444444</td></tr></table>table
寬度 width
高度 height
邊框 border
邊框顏色 bordercolor
背景顏色 bgcolor
文字水平對齊 align=“left或right或center”
文字垂直對齊 valign=“top或middle或bottom";
cellspacing="單元格與單元格之間的間距“ 必須給table
cellpadding=“單元格與內容之間的空隙” 必須給table；如果沒有起作用，請查看是否設置了padding:0;
tr
height高度；高度不能同時加在tr和td上，如果同時使用取兩者中的較大值
背景顏色bgcolor
文字水平對齊align:left/center/right
垂直對齊valign:top/middle/botton
th
width寬度
height高度
背景顏色bgcolor
文字水平對齊align:left/center/right
垂直對齊valign:top/middle/bottom
表格CSS樣式
border-spacing:20px; ：單元格間距(該屬性必須給table添加) 表示單元格邊框之間的距離， 不可取負值
border-collapse:separate/collapse;合并相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開)默認值； collapse(邊框合并)用在日歷里面
empty-cells:show/hide;定義當單元格無內容時，是否顯示該單元格的邊框區域；show：顯示 ；hide：隱藏；用在日歷里面
table-layout:auto/fixed;是否固定單元格的寬度；fixed：固定寬，定義時則寬度會平均分配；高度則會隨內容變化；當table上有高度時在使用table-layout；
caption-side:top/bottom；表格標題位置；左右對齊text-align:left/right；
合并單元格屬性
colspan=“所要合并的單元格的列數”合并列;必須給td
rowspan=“所要合并單元格的行數”合并行; 必須給td
表格行分組
thead,tbody,tfoot
表單
<form action="" method=""> <!-- min 最小值 max 最大值 step 數字間隔-->數字輸入框<input type="number" min="" max="" step="" value="" />滑塊控件<input type="range" min="" max="" step="" value="" /><p><!-- multiple 可以書寫多個郵箱，郵箱號之間以逗號隔開 --><!-- 注意：在標簽屬性中，如果屬性名和屬性值一樣，可以省略屬性值，只寫屬性名 -->郵箱： <input type="email" multiple name="" id="" value="" /></p><p><input type="url" name="" id="" value="" /></p><!-- 日期表單 --><p>日<input type="date" name="" id="" value="" /></p><p>周<input type="week" name="" id="" value="" /></p><p>月<input type="month" name="" id="" value="" /></p><p>時間<input type="time" name="" id="" value="" /></p><p>本地時間<input type="datetime-local" name="" id="" value="" /></p><p>(世界統一時間,蘋果瀏覽器中可以使用)時間<input type="datetime" value="" /></p><input type="submit" id="" name="" value="提交" /></form> <form action="" method="" novalidate="novalidate"><!-- novalidate 取消驗證 只能給form標簽添加 --><p><!-- required 必填校驗，輸入框提交時不能為空 -->必填輸入框:<input type="text" required="required" id="" value="" /></p><p><!-- placeholder 占位符 -->占位符:<input type="text" placeholder="提示文本" id="" value="" /></p><p><!-- maxlength 最大長度 -->最大長度為10:<input type="text" maxlength="10" id="" value="" /></p><input type="submit" value="提交"></form>Form中的獲取數據的兩個方式get和post的區別？
get請求通常是從服務器上獲取數據，post請求通常表示向服務器提交數據。
get請求發送的數據都寫在地址欄上，用戶可見。而post請求發送的數據用戶不可見。
get請求不能提交大量的數據，但post可以，因此不要混用。
建議:
? get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；
? 在做數據查詢時，建議用Get方式；而在做數據添加、修改或刪除時，建議用Post方式；
BFC
Block Formatting Contexts (塊級格式化上下文)
通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
成為BFC
根元素 html默認就是一個BFC
float的值不為none 單純的div不是BFC，如果添加了浮動就是BFC
overflow的值不為visible 單純的div不是BFC，如果添加了overflow：hidden等就是BFC
display的值為 inline-block/ table-cell/ table-caption/ flex/ inline-flex
position的值為absolute或fixed
有什么影響
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰box的margin會發生重疊（應用：防止marin重疊）
BFC的區域不會與float box發生重疊（應用：自適應兩欄布局）
計算BFC的高度時，浮動元素也參與計算（應用：清除內部浮動）
BFC內部的Box會在垂直方向，一個接一個的放置。
每個元素的margin box的左邊會與包含塊border box的左邊相接觸（對于從左到右的格式化，否則相反），即使存在浮動也會如此。
BFC就是頁面上的一個獨立容器，容器里面的元素不會影響到外面的元素
寬高自適應
自適應
網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據窗口或子元素自動調整，這就是自適
寬度自適應高度自適應
寬度自適應
元素寬度的默認值為auto
1.塊標簽不寫寬度 2.使用% 3.設置最小寬度和最大寬度
高度自適應
元素高度的默認值 {height:auto;}
浮動元素的高度自適應
父元素不寫高度時，子元素寫了浮動后，父元素會發生高度塌陷
方法1：給父元素添加聲明overflow:hidden;(缺點：會隱藏溢出的元素)
方法2:在浮動元素下方添加空塊元素,并給該元素添加聲明：clear:both;height:0;overflow:hidden;
（缺點：在結構里增加了空的標簽，不利于代碼可讀性，且降低了瀏覽器的性能）
方法3:萬能清除浮動法
選擇符:after{content:" ";clear:both;display:block;height:0;visibility:hidden;/overflow:hidden;}
(缺點：偽元素選擇器在IE7及以下瀏覽器不識別，所以此方法只能解決IE8 及以上瀏覽器高度塌陷問題）
偽元素
:after(與content屬性一起使用，定義在對象后的內容。)如：div:after{content:url(logo.jpg);} div:after{content:“文本內容”;}
:before:與content屬性一起使用，定義在對象前的內容如：div:before{content:“在其前放內容”;}
:first-letter:定義對象內第一個字符的樣式
:first-line:定義對象內第一行文本的樣式
元素的顯示與隱藏和透明
display:none
隱藏后的元素不占頁面空間，后面元素上去補位置
visibility:visible(顯示)/hidden(隱藏)
隱藏元素，但是隱藏后的元素仍占頁面空就按
opcity:0
隱藏元素，占頁面空間
height:0px;/不設置高度
隱藏元素可以,不占頁面空間,
弊端:如果里賣弄有文本的話,文本會留在原來的位置;可以配合font-size:0px/oveflow:hideen/visibility:hideen
使用縮放====縮放比例為0
transform:scale(0)
透明:
transparent(透明色)===背景
rgba(0,0,0,0)====背景
a==alpha透明度0-1 0代表的是透明；1代表的是不透明
opacity======透明度的意思
這個透明度取值范圍0-1；不單純只透明背景顏色，還能透明內容，文本，圖片，邊框等等
0=透明 ???1=不透明
IE瀏覽器的兼容 filter:alpha(opcity=數值) 數值：1-100
最小最大寬高
min-height屬性：最小高度；
min-width:最小寬度
max-height:最大高度
max-width:最大寬度
窗口自適應
盒子根據窗口的大小進行改變
設置方法：html,body{height:100%;}
iframe使用
作用：iframe是用來在網頁中插入第三方頁面，早期的頁面使用iframe主要是用于導航欄這種很多頁面都相同的部分，這樣在切換頁面的時候避免重復下載。
語法：
frameborder=“1/0” 1代表有框架邊框 /0代表無框架邊框
滾動條：scrolling=“yes/no/auto” yes :有 no:無 auto：自動
表示超鏈接的目標地址在框架中打開
calc()函數的使用
calc() 函數：用于動態計算長度值。
需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 “+”, “-”, “*”, “/” 運算；
calc()函數使用標準的數學運算優先級規則；
h5新增標簽
header頭部：表示頁面中一內容區域或整個頁面的標題
nav導航欄：表示頁面中的導航鏈接部分
main主要部分：
footer尾部：表示頁面中一內容區域或整個頁面的腳注
section：表示頁面中的一個區塊
article：表示頁面一塊與上下文無關的獨立內容（類似section某一具體的介紹）
aside：側邊欄
figure：
表示一段獨立的內容內容，使用figcaption元素為其添加
標題（第一個或最后一個子元素的位置
類似dl,dt,dd
行內塊標簽在高度100px的父元素中上下居中，父標簽代碼怎么設置，子標簽怎么設置
父標簽：line-height:100px
子標簽：vertical-align:middle
新增video audio
video標簽屬性
autoplay 自動播放屬性(在谷歌和火狐瀏覽器中被禁用)
controls 控制臺
loop 循環播放
poster 視頻第一幀圖片（封面）
preload 預加載
可以設置寬度，高度
muted靜音
audio標簽屬性
autoplay 自動播放屬性(在谷歌和火狐瀏覽器中被禁用)
controls 控制臺
loop 循環播放
preload 預加載，在有autoplay屬性的時候，不起作用
autoplay不兼容使它生效必須添加muted
CSS的comment樣式
html,body{
height:100%;
}
a{
text-decoration=none;
color:#000;
}
li,ol,ul{
list-style:none;
}
img{
vertival-align:top;
}
清除浮動
.clearfix::after{
content:‘’;
display:block;
clear:both;
}
常用瀏覽器
常用瀏覽器：火狐（firefox) ,IE,谷歌(chrome),safari(),Opera()
safari是蘋果瀏覽器
IE -ms-
firefox -moz-
歐朋瀏覽器 -o-
谷歌/蘋果 -webkit-
漸進增強，優雅降級
文本陰影
陰影左右位置，陰影豎直位置，陰影模糊程度，陰影顏色
漸變
徑向漸變：
background:linear-gradient(度數或者to right top[右上角],red,right [顏色后面空格可加百分數占比或者px大小值])
兼容性：
background：-ms-linear-gradient(left,red,yellow);
background：-moz-linear-gradient(top,red,yellow);
background：-webkit-linear-gradient(bottom,red,yellow);
background: radial-gradient(circle closest-side at 30% 50%,red 10%,yellow 20%);線性漸變：
border:1px solid #000000;
radial-gradient（center,circle/ellipsis,不同尺寸[],red 15%,green 60%,blue 100%）
radial-gradient(30% 50%按中心點偏移發散這里是在中心點左偏移20%,closest-side,red,yellow,blue)
farthest-side最遠邊
closest-corner最近角
farthest-corner最遠角
transition過渡
transition
transition-property：過渡的樣式，默認是all
transition-duration：運動時間、
transition-delay：延遲時間
transition-time-function：運動形式【linear ease ease-out ease-in ease-in-out cubic-bezier(貝塞爾曲線) steps（）實現一個關鍵逐幀動畫的功能】
transform 2D轉換
none 默認
translate() 位移
rotate() 旋轉
scale() 縮放
skew()傾斜 單位deg
perspective()景深
matrix()矩陣
transform：rotate3d(0,0,1,30deg)定義3D旋轉
transform：scaleX（n）scaleY（n）scaleZ（n）n取負值時元素會進行翻轉（順時針180deg）然后在進行縮放
transform：skew X（）X軸傾斜轉換 skewY（）Y軸傾斜轉換
例：skew(30deg,30deg)
運動基點：
transform-origin：可以是百分數 px center、left、right、top、bottom
合用
transform:translate(150px,150px) scale(1.5);
動畫
animation:play（動畫名稱） 10s linear 2s 執行次數（1一直執行 infinite無限執行）
animation-name：play
animation-duration：10s
animation-timing-function:linear
animation-delay：2s
animation-iteration-count:執行次數 infinite
@keyframes name(這里的name和animation-name一樣){
from{
動畫開始第一幀的樣式
}
to{
動畫最后一幀的樣式
}
還可以寫作{
百分比{
}
}
}
animation-direction：是否定義應該輪流反向播放動畫；alternate：動畫會在奇數次數（1，3，5等）正常播放
，而在偶數次數（2，4，6等）向后播放。
animation和transition的區別？
相同點：都隨時間改變元素的屬性值
不同點：
需要觸發一個事件才會隨時間改變其CSS屬性
animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素CSS的屬性值，達到一種動畫效果，CSS3 的animation就需要明確的動畫屬性值。
CSS中的3D相關屬性
CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數；
CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；
CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數；
transform-style:flat（默認）/preserve-3d（表示所有子元素都在3D空間中呈現）;
需要設置在父元素中，并且高于任何嵌套的變形元素
perspective：200px;景深
設置用戶與元素3D空間Z平面之間的距離。
perspective-origin：用來決定perspective屬性的源點角度
backface-visibility屬性
旋轉背面是否可見：backface-visibility：visible 反面可見/ hidden 反面不可見
CSS彈性盒子
標準盒模型
怪異盒模型
屬性：box-sizing
屬性值：content-box標準盒
屬性值：border-box怪異盒
flex:
父元素成為容器 子標簽成為項目
flex布局只會影響第一代子標簽
屬性：
用來設置子標簽排列順序的
彈性盒模型中子標簽的排列順序按照主軸方向排列
父元素：
1 display：flex：
inline-flex：
2 flex-direction 設置主軸方向 row column column-reverse從下往上 row-reverse從右往左
3 justify-content設置項目在主軸上的排列方式
屬性值：
flex-start默認
flex-end
space-between左邊右邊靠邊 中間間隔相等
space-around 環繞對其 左右空間間隔是中間間隔的一半
center 主軸中間排列
4 align-items 設置容器在側軸上的排列
屬性值：
stretch高度拉伸盛滿側軸父元素高度
flex-start項目在側軸起始段對其
flex-end項目在側軸末尾對其
center側軸中間對其
baseline基線對齊
5 flex-wrap換行
屬性值：
nowrap默認不換行
wrap換行
wrap-reserve反轉行
6 align-content定義主軸在側軸方向上的排列（限制：有多條主軸可用）
屬性值：
默認streth主軸評分側軸空間
flex-start側軸起始段排列行和行之間沒有間隔
flex-end側軸末尾端排列
center側軸中間排列
space-around
space-between
order占比
align-self
定義某個項目自身在側軸上的對齊方式
屬性值：
auto 默認值 繼承父標簽align-items的屬性
flex-start
flex-end
center
9 flex
復合屬性 設置或檢索彈性盒模型對象的子元素如何分配空間
flex：1 = 1 1 0%
flex:auto = 1 1 auto
flex:none = 0 0 auto
flex: 0 auto 或者flex:initial = 0 1 auto 初始值
10 flex三個屬性值介紹
flex-grow：規定項目將相對于其他項目進行擴展的量
主軸上有空余，則把空余的空間給當前項目的長度
flex-shrink：一個數字，規定項目將相對于其他靈活的項目進行收縮的量
flex-basis：項目的長度
多列布局
父元素中：
column-count：欄數
column-width：欄的寬度 不夠改變欄數
column-gap：欄之間的間隔
column-rule 分割線
子標簽中：
column-span:1 或者 all 子標簽跨多列
break-inside： auto可中斷 或者 avoid不可中斷
注：
column-span: all;的效果如下圖：
column-count和column-width用的時候只能用column-count；
column-count自動給子項目分配大小，
column-width給子項目分配具體的大小
媒體查詢
@media媒體查詢
screen當前設備寬
min-width最小寬
@media screen and (min-width:1080px){
}
移動端
<meta name="view" width=device-width initial-scale=1 user-scalable=no設備像素比dpr:物理像素/CSS像素
dpr==2安卓 750/375
dpr==3蘋果 1080 1220 /414
布局視口980 1024
視覺視口用戶看到一部分，剩下的
理想視口完全適配設備
布局視口-》理想視口
meta name=“viewport”
彈性布局100%
等比縮放布局rem
移動端布局
單位：相對長度
em相對于父標簽的字體大小
rem相對于根標簽
vw 1vw、vh=視口寬度/高度的1%
使用理想視口
使用rem和vw結合
實現等比縮放的網頁布局：
320屏幕為例
dpr==2
font-size:100px ==
1rem ==100px
1vw=3.2px
1rem==31.25vw
640的設計圖量出高度88px
88px/dpr == 88/2 == 44px == .44rem
100vw與100%進行對比：
100vw加上滾動條
100%不加滾動條
手機端中：100vw就是350px
100px
7.5
1rem=13.34vw
grid布局
只會影響第一層子標簽
添加網格布局的是容器
子標簽稱為項目
格子組成的線：
m行 n列
需要的線數：m+1+n+1
父元素：
子項目：
main>div:nth-child(1){// 將第一條行線和第三條行線劃分為一個塊，grid-row: 1 / 3;grid-column: 1 / 3;}main>div:nth-child(2){grid-column: 3 / 5;}main>div:nth-child(3){grid-column: 5 / 7;}main>div:nth-child(4){}main>div:nth-child(5){grid-column: 3 / 5;}main>div:nth-child(6){}main>div:nth-child(7){grid-column: 6 / 8;grid-row: 2 / 4;}main>div:nth-child(8){}main>div:nth-child(9){}main>div:nth-child(10){grid-column: 3 / 5;}main>div:nth-child(11){}效果展示：
讓內容限定在第幾行顯示省略號
轉化為伸縮盒子
讓子元素或者里面的內容在垂直方向上排布
讓內容限定在第幾行顯示省略號
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
總結
以上是生活随笔為你收集整理的HTML和CSS简单整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 从数组里删除元素,PHP从数组中
- 下一篇： 如何通过浏览器插件获取淘宝di订单信息