背景颜色渐变&vertical-align

1,背景色渐变background
注意:渐变是css3中的东西,请考虑加上兼容处理。
渐变的类型:线形渐变linear-gradient(); / 径向渐变 radial-gradient();
渐变的条件:给上两种以上的颜色。
2,关于html和body大小与背景设置
一般情况下盒子有多大,给其设定的背景颜色等就有多大,但是对于html和body例外。它们两个在默认情况下是没有高度的,其高度会跟随内容的填充而增加,宽度默认是100%。
3,Vertical-align的使用
A,作用:
① 控制单元格内容的垂直对齐方式。
② 控制多个行内(块)元素在一行上的垂直对齐方式
③ 控制行内(块)元素相对其父元素垂直对齐方式
注意: vertical-align 只对行内与行内块元素、表格单元格元素生效:不能用它垂直对齐块级元素
B,使用:
a.表格单元格的值:top / middle / buttom
b.相对行的值:top / buttom
注意:
(一)一行的高度由该行最高元素的高度决定的,而不管其父元素有多高,除非我们显式的设置了行高==父元素的高度。
(二)然后行高会存在继承关系,如果我们设置了父元素的行高,那么子元素会自动的继承在父元素上设置的行高,这在很多时候都不是我们想要的,所以我们需要在子元素里面重新定义行高。
c.相对父元素的值:baseline(默认值)/ middle / text-top / text-buttom / sub /super / length / % 等。
C,基线的概念:
在各种内联相关模型中,凡是涉及到垂直方向的排版或者对齐的,都离不开最最基本的基线(baseline)。其他中线顶线一类的定义也离不开基线。
① 作为父元素的块级元素基线
块级元素如果只有一行的内容,那么就以字母x的底部作为基线。
当有多行内容时,每行都有一个基线,两个相邻基线间的距离就是行高
② 作为子元素的一个空的行内(块)元素基线
以下margin的底部作为基线
③ 作为子元素的一个非空的行内(块)元素基线
以含有元素的基线作为基线
注意: 一个行内块里面可能含有多个子元素,不同子元素的基线可能不一样,但是最终他们的基线会排在同一行上,这一行也会作为外层行内块元素的基线。
④ 作为子元素非空的一个行内(块)元素基线【但是它设置了overflow的值不等于visible,如设置为hidden】
对于button等设置overflow无法修改他的基线
以下margin的底部作为基线文本基线
⑤ 本元素基线(以x的底部作为基线/以字母x的底部作为基线

猜你喜欢

转载自blog.csdn.net/weixin_43748930/article/details/84662336
今日推荐