css 背景

背景颜色

background-colr背景颜色，值色值

background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
/*rgba的a代表透明度，取值0-1之间可以为小数 */
background-color: rgba(255,0,0,0.6);

背景图插入

background-image：url（图片路径）

背景图与img标签的区别

1. 背景图根据元素设置的宽高决定图片的展示内容，img图没有任何被裁减；
2. 元素的空间足够大时，背景图会出现重复显示，img没有变化；
3. 背景图不设置宽高无法显示，img自身被宽高限制；
4. 背景图可以加入其它元素（内容与文字），img不行；
5. 背景图常用于打的页面banner，或精灵图，img用于图片展示；

background-image: url(./img/nav-bg.png);
/*背景色*/
background-image:linear-gradient(#D41011,#940000);
/* 改变渐变的角度 */
background-image: linear-gradient(30deg,red,green);

背景图重复

background-repeat背景图是否重复。

/* 不重复 */
background-repeat: no-repeat;
/* 默认的x轴y轴都重复 */
background-repeat: repeat;
/* x轴重复 */
background-repeat: repeat-x;
/* y轴重复 */
background-repeat: repeat-y;

背景图定位

background-position背景图定位，值1为x轴方向位置，值2为y轴方向位置，用空格分开。 取值：百分比/像素。

精灵图

1. 精灵图需要元素宽高；
2. 整个图插入，使用定位找到精灵图位置；

背景图尺寸

background-size背景图尺寸，可以把背景图放大缩小。

background-size:高度，auto；

如果按照原始图的缩放比例，可以控制一个轴的尺寸，另一个写auto（需注意）

关键词取值

background-size：cover；图片占满整个元素不变形，会损失一部分图片；

background-size：contain；保证完整图片显示，不会损失，但可能会重复；

盒子阴影

box-shadow设置元素阴影，阴影不占位；

box-shadow: 0（x轴方向位置） 0（y轴方向位移） 10px（羽化/虚化，不为负数） 20px（阴影的扩大与缩小） red（阴影颜色） outset（内外阴影，默认外阴影）;

轮廓线

/* 去掉轮廓线 */
input {
  outline: none;
}

布局相关属性

PC端布局

pc端布局一般使用一个确定的宽度（绝对单位px），作为内容的主要显示区域，这个宽度的元素叫“版心”，版心在整个页面中水平居中。

移动端布局：界面布局简单，适配比较复杂。

浮动兼容性，可以做块级元素横置属性。

浮动属性

原则：如果一个元素浮动，它的兄弟都要浮动。

解决父元素失高

第一种：给父元素加高度；

第二种：给父级元素加overflow：hidden；（溢出隐藏）

第三种：用伪元素清除浮动，给浮动元素的父级元素加类名.clearfix。