CSS高階操作

2021-09-24 12:12:00 字數 811 閱讀 2060

box盒子

它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。

盒子模型的組成:盒子內容 + 盒子的內邊距(盒子內容到邊框的填充) + 盒子邊框 + 盒子外邊距

2.1 邊框

例如:

另外css還給提供了統一的邊框設定方式:

/* 可以同時設定顏色、粗細、樣式 */

border

: 1px solid red;

例如:

2.2 內邊距

padding(填充):它可以調整邊框到元素內容的距離。

2.3 外邊距

margin:設定元素的外邊距,也就是和其他元素之間的距離

2.4 盒子尺寸

box-sizing:設定盒子模型尺寸計算規則的。

2.5 標準文件流調整-display

預設情況下,在標準文件流中,元素是分為兩大類的。

實際上之所以出現這種效果,就是因為dispaly屬性,塊元素預設為block,而內聯元素預設為inline

如果想將塊元素和內聯元素進行轉換,可以通過此屬性。

display:

**float:**能夠實現塊元素在一行並列布局展示。

當浮動出現後,會導致:

如果都浮動了,父級元素會產生邊框塌陷

position:定位

CSS高階操作

box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過布局盒子資訊來進行 盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.1邊框 border style solid border style...

CSS高階操作

css高階操作box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看作是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.掌握盒子模型的使用 2.1邊框 border syle邊...

CSS高階操作

box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 border style 邊框樣式 border style solid ...