css

背景是一个复合属性：

1、background-color: 背景颜色

颜色的取值方式:

1、英文

2、16进制  #fff

3、rgb 

4、rgba()  a代表透明度 取值是 0 - 1  0代表完全透明 1代表完全不透明

2、background-image: url(图片的路径);

3、background-repeat: 控制背景图片是否平铺

取值：

1、repeat  平铺

2、no-repeat 不平铺

3、repeat-x  水平平铺

4、repeat-y  垂直平铺

4、background-attachment: 控制背景是否跟随滚动

取值：

1、scroll  默认值 跟随滚动

2、fixed  固定不动

5、 background-position: 控制背景图片的位置

取值：

1、方位名词：left right top  bottom center  顺序可以不论 但是建议遵守第一个值水平 第二个值垂直

2、像素取值：以当前盒子的左上角为0 0  原点 水平向右 垂直向下 交互的点就是图片显示的起始点

需要考虑顺序

3、百分比：了解一下

4、可以混写：注意顺序

背景图片和img的区别：

img不需要专门写宽高就能够显示在页面上

而背景图片默认是撑不开容器的 需要专门写宽高

一般产品插入图都推荐使用img  而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图

而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）

布局的套路：

1、划分模块（分盒子）

2、根据模块书写结构

3、实体化盒子（框架搭建）

4、细化盒子里面的细节

三大特性：

1、继承性：

后代元素会继承祖先元素的一些css样式  跟文字相关的都可以继承 ： font-系列  text-系列 line-height  color 都可以继承 

自己身上有的css样式不会继承：a链接的颜色和下划线都需要单独写

2、层叠性：

在权重相同的情况下 后渲染的会覆盖掉先渲染的

3、优先级（权重）

不同的选择器之间有不同的权重

继承 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

!important写在属性值的后面分号的前面  只能作用单条css样式

权重会涉及到叠加（复合选择器）

0（行内样式）,0（id选择器）,0（类选择器）,0 （标签选择器）  代表权重 不同的选择器会在不同的地方控制对应的值

盒子的四大组成部分：width + height: 盒子的内容区域padding：内填充border：边框margin：外边距内盒模型：width + height: 盒子的内容区域padding：内填充border：边框内盒模型的数值一旦改变 整个盒子大小会发生变化外盒模型：margin变化不会影响盒子大小 一般用来移动盒子

border: 边框的宽度 边框的样式 边框颜色;

边框的样式:

solid 实线边框

dashed 虚线边框

dotted 点线边框

double  双实线边框

背景的快捷键：bg+

边框快捷键：bd+

单一方向上的边框：border-方位名词

top

bottom

left

right

拆分写法：（了解）

border-width: 10px;

border-style: solid;

border-color: pink;

无敌拆分写法 (了解)

*/

/* border-top-width: 10px;

border-top-style: solid;

border-top-color: pink; */

边框圆角：边框圆角和边框没有半毛钱关系

取值：具体的像素  值越大 圆角越明显

50% 正圆 （正方形） 椭圆（长方形）

胶囊形：首先是长方形 然后写一个贼大的数就完事了 （数值取短的那一边的一半

边框合并

只针对表格  写在table上面

padding:介乎于border和盒子内容之间

取值：

1个值：代表上下左右

2个值：第一个值代表上下  第二个值代表左右

3个值：第一个值代表上  第二个值代表左右  第三个值代表下

4个值：上右下左  顺时针

单一方向的取值：padding-方位名词

padding-top

padding-bottom

padding-left

padding-right