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；

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-；

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有