css樣式學習筆記三

2021-07-09 08:27:38 字數 1458 閱讀 6340

注:其中的內容只是自己學習時的一些筆記,好記性不如爛筆頭,在此記錄方便以後鞏固!

1、邊距

(1)內邊距

padding-top

padding-left

padding-right

padding-bottom

值為畫素值

(2)外邊距

margin-top

margin-left

margin-right

margin-bottom

值為畫素值

內外邊距都可以使用復合屬性 但是使用的時候得有個順序了  

四個值的時候分別表示  上 右 下 左 (順時針的方向)

兩個值的時候 第乙個表示上下 第二個表示左右

三個值的時候 第乙個表示上 第二個表示左右 第三個表示下

2、**設定

首先設定**的border,這個時候設定的是整個**的外圍邊框,裡面的td什麼的還是沒變化

設定table的屬性:cellspacing=0 cellpadding=0(去除各單元格之間的間距)

為**設定合併邊框模型

border-collapse:collapse
除去**之間層疊的部分

3、盒子模型

(1)盒子模型的組成

內容+內邊距+邊框+外邊距

(2)尺寸的計算

尺寸為元素實際所佔的網頁空間

寬度:非ie6瀏覽器width:

margin-left + border-left + width + border-right + margin-rigth

ie6 width: 

margin-left + border-left + width +(左右內邊距) + border-right + margin-rigth

ie6的width這個時候的width就與我們定義的不一致了,寬度會變寬,撐大了

高度:非ie6瀏覽器高度計算方法同寬度計算方法

高度=margin-top + border-top + height + border-bottom + margin-bottom

如果出現內容超出高度,則內容溢位,要想實現自動撐開,這需要設定最小高度min-height

ie6瀏覽器:

高度沒有準確的計算方法

內容超出高度 自動撐開

解決ie6瀏覽器與非ie6瀏覽器盒子模型相容性問題

*******************很重要***********************

有寬度的元素盡量避免使用padding-left、padding-right

使用了padding-left、padding-right的元素盡量不設定寬度width

在製作網頁時,先將標籤內的內外邊距去除,設定為0

CSS樣式學習筆記?

如何利用css做到 混排?把文字當作處理,當作文書處理 為了保證不佔一行 或乙個div 需要用float left這個樣式,寫海報 首字母下沉 效果需要用到這個樣式 利用標籤做導航標籤?設定list style type none float left 可以不需要標籤,如果有則也需要將list st...

css樣式學習筆記一

注 其中的內容只是自己學習時的一些筆記,好記性不如爛筆頭,在此記錄方便以後鞏固!1 web標準 結構 html 表現 樣式 行為 js 2 樣式的選擇器 1 標籤 元素選擇器 p 2 類選擇器 time1 3 id選擇器 time2 4 萬用字元選擇器 3 樣式分類 1 內嵌樣式表 在內聯樣式表中新...

css樣式學習筆記七

注 其中的內容只是自己學習時的一些筆記,好記性不如爛筆頭,在此記錄方便以後鞏固!一 屬性選擇器 css3.0以後的版本會支援的 1 選擇器 屬性 值 比如 p align right input type button 2 選擇器 屬性 input value 二 邊距 外邊距 1 ie6容易出現雙...