一、vertical-align:垂直对齐方式
定义行内元素的基线相对于该元素所在行的基线的垂直对齐。inline inline-block元素才具备此属性
- top 元素的顶端与行中最高元素的顶端对齐
- middle 此元素放置在父元素的中部。(小写x的中部)
- bottom 元素的顶端与行中最低的元素的顶端对齐。
以上值与 line-height 相关的
- text-top 元素的顶端与父元素字体的顶端对齐
- text-bottom 把元素的底端与父元素字体的底端对齐。
baseline 默认。元素放置在父元素的基线上。
=>加vertical-align的同排元素都要vertical-align； =>vertical-align可以解决img下方间隙问题；
二.背景
-
背景颜色默认是从border-box开始绘制的
* 默认值：background-clip:border-box; -
如果要改变绘制区域的话可以使用
* 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左对齐 center水平居中 right右对齐
- 二、%
- 三、px
Y轴的值:- 一、top顶部对齐 center垂直居中 bottom底部对齐
- 二、%
- 三、px
注意=>如果给一个值：第二个值默认center（50%）; 值：X轴的值 Y轴的值如果给的是方位值：可以颠倒
多背景及兼容
多背景：（用逗号分开）
-
先写的背景图片会盖住后写的背景图片
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:
复合样式=>border-radius 圆角：
- 四个值： 左上 右上 右下 左下
- 三个值： 左上 右上左下 右下
- 两个值： 左上右下 右上左下
- 一个值： 所有角一样的值
单位： % px
box-shadow
- box-shadow支持多个值,中间用逗号隔开.
默认是外阴影 可以设置成inset 内阴影
支持负值
-
默认情况下阴影的颜色和盒子内容的颜色一致
* box-shadow:-10px -10px 10px red, 10px 10px 30px red;
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 10px 10px skyblue inset;
text-shadow
- text-shadow支持多个值,中间用逗号隔开.
