CSS學習系列(一) 初識元素水平以及盒模型

2021-10-01 15:43:46 字數 808 閱讀 1733

提到元素的型別,我以前第一反應就是兩種:塊級元素行內元素,分別有著獨佔一行可同處一行的特點。

然而,在樣式這個大千世界裡,遠不是這麼簡單和淺顯。

提到盒子,我反正第一想到的就是margin

border

padding

content

width容器盒子,其中每個盒子都有可能表現為塊級元素的特性或者內聯元素的特性。

但我們這裡說的內聯級盒子是通過外在盒子外在盒子外在盒子的表現特徵判斷的。重要的事情強調三遍哈。

所以,自然而然:內聯級級元素!==display: inline,包含以下多種:

(1)dispay: inline;

(2)dispay: inline-block;

(3)dispay: inline-table;

…(n) display: inline-***;

所以呢,內聯級元素最簡單的驗證方法就是能和文字在一行展示!所以列舉一下都有哪些常用的內聯級元素吧:文字textimg按鈕button輸入框input下拉框select等表單元素。

Canvas學習系列一 初識canvas

最近你開始在學習canvas,打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來,如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現,可以說開啟的web世界繪製動畫,圖形的大門,其功能非常強大 canvas 元素是html5中功能最強大的元素,它的能力主要...

Canvas學習系列一 初識canvas

最近你開始在學習canvas,打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來,如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現,可以說開啟的web世界繪製動畫,圖形的大門,其功能非常強大 canvas 元素是html5中功能最強大的元素,它的能力主要...

css3學習系列之初識 transform 一

一 transform是哈?從字面意思來看 transform的含義是 改變,使 變形 轉換,對 沒錯 就是變形 變形當有 放大縮小 東倒 西歪,剛好css3中 transform 也出這個 放幾個類似詞 transform rotate 旋轉 乙個東西你想旋轉多少度 就是多少 rotate 它的方...