css_02之盒模型、渐变
2016-08-20 07:45
183 查看
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;
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),不要给相对 %;
8、版本兼容性:在取值渐变函数前添加兼容前缀,①Firefox:火狐,-moz-;②Chrome:谷歌,-webkit-;③Opera:欧朋,-o-;④IE:Internet Explorer,-ms-;
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;
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),不要给相对 %;
8、版本兼容性:在取值渐变函数前添加兼容前缀,①Firefox:火狐,-moz-;②Chrome:谷歌,-webkit-;③Opera:欧朋,-o-;④IE:Internet Explorer,-ms-;
相关文章推荐
- 精通css 02 可视化格式模型
- CSS基本功:盒模型、选择器优先级
- 02_用户模型设计+数据分区
- CSS属性之盒子模型(Box Model)
- css(二)盒子模型和不同元素类型
- 可视化格式模型:css的浮动、定位、盒模型
- css盒模型理解知记
- css 背景色渐变---和背景色透明
- CSS布局模型——流动、浮动、层模型
- 使用HTML语言和CSS开发商业站点_盒子模型
- CSS学习02-选择器
- CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能
- css布局模型
- [我的PHP之旅] YII框架学习 02.控制器 视图 模型
- CSS中的框模型(box model)/margin、padding、border介绍/ 外边距层叠collapsing计算
- 【JAVAWEB学习笔记】02_HTML&CSS
- CSS 盒模型
- css3盒模型学习--利用box自适应布局
- 【牛腩】div+css模型
- tensorflow38《TensorFlow实战》笔记-07-02 TensorFlow实现基于LSTM的语言模型 code