三十六 CSS高階特性

2021-09-24 12:26:39 字數 1678 閱讀 2130

box盒子

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

盒子模型的組成:

盒子內容 + 盒子的內邊距(盒子內容到邊框的填充) + 盒子邊框 + 盒子外邊距

1.邊框

/*border-style: solid;*/

/*border-style: dotted;*/

/*border-style: dashed;*/

border-style

: double;

/*border-color: green;*/

/*border-color: #008000;*/

border-color

:rgb

(255,0,0)

;

border-width

: 1px;

/* 所有的 */

/*border-color: red;*/

/* 上下 左右 */

/*border-color: red green;*/

/* 上 左右 下 */

border-color

: red green yellow;

/* 順時針:上右下左 */

/*border-color: red green black pink;*/

例如:

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

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

border

: 1px solid red;

例如:

2.內邊距

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

/*padding: 50px;*/

/* 上下 左右 */

/*padding: 50px 20px;*/

/* 上 左右 下 */

/*padding: 10px 20px 30px;*/

/* 上右下左 */

padding

: 10px 20px 30px 40px;

3.外邊距

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

4.盒子尺寸

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

5.標準文件流調整-display

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

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

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

display:

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

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

/* 表示在元素最後面設定資訊 */

.father:after

position:定位

CSS 三十六 尺寸

css 尺寸 dimension 屬性允許你控制元素的高度和寬度。同樣,它允許你增加行間距。本例演示如何使用畫素值設定元素的高度。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這是一些文字。這...

Vue高階(三十六) created 詳解

三 vue 生命週期 mounted 和 created 的區別 四 拓展閱讀 vue.js中created方法是乙個生命週期鉤子函式,乙個vue例項被生成後會呼叫這個函式。乙個vue例項被生成後還要繫結到某個html元素上,之後還要進行編譯,然後再插入到document中。每乙個階段都會有乙個鉤子...

練習(三十六)

人類都有說話的能力,那如何使用電腦程式來描述這一特徵呢?如果是中國人,那麼語言能力就直接輸出 中國人說中國話 如果是美國人,那麼語言能力就直接輸出 美國人說英語 分別在測試類中建立2個物件 如何用物件導向的知識實現特點?分析 中國人和美國人都是人類 可以用物件導向的繼承關係 人類為父類,但是人類父類...