一、vertical-align:垂直對(duì)齊方式
定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。inline inline-block元素才具備此屬性
- top 元素的頂端與行中最高元素的頂端對(duì)齊
- middle 此元素放置在父元素的中部。(小寫x的中部)
- bottom 元素的頂端與行中最低的元素的頂端對(duì)齊。
以上值與 line-height 相關(guān)的
- text-top 元素的頂端與父元素字體的頂端對(duì)齊
- text-bottom 把元素的底端與父元素字體的底端對(duì)齊。
baseline 默認(rèn)。元素放置在父元素的基線上。
=>加vertical-align的同排元素都要vertical-align； =>vertical-align可以解決img下方間隙問(wèn)題；
二.背景
-
背景顏色默認(rèn)是從border-box開(kāi)始繪制的
* 默認(rèn)值：background-clip:border-box; -
如果要改變繪制區(qū)域的話可以使用
* background-clip:padding-box; * background-clip:content-box;
image.png
background-color -背景顏色 background-image -背景圖片 url(‘路徑’); background-repeat -背景平鋪
- no-repeat-不平鋪
- repeat-x：x軸平鋪
- repeat-y：y軸平鋪
background-position :x y -背景位置
- X軸的值的值：
- 一、left左對(duì)齊 center水平居中 right右對(duì)齊
- 二、%
- 三、px
Y軸的值:- 一、top頂部對(duì)齊 center垂直居中 bottom底部對(duì)齊
- 二、%
- 三、px
注意=>如果給一個(gè)值：第二個(gè)值默認(rèn)center（50%）; 值：X軸的值 Y軸的值如果給的是方位值：可以顛倒
多背景及兼容
多背景：（用逗號(hào)分開(kāi)）
-
先寫的背景圖片會(huì)蓋住后寫的背景圖片
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
三.圓角 (border-radius)
border-radius：50%和100%一樣，最多到50%；
分樣式
- border-top-left-radius:
- border-top-right-radius:
- border-bottom-right-radius:
- border-bottom-left-radius:
復(fù)合樣式=>border-radius 圓角：
- 四個(gè)值： 左上 右上 右下 左下
- 三個(gè)值： 左上 右上左下 右下
- 兩個(gè)值： 左上右下 右上左下
- 一個(gè)值： 所有角一樣的值
單位： % px
box-shadow
- box-shadow支持多個(gè)值,中間用逗號(hào)隔開(kāi).
默認(rèn)是外陰影 可以設(shè)置成inset 內(nèi)陰影
支持負(fù)值
-
默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
* box-shadow:-10px -10px 10px red, 10px 10px 30px red;
box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 10px 10px skyblue inset;
text-shadow
- text-shadow支持多個(gè)值,中間用逗號(hào)隔開(kāi).
