html5 css3學習(四)之CSS盒子模型

2021-10-21 02:25:48 字數 1442 閱讀 5462

1、內容區(content)

設定內容區的寬高

width:

height:

2、內邊距(內容與盒子的距離)(padding)

四個方向的距離,內邊距會影響可見框大小,元素背景會延伸到內邊距

padding:

padding-left:

padding-top:

padding-right:

padding-bottom:

3、邊框(border):設定邊框必須同時指定三個樣式

width,color,style(填充方式)

//設定1個值,則四邊相同

設定4個值,則分別賦值給 上 右 下 左

設定3個值,則分別賦值給 上 左右 下

設定2個值,則分別賦值給 上下 左右

用空格分隔

並且還有 border-position(bottom)-attribute(color)可以分別設定邊框樣式

//一起設定,按照寬度 樣式 顏色順序設定

border:1px solid #000

4、外邊距(margin):當前盒子和其他盒子的大小,恩外邊距也可以指定負值,元素會像反方向移動,不會影響可見框大小,會影響盒子位置

margin的值可以設定為auto,一般只用於水平方向,只給左右某乙個設定auto,外邊距會變成最大值,左右兩邊都設定為auto則會使子元素在父元素中居中,

//相當於闊外邊距

margin:

margin-top:

margin-left:

margin-right:

margin-bottom:

//上下邊距為0 左右為相同邊距,左右居中

margin:0 auto

網頁中垂直方向相鄰外邊距會發生重疊。

兄弟元素之間相鄰的垂直外邊距會取最大值

如果父子元素的垂直外邊距相鄰,則子元素的外邊距會設定給父元素

如果想要單單想改變內部子元素在父元素的位置,可以設定父元素的padding或者通過設定border等使子元素和父元素不相鄰(方式有很多)

1、內聯元素不能設定寬高

2、可以設定水平方向的內邊距,也可以設定垂直方向的頁邊距,但是垂直方向不會影響頁面的布局,即不會改變塊元素等元素的位置。

3、內聯元素可以設定邊框,水平方向會影響布局,垂直方向不會

4、可以為內聯元素設定外邊距,但只支援水平方向的外邊距,並且水平相鄰元素的外邊距不會重疊,不支援垂直方向的外邊距

許多元素瀏覽器有預設的margin和padding

所以要去掉瀏覽器的預設樣式

*

html5 css3學習(五)之浮動

通過display樣式可以修改元素的型別 可選值lnline 將乙個元素作為內聯元素顯示 block 將乙個元素設為塊元素顯示 inline block 將乙個元素轉換為行內塊元素,使元素既有行內元素特點又有塊元素特點,使其既能設定寬高,又不會獨佔一行 none 不顯示元素,並且元素不會在頁面中占有...

html5 css3學習(七)之定位

開啟定位 position的值為非static 通過position屬性來設定元素的定位 可選值static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位當元素開啟了定位,可以通過left right botto...

html5 css3學習(十)之表單

表單的作用就是使用者提交資訊給伺服器 使用form標籤建立表單,標籤中的action屬性,屬性指向的是伺服器的位址 提交表單時會提交到action屬性對應的位址。使用input建立提交表項,並且必須指定name屬性以便獲取提交的表項 一些特殊的情況,我們的 只在某些特殊瀏覽器中執行,而不需要在其他瀏...