CSS day_04(6.15)背景颜色图片、修饰元素、浮动

一、背景颜色和背景图片

1.背景颜色

backgroud-color:#fff; 背景颜色会在元素的最底层 颜色可以使用任何色值(十六进制 rgb rgba 单词) 一般这个值都需要我们重新设置

2.背景图片的插入

backgound-image:url(路径)； 注意背景图和img标签的图片插入是有区别的： img标签插入图片在默认情况下直接是图片本身的大小 backgound-image:url(路径)；的方式不能直接使用并显示图片，必须要给当前元素设置宽度和高度才能显示出来背景图

3.背景图的重复(平铺)

图片被平铺到元素中会出现的两种情况： 图片小于元素范围，出现重复，哪个方向有空余空间，就向哪个方向重复 图片范围大于元素范围，显示不全

背景图片的重复/平铺方式： background-repeat: repeat; /* 默认值，X Y都重复 */ background-repeat: repeat-x; /* 水平重复 */ background-repeat: repeat-y; /* 竖直重复 */ background-repeat: no-repeat; /* 不重复，背景图仅显示一次 */

4.背景图的定位

background-position: 这个属性的组合有点多，写可取值： X轴(水平方向) left center right; Y轴(竖直方向) top center bottom; 先说左右，再说上下 background-position: center center; 水平竖直都居中，可以简写成一个 background-position: 0px 0px;  默认的原点在左上角 background-position: 150px 50px;  向右向下 background-position: -50px -50px;  可以是负值，反方向,向左向上

5.精灵图

CSS Sprite 直译为CSS精灵图，网页图片处理的一种方式 UI会把多个小图标整合到一张图中，再利用背景图定位，选取到需要的小图标位置展示出来 优点：减少了向服务器的请求次数，进行了CSS优化

思路： 确定要显示的范围，需要把图标的宽高设定好 插入需要的精灵图，最好加上背景图不重复 改变图片定位，注意原点在左上角，一般是通过像素数值

阿里图标库：iconfont-阿里巴巴矢量图标库 里面有很多的矢量图，还可以自定色尺寸，免费使用 第一次使用需要注册一下，手机号就可以注册，非常方便

6.背景渐变

背景图可以设置出渐变的效果，目的是为了美化页面，其中最多的就是线性渐变 1.颜色设定：(默认颜色从上向下排列) background-image:linear-gradient(颜色1,颜色2,颜色3,...) 2.角度设定：（角度单位deg） 改变渐变角度 background-image:linear-gradient(角度,颜色1,颜色2,...)  3.渐变色范围设定： background-image:linear-gradient(角度,颜色1 起始位置 结束位置,颜色2 起始位置 结束位置,...) 范围的设定需要写在每个颜色色值的后面，值可以使用长度单位或者%

新版浏览器的写法： background-image: linear-gradient(90deg,blue 0 100px,#fff 100px 200px,red 200px 300px); 浏览器未更新的旧版写法： background-image: linear-gradient(90deg,blue 33%,#fff 33%,#fff 67%,red 67%); 看浏览器F12有没有改变角度的小转盘，如果没有说明浏览器不是新的，暂时用旧版写法

7.背景图的尺寸

background-size: 没有设置任何尺寸时使用图片本身的大小，宽度和高度都是auto默认值 可以用px设置成具体的值，也可以使用百分比 background-size: 100% 50%;  宽度占满屏幕，高度占50% background-size: 100% 100%; 宽度高度都占满整个屏幕，除非图片完美适配，否则图片会变形 background-size: 100% auto; 宽度占满屏幕，高度自动适配，高度有所牺牲 background-size: auto 100%; 高度占满屏幕，宽度自动适配，宽度有所牺牲 至于是要牺牲宽度还是高度，具体问题具体分析，比如学子的沙发可以裁掉，有的背景图不能裁 background-size: cover；铺满整个容器，多余的部分会被裁掉 background-size: contain；至少有一张完整的图呈现出来，一定会有多余的空间

二、 元素的美化和修饰

1.边框的圆角问题

圆角分别代表元素四个角的弧度半径，取值可以是长度单位，也可以是百分比

border-radius: 边框圆切角的半径 radius 半径r,用圆来切角，可以把直角变为圆角

写法1：使用像素 border-radius: 7px; 写法2：使用百分比 border-radius: 17%; 只有一个值的时候，四个角的弧度是统一的 写法3：给不同的角设置不同的弧度(不常用) border-top-left-radius: 20px; 单独给左上角设置 border-radius: 10px 30px;  左上右下 右上左下 对角线 border-radius: 10px 20px 30px; 左上 右上和左下 右下 border-radius: 10px 20px 30px 40px;  左上角开始顺时针转

特殊形状 圆形：需要元素的宽度、高度一致，border-radius:50% 椭圆形：不需要元素的宽高一致，border-radius:50% 胶囊型：border-radius:高度的一半

2.盒子阴影

box-shadow 元素的阴影效果 值1：必须写，阴影的X轴偏移量，建议使用绝对单位px 可以为负值，阴影为反方向 值2：必须写，阴影的Y轴偏移量，建议使用绝对单位px 可以为负值，阴影为反方向 值3：羽化值，默认为0，羽化值越大，程度越强，不允许有负值 值4：阴影的扩散半径，默认0可以省略不写，还可以为负值(用的最少) 值5：阴影颜色，使用色值 值6：内、外阴影，默认outset外阴影 内阴影inset

3.列表项标识符

1.浏览器为所有列表提供了上下外间距与左侧内边距，记得提前设置样式重置 ul,ol { margin:0; padding:0;} 2.让列表项标识符消失： ul { list-style:none; }

不管是ul还是ol，都可以在li中改：li { list-style-type: none; }

4.表单标签的外轮廓线

为什么我已经去掉边框了，在点击输入框时还会显示边框？注意那个不是边框，而是外轮廓线 表单输入元素(例如：输入框)在获得焦点后，边框外还有一圈“外轮廓线(outline)” 轮廓线在不同浏览器展现的效果不同。当元素获取焦点时，表单元素的轮廓线会被激活显示 一般情况下，可以在初始化样式或样式重置中去掉或改写。 outline:none; 去掉外轮廓线

5.常用光标(cursor)样式 下课休息一会 

cursor: default; 箭头(默认值) cursor: pointer;  小手，用这个 cursor: text;  文本输入符(工字型) cursor: crosshair; 十字光标，光标变成了小十字准心，截图/取色 cursor: wait; 光标等待或出现沙漏 后面这些不用记，了解一下 cursor: move; 移动，变成了一个拖拽图标 cursor: progress;处理中 cursor: help; 帮助，光标右下角出了一个小问号 cursor: copy;拷贝，光标上多了个小加号 cursor: hand; 手,HBuilder有提示，但是谷歌不支持，老IE支持

三、 元素浮动

1.float属性

float单词的含义是"浮动"，它最初的作用是为了制作“文本环绕” float:left 左浮动，是向父级元素的左侧边界靠拢 float:right 右浮动，是向父级元素的右侧边界靠拢

2.元素浮动的作用

元素浮动到后期，作用变成了排版，让块级元素能够横向排列。 使用浮动后的元素就不再是流式布局，它们将脱离文档流，变为浮动布局 浮动布局的兼容性很好，低版本IE照样兼容

3.元素浮动后产生的效果

父级元素对于浮动后的子元素失去了包裹性【父元素失去了所有子元素撑起来的高度，高度坍塌】 破坏原来的文档流【子元素可以横向排列，依然在父元素的宽度范围中】 元素浮动会“块状化”【行内 行内块都会变成块级】 当子元素浮动后，外间距的重叠现象消失【兄弟间的上下重叠，父子间的上下边重叠】