CSS高階操作

2021-09-24 13:47:37 字數 3098 閱讀 2708

box盒子

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

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

border-style 邊框樣式

/*border-style: solid;*/

/*border-style: dotted;*/

/*border-style: dashed;*/

border-style: double;

border-color 邊框顏色

/*border-color: green;*/

/*border-color: #008000;*/

border-color: rgb(255,0,0);

border-width 邊框粗細

border-width: 1px;
上方的樣式直接設定多個值可以表示不同的方向

/* 所有的 */

/*border-color: red;*/

/* 上下 左右 */

/*border-color: red green;*/

/* 上 左右 下 */

border-color: red green yellow;

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

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

例如:

border-top-style

border-right-style

border-bottom-style

border-left-style

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

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

border: 1px solid red;

例如:

border-top:1px solid red;

border-bottom:***;

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

padding-top

padding-right

padding-bottom

padding-left

padding:它可以統一設定不同方向的距離

/*padding: 50px;*/

/* 上下 左右 */

/*padding: 50px 20px;*/

/* 上 左右 下 */

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

/* 上右下左 */

padding: 10px 20px 30px 40px;

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

margin-top

margin-ritght

margin-bottom

margin-left

margin

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

content-box(預設值):計算盒子尺寸時,只計算盒子元素內容,不包括內邊距和邊框。

border-box:計算盒子尺寸時,不止計算盒子元素內容,還包括內邊距和邊框。(大小一共就那麼大,所以到時候會調整元素內容的空間)

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

塊元素獨佔一行,擁有完整的盒子模型設定

行內/內聯元素:如果有多個內聯,會排在一行,且盒子模型不完整。它的大小主要由內容撐開。

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

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

display:

none 隱藏

block 塊元素的預設值

inline 內聯元素的預設值

inline-block 行內塊元素 (但是有不可控的間隙)

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

none 預設值

left 左浮動

right 右浮動

當浮動出現後,會導致:

兄弟元素受到浮動影響,導致顯示錯亂

可以通過clear清除浮動,解除浮動影響。

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

利用新增空子元素解決

在父級元素最後新增乙個子元素,然後將其清除兩側浮動。

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

.father:after

設定父級高度(變通玩法 下三濫玩法)(不推薦)

利用overflow(溢位)特性

當overflow設定的標籤沒有設定高度時,會自動跟隨溢位元素進行高度適應。

position:定位

static 預設的

relative 相對的

設定它,會保留原有的位置,然後通過方向調整可以定位位置,但是它的定位偏移是相對於原來的位置

absolute 絕對的

設定它之後,原有位置會消除,但是它缺省會保留在原有位置上方,它後面的元素會向上偏移。

使用方向調整,預設情況下會相對於瀏覽器邊框進行偏移,

當然如果它的某一級父元素設定過定位,則會相對於父級元素偏移。

往往它會結合著relative使用

fixed固定的

「狗皮膏藥」 固定定位

CSS高階操作

box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.1 邊框 例如 另外css還給提供了統一的邊框設定方式 可以同時設定顏...

CSS高階操作

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

CSS高階操作

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