常見的瀏覽器的前綴
1.?歌chrome======內核(webkit)========前綴（-webkit-）
2.蘋果safari======內核（webkit）======前綴(-webkit-)
3.?狐firefox=====內核（gecko）=======前綴(-moz-)
4.歐朋opera=======內核（presto）======前綴（-o-)
5.IE=============內核（trident）=====前綴（-ms-)
6.edge===前綴（-webkit-）
微軟win11系統上瀏覽器已經全面改成edge了，win11以下的系統用的還是IE（IE目前已經停產了）
一:線性漸變linear-gradient
? ? 不加瀏覽器前綴：方向必須要寫to，寫的是終點
? ? 加瀏覽器前綴：方向就不能寫to了，寫的是起點
? ? 加了不同的前綴只能在對應的瀏覽器上識別，比如加了ms只能在IE上識別，加了webkit就可以在谷歌、蘋果、edge上識別
二：徑向漸變radial-gradient()
? ? 注意：
? ? ? ? 起點可以寫方位名詞，也可以寫具體的坐標點。
? ? ? ? 如果寫了起點了，就必須加瀏覽器的前綴。
? ? ? ? 如果不寫起點，起點默認在中心點，可以不加前綴。
? ? 漸變的形狀：
? ? ? ? 默認情況：
? ? ? ? ? ? 正方形盒子默認是圓形(正方形盒子永遠都只呈現圓形)
? ? ? ? ? ? 長方形盒子默認是橢圓形（長方形盒子是可以改成圓形的）
? ? ? ? circle=====圓
? ? ? ? ellipse====橢圓
三：重復性漸變
? ? 線性漸變和徑向漸變都支持重復。
? ? 在漸變的單詞之前加repeating-，該顏色分配比例。
四：精靈圖
? ? ?精靈圖也叫做雪碧圖，英文單詞是sprite，這是一種圖片整合技術，就是把很多張小圖放到了一張大圖之上。
? ? 用精靈圖的好處：
? ? ? ? 1.減少對服務器的請求次數
? ? ? ? 2.提高網頁的加載速度
? ? ? ? 3.減少圖片的體積
? ? 使用精靈圖的核心技術點：背景圖的位置
五、過渡
? ? ? 過渡：可以實現從一個狀態緩慢的變化到另外一個狀態，有一個動畫效果
? ? 一般過渡都需要結合鼠標滑過等一起實現
? ? 非簡寫：
? ? ? ? transition-property：過渡要參與的屬性
? ? ? ? transition-duration：過渡時間
? ? ? ? transition-delay：過渡的延遲時間
? ? 簡寫：transition
? ? 簡寫方式里面：其他值沒有書寫順序，但是過渡時間必須在前，延遲時間在后，如果只寫了一個時間那么必然是過渡時間

? ? 缺一個：過渡的運動曲線（明天再講）
六：變形transform
? ? 位移translate，主要作用：調整元素的位置。
? ? ? ? 常見寫法：
? ? ? ? transform: translateX();====只會做橫向移動
? ? ? ? transform: translateY();====只會做縱向移動
? ? ? ? transform: translateX() translateY();====橫向和縱向同時移動
? ? ? ? transform: translate(x,y);====橫向和縱向同時移動
? ? 旋轉： 旋轉常見書寫方式
? ? ? ? 賦值的時候用的單位是角度單位deg
? ? ? ? ?transform: rotateX(0deg);====圍繞x軸做旋轉
? ? ? ? ?transform: rotateY(0deg);===圍繞y軸做旋轉
? ? ? ? ?transform: rotate(0deg);===圍繞整個盒子中心點做旋轉
? ? transform-origin：可以更改變形點
? ? 縮放：可以實現元素的放大和縮小
? ? ? ? 縮放的常見寫法：
? ? ? ? 賦值不帶單位，值是倍數的意思
? ? ? ? 寫1沒有變化，如果比1大，就是放大多少倍，如果比1小，就是縮小多少倍
? ? ? ? transform: scaleX();====沿著x軸做縮放，改變的寬度
? ? ? ? transform: scaleY();====沿著y軸做縮放，改變的高度
? ? ? ? ?transform: scaleX() scaleY();====x和y同時改變
? ? ? ? ?transform: scale();
? ? ? ? ? ? 小括號里面只寫一個值，就是x和y同時改變
? ? ? ? ? ? 寫了2個值,第一個值是x，第二個值代表的是y
? ? ? ? 默認變形點都是在中間，可以通過transform-origin更改變形點
? ? 傾斜：skew

要記住的東西
? ? 1.瀏覽器的前綴
? ? 2.漸變的單詞
? ? 3.精靈圖的好處
? ? 4.過渡的單詞
? ? 5.變形中位移、旋轉和縮放的單詞

作業：
? ? 1.扇子：元素不可見千萬不要用display:none;
? ? ? ? 因為display:none這個屬性是不參與過渡
? ? ? ? 可以使用opacity實現元素的隱藏效果
? ? 2.縮放的線條：
? ? ? ? 一開始線條不可見是讓縮放值為0實現的，也不是x和y同時為0，只需要讓其中一個為0
? ? ? ? 提示：創建2個盒子，一個加左右邊框線，一個加上下邊框線即可
? ? 3.百葉窗盡力去做（明天會講）

1.選擇器的權重值
2.浮動的作用、特點
3.文字水平居中、垂直居中
4.如何取消超鏈接自帶的下劃線
5.紅綠藍白黑的rgb和十六進制寫法?

一、背景
? ? 非簡寫方式（單一寫法）
? ? ? ? 1.背景的顏色：background-color
? ? ? ? 2.背景的圖片：background-image:url(圖片的路徑)
? ? ? ? ? ? 盒子大于圖片：會發生平鋪的現象
? ? ? ? ? ? 盒子等于圖片：剛好顯示
? ? ? ? ? ? 盒子小于圖片：會把圖片裁切
? ? ? ? 3.背景圖片的平鋪規則：background-repeat
? ? ? ? ? ? repeat===平鋪，默認值
? ? ? ? ? ? no-repeat===不平鋪
? ? ? ? ? ? repeat-x===橫向平鋪
? ? ? ? ? ? repeat-y===縱向平鋪
? ? ? ? 4.背景圖片的位置：background-position
? ? ? ? ? ? 寫法一：寫具體的坐標點
? ? ? ? ? ? ? ? 左上角是0，0
? ? ? ? ? ? ? ? x軸：向右為正，向左為負
? ? ? ? ? ? ? ? y軸：向下為正，向上為負
? ? ? ? ? ? 寫法二：借助方位名詞寫（top、bottom、left、right、center）
? ? 簡寫方式（復合寫法）
? ? ? ? background:需要什么就寫什么。沒有書寫順序。
二、盒子模型
? ? 組成部分：內容 ?內間距 ? 邊框線 ?外間距
? ? 我們寫的width和height指的是內容區的寬度和高度
? ? 加了內間距和邊框線會導致把盒子撐大
? ? 總寬：width+左右的內間距+左右的邊框線
? ? 總高：height+上下的內間距+上下的邊框線

三、內間距的常見書寫方式
? ? 內間距padding：內容到盒子邊的距離
? ? padding:1個值，同時給4個方向都添加
? ? padding：2個值，上下 ?左右
? ? padding：3個值，上 ?左右 ?下
? ? padding：4個值，上 右 下 ?左 順時針的順序賦值
? ? padding-left：左間距
? ? padding-right
? ? padding-top
? ? padding-bottom
? ? 注意：內間距不支持寫負數
四、外間距的常見書寫方式
? ? 外間距margin：盒子與盒子的距離
? ? 書寫方式和內間距是一樣的
? ? 注意：外間距支持寫負數
? ? 調整位置：
? ? ? ? 上下：margin-top
? ? ? ? ? ? 正數：向下走 ?負數：向上走
? ? ? ? 左右：margin-left
? ? ? ? ? ? 正數：向右走 ?負數：向左右
五、邊框線的書寫方式
? ? 非簡寫方式（單一寫法）：
? ? ? ? 1.border-width：邊框線的粗細
? ? ? ? 2.border-style：邊框線的樣式
? ? ? ? ? ? solid：實線
? ? ? ? ? ? dashed:虛線
? ? ? ? ? ? dotted:點線
? ? ? ? ? ? double:雙線
? ? ? ? ? ? none:沒有線
? ? ? ? 3.border-color：邊框線的顏色，默認顏色是黑色
? ? 簡寫方式（復合寫法）：border:需要哪個值就寫哪個，沒有書寫順序。
六、利用邊框線畫三角形
? ? 1.寬高為0
? ? 2.給4個方向都加透明的邊框線（transparent）
? ? 3.需要哪個方向就給對立面寫上顏色即可。
七、元素的居中方式
? ? 文字的居中
? ? ? ? 水平居中：text-align:center
? ? ? ? 垂直居中：line-height的值height一致
? ? 圖片的居中
? ? ? ? 水平居中：text-align:center;
? ? ? ? 注意：要寫在圖片的父元素身上。
? ? ? ? 垂直居中：下周再講。
? ? 盒子的居中：
? ? ? ? 水平居中：margin:0 auto;
? ? ? ? 注意：一定要寫在自己身上。
? ? ? ? 垂直居中：下周再講。
八、清除標簽自帶的間距
? ? *{padding:0;margin:0;}
?

一、元素類型
? ? ?1.塊元素block
? ? ? ? ? ? 特點：
? ? ? ? ? ? ? ? 1.縱向排列，可以設置寬高
? ? ? ? ? ? ? ? 2.如果不設置寬度，那么寬度默認和父親保持一致。
? ? ? ? ? ? ? ? 3.一般在網頁布局中都當作容器來使用。
? ? ? ? ? ? 常見標簽：div、p、標題標簽（h1,h2,h3,h4,h5,h6)、ul、ol、li、dl、dt、dd、hr、form
? ? ? ? 2.行內元素inline
? ? ? ? ? ? 特點：
? ? ? ? ? ? ? ? 1.橫向排列的，不能設置寬高
? ? ? ? ? ? ? ? 2.寬度默認由內容決定
? ? ? ? ? ? ? ? 3.有時候上下的內外間距有可能加不上。
? ? ? ? ? ? 常見標簽：span、a、b、strong、i、em、u、s、del、sup、sub
? ? ? ? 3.行內塊元素inline-block
? ? ? ? ? ? 特點：
? ? ? ? ? ? ? ? 1.橫向排列的，可以設置寬高
? ? ? ? ? ? ? ? 2.自帶3-5px的間距,這個間距不是由padding、margin造成的。
? ? ? ? ? ? 常見標簽：img、input
二、元素類型之間的轉換
? ? ? display:block;====轉成塊元素
? ? ? display:inline;===轉成行內元素
? ? ? display:inline-block;====轉成行內塊元素
三、元素的顯示和隱藏
? ? ? 隱藏：display: none;元素隱藏之后不占據位置。
? ? ? 顯示：只要讓display的值不為none就是顯示。
? ? ? ? block、inline、inline-block
? ? ? ? 顯示一般推薦用block。
四、vertical-align可以實現的垂直居中。(了解)
? ? 但是僅限于行內塊元素使用
? ? top:頂線對齊
? ? middle:中線對齊
? ? baseline:基線對齊,默認值
? ? bottom：底線對齊

? ? 行內塊元素為什么自帶3-5px的間距？
? ? ? ? 因為行內塊元素默認是和文字的基線進行的對齊。
? ? 如何取消這個自帶的間距呢？
? ? ? ? 1.讓vertical-align的值只要不是baseline即可。
? ? ? ? 2.浮動：缺點：會脫離文檔流，不占據位置。
? ? ? ? 3.font-size: 0;使用這種方式的前提是盒子里面沒有文字才能使用，如果有文字，雖然能取消間距，但是文字就看不見了。
五、省略號的制作
? ? ? ?1.加寬度
? ? ? ? 2.讓文字不要自動換行： white-space: nowrap;
? ? ? ? 3.讓超出的部分隱藏：overflow: hidden;
? ? ? ? 4.顯示省略號：text-overflow: ellipsis;
六、overflow的值
? ? ? ? visible:超出的部分依然可見，默認值
? ? ? ? hidden:讓超出的部分隱藏====常用
? ? ? ? auto:當內容超出之后會自動產生滾動條。（推薦auto制作滾動條）====常用
? ? ? ? scroll:不管內容有沒有超出都會產生滾動條

標簽嵌套：
? ? 建議：豎著排列的可以嵌套橫向排列的，但是橫向排列的里面最好不好嵌套豎著排列
? ??
一、偽類選擇器
? ? 偽類選擇器：標志是一個冒號
? ? :link===鏈接未訪問（只能用在超鏈接）
? ? :visited====鏈接已訪問（只能用在超鏈接）
? ? :hover===鼠標滑過、鼠標懸停(可以用在任何一個標簽之上)=====常用
? ? :active===鼠標按下(可以用在任何一個標簽之上)

? ? 注意：如果這4個狀態同時書寫，順序不可打亂。
二、選擇器的權重
? ? 權重值越大，優先級越高。
? ? ? ? 通配符選擇器：0
? ? ? ? 標簽選擇器：1
? ? ? ? 類選擇器：10
? ? ? ? 偽類選擇器：10
? ? ? ? id選擇器：100
? ? ? ? 行內樣式表：1000

? ? ? ? 包含選擇器（后代和子代）：用到的所有的選擇器權重相加之和

? ? ? ? 群組選擇器：各自選擇器的權重值（選擇器和選擇器之間毫無關系）
三、和文字相關的樣式
? ? 1.文字的顏色：color
? ? ? ? 1.直接寫顏色單詞：red
? ? ? ? ? ? ? ? 2.rgb()===取值區間：0-255
? ? ? ? ? ? ? ? ? ? rgb(50,200,100)
? ? ? ? ? ? ? ? ? ? 紅色：rgb(255,0,0)
? ? ? ? ? ? ? ? ? ? 綠色:rgb(0,255,0)
? ? ? ? ? ? ? ? ? ? 藍色：rgb(0,0,255)
? ? ? ? ? ? ? ? ? ? 白色：rgb(255,255,255)
? ? ? ? ? ? ? ? ? ? 黑色：rgb(0,0,0)
? ? ? ? ? ? ? ? 3.十六進制寫法===取值區間：0-9a-f
? ? ? ? ? ? ? ? ? ? #跟6位數字，2位是一組，可以分成3組，依次代表紅色、綠色、藍色的取值
? ? ? ? ? ? ? ? ? ? 紅色：#ff0000====#f00
? ? ? ? ? ? ? ? ? ? 綠色：#00ff00====#0f0
? ? ? ? ? ? ? ? ? ? 藍色：#0000ff===#00f
? ? ? ? ? ? ? ? ? ? 白色：#ffffff===#fff
? ? ? ? ? ? ? ? ? ? 黑色：#000000===#000
? ? 2.字號：font-size
? ? ? ? ?谷歌瀏覽器默認字號為16px
? ? ? ? ? ? ? ? 谷歌最小字號是12px ?其他瀏覽器中可能是10px
? ? ? ? ? ? ? ? 字號最好寫偶數
? ? 3.字體：font-family
? ? ? ? ?谷歌的默認字體是微軟雅黑，其他瀏覽器可能是宋體。
? ? ? ? ? ? ? ? 注意：寫字體的時候如果字體是漢字或者1個以上的英文單詞，那么必須加引號。
? ? ? ? ? ? ? ? 字體可以寫多個，中間通過逗號隔開，使用字體的時候會從左到右依次查找，如果能用就用，不能用就下一個，如果都不能使用就使用默認的。
? ? 4.加粗：font-weight
? ? ? ? ?1.寫單詞
? ? ? ? ? ? ? ? ? ? ? ? ? ? lighter===變細
? ? ? ? ? ? ? ? ? ? ? ? ? ? normal===正常
? ? ? ? ? ? ? ? ? ? ? ? ? ? bold==加粗
? ? ? ? ? ? ? ? ? ? ? ? ? ? bolder==更粗（只是語氣加重而已）
? ? ? ? ? ? ? ? ? ? ? ? 2.寫數字（100-900）
? ? ? ? ? ? ? ? ? ? ? ? ? ? 100===變細
? ? ? ? ? ? ? ? ? ? ? ? ? ? 400===正常
? ? ? ? ? ? ? ? ? ? ? ? ? ? 600===變成加粗了，但是程序員更加喜歡用700
? ? ? ? ? ? ? ? ? ? ? ? ? ? 注意：千萬不要帶單位
? ? 5.傾斜：font-style
? ? ? ? ?normal===正常
? ? ? ? ? ? ? ? ? ? italic===傾斜
? ? ? ? ? ? ? ? ? ? oblique===更傾斜（只是語氣加重而已）
? ? 6.首行縮進text-indent
? ? ? ? ? em單位是一個相對單位，相對于當前元素的文字大小而言的
? ? ? ? ? ? ? ? 假設當前文字大小是16px，那么1em=16px ?2em=32px
? ? ? ? ? ? ? ? 假設當前文字大小是20px，那么1em=20px ?2em=40px
? ? 7.對齊方式
? ? ? ? ?水平對齊：text-align
? ? ? ? left:左對齊
? ? ? ? right：右對齊
? ? ? ? center：居中對齊（常用）
? ? ? ? justify:2端對齊
? ? ? ? 垂直對齊：line-height
? ? ? ? ? ? 當line-height與height保持一致的時候：文字垂直居中
? ? ? ? ? ? 當line-height比height小：文字垂直偏上
? ? ? ? ? ? 當line-height比height大：文字垂直偏下
? ? ? ? 注意：
? ? ? ? ? ? 如果文字是單行的，line-height可以調整文字的垂直對齊方式
? ? ? ? ? ? 如果文字是多行的，那么line-height就變成行高了（行與行的間距，上一行文字的頂端到下一行的頂端）
? ? 8.修飾線：text-decoration
? ? ? ? ?underline:下劃線
? ? ? ? ? ? ? ? overline:上劃線
? ? ? ? ? ? ? ? line-through:中劃線、刪除線、貫穿線
? ? ? ? ? ? ? ? none:沒有線(常用)
? ? 9.了解
? ? ? ? 字間距：letter-spacing
? ? ? ? 詞間距：word-spacing
? ? ? ? 大小寫轉換：text-transform
? ? ? ? ? ? ?uppercase===轉大寫
? ? ? ? ? ? ? ? lowercase==轉小寫
? ? ? ? ? ? ? ? capitalize==首字母大寫
四、浮動
? ? ?浮動float：
? ? 主要作用：實現元素的橫向排列。
? ? 浮動的書寫方式：
? ? ? ? float:left;=====讓元素向左漂浮
? ? ? ? float:right;===讓元素向右漂浮
? ? ? ? float：none;====不漂浮（寫了和不寫是一樣）
? ? 特點：
? ? ? ? 1.元素一旦加了浮動，就會立即漂浮起來，不占據位置，后面的元素會向前補齊。
? ? ? ? 2.浮動的元素是無法覆蓋文字和圖片的。
? ? ? ? 3.如果給‘相鄰’的多個元素都寫了左浮動：那么元素會從左到右依次橫向排列
? ? ? ? ? 如果給‘相鄰’的多個元素都寫了右浮動：那么元素會從右到左依次橫向排列
? ? ? ? 4.如果元素過多，一行放不下，會自動換行的。
? ? ? ? ? ? 注意：換到下一行的時候如果上一行有一個元素的高度太大了，會導致卡著過不去
? ? ? ? 5.大多情況下縱向排列的標簽比如div如果不設置寬度，寬度默認和父親保持一致，但是一旦加了浮動，寬度是由內容去決定的。
? ? ? ? 6.大多情況下橫向排列的標簽是無法設置寬高的，但是加了浮動之后就可以設置了。
? ? 清除浮動：是清除上一個浮動的元素帶來的影響，而不是取消浮動（誰受到影響就寫在誰的身上）
? ? ? ? ?clear:left;====清除左邊浮動帶來的影響
? ? ? ? clear:right;===清除右邊浮動帶來的影響
? ? ? ? clear:both;===左右2邊都清除
?

一、網站三要素（網頁的組成部分）
? ? html====結構=================w3c
? ? css====表現（美化網頁的）=====w3c
? ? js====行為（實現交互效果的）===ECMA
二、標簽語法
? ? html：超文本標記語言，目前使用的版本是5.0
? ? 標記：也叫做標簽、元素、盒子
? ? 記住：所有的標簽都是長在尖括號里面的<>
? ? ? ? 長在尖括號里的第一個單詞叫做：標簽的名字，后面的單詞統稱為屬性
? ? ? ? 屬性：分為屬性名字和屬性值，中間通過等號連接，屬性值需要加引號
? ? ? ? 屬性根據情況可寫可不寫。
? ? 分類：
? ? ? ? 單標簽：<標簽名字 屬性名字1='屬性值' 屬性名字2='屬性值'。。。>
? ? ? ? 雙標簽：<標簽名字 屬性名字1='屬性值' 屬性名字2='屬性值'。。。>標簽內容</標簽名字>
三、標簽的關系
? ? 父子關系（嵌套）
? ? 兄弟關系（并列）
四、各種標簽
? ? 1.文章標題標簽h1-h6
? ? ? ? 特點：雙標簽 ?文字自帶加粗效果,h1字號最大，h6字號最小的，縱向排列
? ? ? ? 注意：h1標簽有唯一性，一個頁面只允許使用一次，h1標簽一般是用來放logo圖的
? ? 2. 段落標簽：p
? ? 特點：雙 段落與段落中間自帶間距 縱向排列
? ? 3.傾斜標簽：i、em
? ? ? ? 特點：雙、橫向排列
? ? ? ? 區別：em標簽表示強調，有語氣加重效果，有利于搜索引擎的搜索
? ? 4.加粗：b、strong
? ? ? ? 特點：雙、橫向排列
? ? ? ? 區別：strong標簽表示強調，有語氣加重效果，有利于搜索引擎的搜索
? ? 5.下劃線：u
? ? ? ? 特點：雙、橫向排列
? ? 6.刪除線：s、del
? ? ? ? 特點：雙、橫向排列
? ? ? ? 區別：del標簽表示強調，有語氣加重效果，有利于搜索引擎的搜索
? ? 7.上標：sup ?下標：sub
? ? ? ? 特點：雙、橫向排列
? ? 8.修飾性標簽
? ? ? ? hr：水平線
? ? ? ? br：強制換行
? ? ? ? 都是單標簽
? ? 9.列表標簽
? ? ? ? 有序列表：ol+li=====幾乎不用
? ? 默認列表符號是數字
? ? 可以通過type屬性更改列表符號
? ? ? ? type="1"===按照阿拉伯數字排序
? ? ? ? type="A"===-按照大寫字母排序
? ? ? ? type="a"====按照小寫字母排列
? ? ? ? type="I"===按照大寫的羅馬數字排序
? ? ? ? type="i"====按照小寫的羅馬數字排序
? ? start屬性：可以更改排序的起始值。
? ? 無序列表:ul+li
? ? ? ? 默認列表符號是實心圓點
? ? ? ? type="disc"====實心圓點
? ? ? ? type="circle"===空心圓
? ? ? ? type="square"===實心方塊
? ? ? ? type="none"===沒有符號
? ? 使用場景：新聞條、導航條
? ? 自定義列表：dl+dt和dd
? ? ? ? 使用場景：用在圖文混排的地方
? ? ? ? dd是對dt的解釋說明，所以一般會再dt中放圖片，dd中文字
? ? 10.圖片標簽：img
? ? ? ? 單標簽
? ? ? ? src屬性：寫圖片的路徑的
? ? ? ? 上一級：../ ?上2級:../../
? ? ? ? alt屬性：當圖片加載不出來的時候顯示的提示信息
? ? ? ? title屬性：鼠標懸停時候的提示信息
? ? 11.超鏈接：a
? ? ? ? 雙、自帶文字顏色和下劃線、橫向排列
? ? ? ? href屬性：寫你要跳轉的地址的
? ? ? ? ? ? 1.可以寫真實網址
? ? ? ? ? ? 2.可以寫自己創建的頁面（就是自己創建的html文件）
? ? ? ? ? ? 3.可以寫圖片的地址
? ? ? ? target屬性：規定頁面的打開方式的
? ? ? ? ? ? ?_self:在當前窗口打開，默認值
? ? ? ? ? ? ?_blank：在新窗口打開
? ? 12.div和span
? ? ? ? ?div標簽：一般是用來劃分區域的（雙，縱向排列）
? ? ? ? ?span標簽：一般是用來修飾某一小段文字的（雙，橫向排列）

總結

以上是生活随笔為你收集整理的html, css知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。