css_02之盒模型、渐变

1、框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width;②对象实际高度=上下外边距+上下边框+上下内边距 + height;

2、外边距:margin:取值:①top(上) right(右) bottom(下) left(左);②value:一个值,四个方向相同;③top/bottom(上/下) left/right(左/右):上下一致,左右一致;④auto:左右水平居中,上下无效(前提必须设置宽度);

3、外边距合并:两个垂直外边距相遇,形成一个外边距,以值大者为主;

4、外边距溢出:父子元素,设置子元素上下外边距,结果导致作用于父元素上(父元素无边框,且设置第一个子元素时产生);解决:①父元素设置上下边框;②给父元素设置内边距,取代子元素的外边距;③父元素添加空table作为第一个子元素;

5、内边距:padding:取值:①top(上) right(右) bottom(下) left(左);②value:一个值,四个方向相同;③top/bottom(上/下) left/right(左/右):上下一致,左右一致;* 行内元素的内边距不影响其他元素;

6、背景:①背景色:background-color;②背景图片:background-image:url(相对路径);③背景平铺:background-repeat:a、repeat:默认,水平垂直都平铺;b、no-repeat:不平铺;c、repeat-x:水平平铺;d、repeat-y:垂直平铺;④背景尺寸:background-size:a、取值/百分比;b、cover:扩大背景图至完全覆盖;c、contain:背景图扩大至一边适应;⑤背景固定:background-attachment:a、scroll:默认,滚动;b、fixed:固定,背景不随滚动条改变;⑥背景定位:background-position:x(值正右偏移/横向关键字) y(值正下偏移/纵向关键字)⑦Sprites图:将所需图像移至sprites图左上角;⑧背景综合:background:color url() repeat attachment position;

css_02之盒模型、渐变

7、渐变:①线性渐变:background-image:linear-gradient(angle(方向,关键字或角度),color-point1(变化颜色,颜色 位置),color-point2……);②径向渐变:background-image:radial-gradient(【size at position】(半径at圆心位置),color-point1(颜色 位置/占比),color-point2……);③重复线性渐变:background-image:repeating-linear-gradient(angle,color-point);* color-point:位置一定要给绝对的数值(px),不要给相对 %;

css_02之盒模型、渐变css_02之盒模型、渐变

8、版本兼容性:在取值渐变函数前添加兼容前缀,①Firefox:火狐,-moz-;②Chrome:谷歌,-webkit-;③Opera:欧朋,-o-;④IE:Internet Explorer,-ms-;

上一篇:ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程,简单编程


下一篇:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程