CSS屬性
1.尺寸屬性
1.寬高屬性 width & height
-用來改變元素的寬高大小,取值: px為單位的數值,或者 %
-注意:
-塊元素和行內塊元素都可以設定寬高大小
-行內元素不起作用,大小由內容自適應
2.溢位處理
-溢位屬性: overflow
-取值:
-visible 預設值,可見
-hidden 隱藏,溢位部分不可見
-scroll 顯示滾動條,溢位時滾動條可用
-auto 自動,發生溢位時,自動新增滾動條
2.邊框
1.邊框簡寫
-通過一個屬性為四個方向設定邊框,可以設定邊框的寬度、樣式、顏色
-寬度、樣式、顏色三者缺一不可
屬性: border
取值:
width: 設定寬度,預設值3px
style: 設定邊框樣式
solid(實線)
dashed(虛線)
dotted(點線)
double(雙線)
color: 設定顏色,預設值黑色
et:
p{
border: 3px solid red;
}
2.單邊框(單獨設定某個方向上的邊框)
屬性：(上右下左)
border-top
border-right
border-bottom
border-left
取值：width style color
3.單獨定義邊框的寬度、樣式、顏色(瞭解)
border-width
border-style
border-color
4.邊框實現三角標
1.元素的寬高尺寸為0
2.元素分別設定四個方向的邊框,寬度保持一致
3.保留指定方向的邊框顏色可見,剩餘邊框顏色設定為transparent(透明色)
4.注意：
要實現三角標,必須設定四個方向的邊框,缺少的話,邊框會恢復成矩形。
et:
-新增div標籤,設定樣式如下。
div{
width: 0px;
height: 0px;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
5.輪廓線(不佔用頁面空間)
-圍繞在元素邊框周圍的線,常見於表單元素
屬性：outline
取值：width style color
-一般多取消元素的預設輪廓線。
outline: none;
6.圓角邊框
-設定元素的圓角
-屬性： border-radius
-取值：
1. 畫素
2. % 參照元素尺寸獲取
-取值情況：
1.給定一個值,表示上右下左的圓角程度都是一樣的。
border-radius: 20px;
相當於：
border-radius: 20px 20px 20px 20px;
2.給定兩個值,1和3對應,2和4對應,即對角一致。
border-radius: 20px 30px;
相當於：
border-radius: 20px 30px 20px 30px;
3.給定三個值,同樣1和3對應,2和4對應。
border-radius: 20px 30px 40px;
相當於：
border-radius: 20px 30px 40px 30px;
4.給定四個值,四個方向各自取值。
border-radius: 20px 30px 40px 50px;(上右下左)
5.改變元素形狀,百分比%,如改成圓形；
border-radius: 50%;
7.邊框陰影(盒陰影)
-屬性：
box-shadow
-取值：
1. offset-x: 陰影的水平偏移距離,畫素
2. offset-y: 陰影的垂直偏移距離,畫素
3. blur: 陰影的模糊程度,值越大越模糊,畫素
4. spread: 陰影的延伸距離
5. color: 陰影的顏色(預設黑色)
-注意：
1.瀏覽器座標系,不管是視窗還是元素,都以左上角為原點,向右和向下為x軸和y軸的正方向。
2.spread表示陰影的延伸距離,可以省略。
3.color表示陰影顏色,預設為黑色。
3.盒模型(框模型)
1.一切元素皆為框
-盒模型：
定義元素在文件中實際佔據的尺寸
-包含內容：
外邊距 邊框 內邊距 元素尺寸
-預設情況下,元素佔據的尺寸大小：
最終寬度 = 左右的外邊距 + 左右的邊框 + 左右的內邊距 + 元素寬度
最終高度 = 上下的外邊距 + 上下的邊框 + 上下的內邊距 + 元素高度
2.外邊距
-元素邊框與其他元素邊框之間的距離
-設定元素與元素之間的距離
-屬性：margin
-取值：px 或 %
-取值情況：
margin: v1;
一個值表示上右下左四個方向都設定外邊距
margin: v1 v2;
兩個值表示上下的外邊距為v1,左右的外邊距為v2
margin: v1 v2 v3;
上方外邊距為v1,下方邊距為v3,左右邊距為v2
margin: v1 v2 v3 v4;
上下右左邊距分別為v1,v2,v3,v4
-特殊用法：
-清除元素的外邊距：
margin: 0;
-設定元素在其父元素中水平居中：
margin: 0 auto;
-取值可以是正值也可以是負值,如果給負值,表示元素微調
-四個方向的外邊距單獨設定
-屬性：
margin-top
margin-right
margin-bottom
margin-left
-取值：
只給一個值,可以是畫素值,也可以是百分比 %
-頁面中具有預設外邊距的元素
body p h1~h6 ul ol
3.內邊距
-元素的內容與元素邊框之間的距離
-屬性：padding
-取值：畫素值 %
-取值情況(同margin)
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
-分別對應四個方向的內邊距屬性
padding-top
padding-right
padding-bottom
padding-left
-具有預設內邊距的元素
ul ol td 文字框 密碼框 按鈕
4.box-sizing
-作用
指定盒模型的計算方式
-屬性
box-sizing
-取值
-content-box 預設值
-元素的寬高屬性只規定元素內容區域的大小
-如果元素設定內外邊距、邊框等屬性,則元素最終的尺寸要將進行累加。
-參考盒模型公式
-border-box
-元素的寬高屬性,設定的時候包含邊框、內邊距和內容部分總共的尺寸。
-即除去外邊距的尺寸。
5.元素的顯示設定
-屬性
display
-取值
block #轉換為塊元素
inline #轉換為行內元素
inline-block; #轉換為行內塊元素
none #設定元素隱藏
-注意
block 設定元素顯示
none 設定元素隱藏
4.背景相關屬性
1.背景顏色
-屬性：background-color
-取值：顏色值
-注意：
-背景顏色從邊框位置開始繪製
-如果元素新增內邊距,也會按照背景顏色進行填充
-所有元素預設背景顏色都為透明,新建視窗為白色並不是body的背景顏色,是視窗渲染的效果
2.背景圖片
-屬性：background-image
-取值：url('圖片路徑')
3.背景圖片平鋪顯示
-如果背景圖片尺寸小於元素尺寸,會自動對圖片進行重複平鋪,直到把元素鋪滿。
-屬性：background-repeat
-取值：
-repeat 預設值,沿水平和垂直方向平鋪
-no-repeat 不重複平鋪
-repeat-x 橫向平鋪
-repeat-y 縱向平鋪
4.背景圖片的尺寸
-屬性：background-size
-取值：
-畫素值 或 %(採用當前元素的尺寸獲取)包括width height兩個值
-cover 將圖片等比拉甚至完全覆蓋元素，超出部分裁剪掉
-contain 將圖片等比拉伸至剛好被元素容納，未填充到的部分不管。
5.背景圖片的位置
-預設情況下，背景圖片從元素的左上角顯示
-屬性： background-position
-取值：
1. x y
-以畫素為單位的數值，使用空格隔開
x:背景圖片水平偏移距離，正值向右，負值向左偏移
y:背景圖片垂直偏移距離，正值向下，負值向上偏移
2. x% y%
-百分比參照元素尺寸獲取
1. 0% 0%
左上角顯示背景圖片
2. 100% 100%
右下角顯示背景圖片
3. 50% 50%
居中顯示背景圖片
3.使用方位值表示 x y
x：left / center / right
y：top / center / bottom
-如果只設定一個方向上的關鍵字，另外一個方向預設是center
6.背景屬性簡寫
-屬性：background
-取值：
color url() repeat position;
-注意：
背景圖片的尺寸大小需要單獨設定