css簡單小知識

2022-09-04 01:24:08 字數 1489 閱讀 9964

一.css盒子模型

1、屬性:外邊距(margin)、邊框(border)、內邊距(padding)和內容(content)。

2.種類:ie盒子模型和標準模型兩種。

標準模型:box-sizing:content-box;

ie模型:box-sizing:border-box;

3.筆記:

(1)內邊距padding是內容區和邊框border之間的區域,元素盒在頁面上佔據的總寬度是左邊的外邊緣到右邊的外邊緣之間的距離。

(2)使用width和height屬性可以設定塊級元素或內嵌可替換元素的大小。

(3)外邊距margin是圍繞在元素邊框之外的可選區域。正常文件中的相鄰塊級元素的垂直外邊距將會重合,即,相鄰的兩個塊級元素之間的空白將會是兩個元素的外邊距中較大的那乙個,而不是兩個外邊距的和。

(4)邊框border是圍繞著元素內容區和padding區畫的一條線。內邊距padding是元素的內容區和邊框之間的可選區域。padding不允許有負值。與margin不同,padding是不會重合的。

二.float

1.雜記

(1)父元素浮動,子元素繼承互動屬性;

(2)使用float,塊元素變成水平排列而不是獨佔一行;

(3)左浮動元素按正序排列,右浮動按倒序排列;

(4)float引用:文字環繞,左環繞:float:left;右環繞: float:right;

2.浮動的***:

(1)脫離文件流:給元素設定浮動屬性,該元素會脫離文件流進行排列布局(但是依然佔據文件流的空間);

(2)塊狀元素,會鑽進浮動元素的下面,被浮動元素所覆蓋;

(3)浮動元素的父元素坍縮。

解決浮動的***方法:

1.手動給父元素設定高度;

2.通過clear清除內部和外部浮動;

3.給父元素新增overfloat屬性並結合zoom:1使用;

4.給父元素新增浮動;

5.偽元素after清除浮動。

背景:background-color:設定元素的背景顏色;(包括內邊距和邊框,不包含外邊距)

background-image:把影象設定為背景;(包括內邊距和邊框,不包含外邊距)

background-position:設定背景影象起始位置;(相對於容器,只設定乙個關鍵字預設為居中)

background-attachment:背景影象是否固定(fixed)或隨著頁面的其餘部分滾動(scroll);

background-repeat:背景影象是否重複(重複又分為橫向重複、縱向重複和橫縱都重複)。

background:簡寫屬性,不分前後。

列表:list-style-type:設定列表項標誌的型別;(無序列表和有序列表)

list-style-image:將影象設定為列表項標誌;(既設定型別又設定標誌,影象會覆蓋原本型別)

list-style-position:設定列表項標誌的位置;(inside&outside)

list-style:簡寫屬性,不分前後。

CSS日常小知識

假如有乙個padding border margin 與其他的三條邊不同,其他三條邊一樣,這個時候我們設定總體樣式,再單獨去設定它的樣式。border 5px solid red css 層疊特效 border bottom 10px dashed green 有一些標籤會有預設的樣式,比如預設的m...

CSS屬性小知識

1.float 注意 1.浮動元素產生了浮動流,塊級元素看不到他們,也就是會忽略它所佔的位置 2.產生bfc的元素和文字類屬性的元素以及文字都能看到他們 3.有inline 睡醒都具有文字屬性 4.若設定浮動,應該馬上清除浮動,避免不必要的影響 清除浮動的方法 方法一 新增新的元素 應用 clear...

關於css的小知識

關於css的小知識以及例子 關於元素的隱藏 display和visibility的區別。1 display none 元素隱藏後不占有空間 2 visibility hidden 元素隱藏後占有空間 box shadow 陰影 的使用 box shadow 1px 2px 3px 4px red i...