CSS 基本知識點梳理

通過box-sizing設定

box-sizing:context-box

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

box-sizing:border-box

怪異盒模型：寬度=內容寬度（content+border+padding）+ margin

css 選擇器

id選擇器：#id 類選擇器：.classname 標籤選擇器：div h3 p 相鄰選擇器：div+h3 子選擇器：ul>li 後代選擇器：li a 萬用字元：* 屬性選擇器：div[name="active"] 偽類選擇器： a :hover,li

:nth-child

可繼承的屬性

font-size, font-family, color

元素選擇符： 1

class選擇符： 10

id選擇符：100

元素標籤：1000

!important宣告的樣式優先順序最高，如果衝突再進行計算。

如果優先順序相同，則選擇最後出現的樣式。

繼承得到的樣式的優先順序最低。

inline（預設）–內聯

none–隱藏

block–塊顯示

table–**顯示

list-item–專案列表

inline-block (行內塊)

flex (彈性盒模型)

static（預設）：按照正常文件流進行排列；

relative（相對定位）：不脫離文件流，參考自身靜態位置通過 top, bottom, left, right 定位；

absolute(絕對定位)：參考距其最近乙個不為static的父級元素通過top, bottom, left, right 定位；

fixed(固定定位)：所固定的參照對像是可視視窗。

三角形均分原理：需要把元素的寬度、高度設為0。然後設定邊框樣式。

width
: 0;
height
: 0;
border-top
: 20px solid transparent;
border-left
: 20px solid transparent;
border-right
: 20px solid transparent;
border-bottom
: 20px solid #ff0000;

不同瀏覽器對有些標籤的預設值是不同的,樣式重置解決瀏覽器樣式差異

display：none 不顯示對應的元素，在文件流中不再分配空間（回流+重繪）

visibility：hidden 隱藏對應元素，在文件流中仍保留原來的空間（重繪）

浮動帶來的問題：

高度塌陷，父元素的高度無法被撐開

解決浮動的方式

設定父容器高度

設定 overflow 為 hidden 或者 auto

clear: both

.clearfix:after

響應式**設計(responsive web design)是乙個**能夠相容多個終端，而不是為每乙個終端做乙個特定的版本。

基本原理是通過**查詢檢測不同的裝置螢幕尺寸做處理。

頁面頭部必須有meta宣告的viewport。

1. maximum-scale=
1,user-scalable=no」>

方法1 position定位

父容器
position
: relative;
自適應div
position
: absolute;
width
: 100%;
top: 100px;
bottom
: 0;
left
: 0;
background
:lightcyan;

方法2 flex

父容器
display
: flex;
flex-direction
: column;
子div
flex
:1;width
: 100%;
background
:lightcyan;

方法3 calc 計算

calc有一定相容性，建議相容低版本瀏覽器專案慎用

子div
height
:calc
(100% - 100px)
;

png 是可攜式網路（portable network graphics）是一種無損資料壓縮位**件格式.優點是：壓縮比高，色彩好。大多數地方都可以用。 jpg 是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸**的格式。 gif 是一種位**件格式，以8位色重現真色彩的影象。可以實現動畫效果. webp格式是谷歌在2023年推出的格式，壓縮率只有jpg的2 /3，大小比png小了45

%。缺點是壓縮的時間更久了，相容性不好，目前谷歌和opera支援。

height:
1px;
transform:
scale
(0.5
);

div

已知div寬高

未知div寬高

見另一篇文章總結css 常見的相容性問題

css 基礎面試題

持續更新中，未完待續…

CSS 基本知識點梳理

python爬蟲開發基本知識點梳理

基本知識點

基本知識點

相關推薦