盒模型隨堂筆記

2022-07-23 03:18:09 字數 3931 閱讀 1486

一、背景:

1、 padding: 0px;">屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框區域,擴充套件到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。」

3、background-repeat:背景平鋪,預設地,背景影象在水平和垂直方向上重複。

4、background-position:背景圖位置;水平位置  垂直位置,這個屬性設定背景原影象(由 background-image 定義)的位置,背景影象如果要重複,將從這一點開始。

5、background-size:屬性規定背景影象的尺寸。

width:寬高;height:行高

6、多張背景圖寫法:background: url() no-repeat,url()

二、文字

1、text-indent:首行縮排;

2、text-align:文字行對齊方式;

3、text-decoration: underline:下劃線;

4、line-through:刪除線;

5、overline:頂劃線;裝飾修飾;

6、line-height:高度固定後,可以設定垂直居中;

7、word-height:單詞換行;

8、white-space:nowrap;:文字不換行;

9、overflow:超出隱藏;

10、text-overflow:ellipsis;:文字超出顯示省略號;

三、字型

1、font-family:字型型別;可以寫多個,瀏覽器識別第乙個。

microsoft yahei微軟雅黑,simsun宋體,simhei黑體;

2、font-size:字型大小;chrome:最小12px;(字型縮小的12就不會再縮小了,谷歌瀏覽器的限制到12畫素,其他**的畫素最小到10畫素,一般網頁字型是用12畫素。谷歌電腦端識別12。)

3、font-weight:字型粗細;bold加粗;bolder更粗;lighter更細;400等同於normal;700相當於bold;400等同於normal;700相當於bold;

4、font-style:斜體;normal正常;italic斜體;oblique傾斜(這兩個斜體在瀏覽器看上去相同)

5、顏色值:1、十六進製制的顏色值 #ff0000 縮寫#f00; 2、rgb值:rgb(255,0,0);rgba 3、英文單詞  color字型顏色

四、盒模型

margin:外邊距  margin-top:上邊距; margin-left:左邊距;margin-bottom:下邊距;margin-right:右邊距

外邊距合併:當兩個垂直外邊距相遇時,它們將形成乙個外邊距;

可以使用padding或border分開兩個外邊距;

padding:內邊距;

border:邊框;1px solid #000;

border-style:solid(實線)dotted(點線)dashed(虛線)double(雙線)

border-color:顏色;

一般body是預設有margin;

margin:0 auto;設定左右居中;

四個值的順序:上 右 下 左;css是繼承的關係;

一、背景:

1、 padding: 0px;">屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框區域,擴充套件到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。」

3、background-repeat:背景平鋪,預設地,背景影象在水平和垂直方向上重複。

4、background-position:背景圖位置;水平位置  垂直位置,這個屬性設定背景原影象(由 background-image 定義)的位置,背景影象如果要重複,將從這一點開始。

5、background-size:屬性規定背景影象的尺寸。

width:寬高;height:行高

6、多張背景圖寫法:background: url() no-repeat,url()

二、文字

1、text-indent:首行縮排;

2、text-align:文字行對齊方式;

3、text-decoration: underline:下劃線;

4、line-through:刪除線;

5、overline:頂劃線;裝飾修飾;

6、line-height:高度固定後,可以設定垂直居中;

7、word-height:單詞換行;

8、white-space:nowrap;:文字不換行;

9、overflow:超出隱藏;

10、text-overflow:ellipsis;:文字超出顯示省略號;

三、字型

1、font-family:字型型別;可以寫多個,瀏覽器識別第乙個。

microsoft yahei微軟雅黑,simsun宋體,simhei黑體;

2、font-size:字型大小;chrome:最小12px;(字型縮小的12就不會再縮小了,谷歌瀏覽器的限制到12畫素,其他**的畫素最小到10畫素,一般網頁字型是用12畫素。谷歌電腦端識別12。)

3、font-weight:字型粗細;bold加粗;bolder更粗;lighter更細;400等同於normal;700相當於bold;400等同於normal;700相當於bold;

4、font-style:斜體;normal正常;italic斜體;oblique傾斜(這兩個斜體在瀏覽器看上去相同)

5、顏色值:1、十六進製制的顏色值 #ff0000 縮寫#f00; 2、rgb值:rgb(255,0,0);rgba 3、英文單詞  color字型顏色

四、盒模型

margin:外邊距  margin-top:上邊距; margin-left:左邊距;margin-bottom:下邊距;margin-right:右邊距

外邊距合併:當兩個垂直外邊距相遇時,它們將形成乙個外邊距;

可以使用padding或border分開兩個外邊距;

padding:內邊距;

border:邊框;1px solid #000;

border-style:solid(實線)dotted(點線)dashed(虛線)double(雙線)

border-color:顏色;

一般body是預設有margin;

margin:0 auto;設定左右居中;

四個值的順序:上 右 下 左;css是繼承的關係;

css盒模型筆記

一 總述 網頁是由乙個多個矩形框組成的,每乙個框都可以看成是乙個盒子,而乙個盒子 乙個元素 又是由4個矩形巢狀而成。分別是content box 內容 padding box 填充或內邊距 border box 邊框 margin box 外邊距 和布局的區別 布局是指多個盒子 元素 在頁面上的定位...

標準盒模型 怪異盒模型 彈性盒模型

box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...