css的盒模型，padding属性，border属性，margin属性，background属性，样式重置

css

css的padding属性和border属性，margin属性，background属性；

1. css优先级

css三大特征: 层叠性，继承性，优先级；
层叠性： 多种样式的叠加；样式不冲突 不会层叠；如果样式冲突，遵循就近原则；
继承性： 资源色会继承父元素的样式，可以继承的属性：text- ；font-；line-；color；
优先级： 权值越大优先级越高；（通配符选择器（0）;标签选择器（1）；类选择器（10）；id选择器（100）；行间样式（1000）；！important，优先级高于行间样式（例：background-color=blue ！important）；）
行间样式的优先级高于id选择器的优先级；
继承样式的权值为0；子元素中设置的样式会覆盖继承到样式；
样式引入的优先级：
行间样式（内联式）>内部样式(嵌入式）>外部样式（引入式）；
行间样式的优先级最高（但高不过！important）内部、外部就近原则（距离被设置元素越近优先级越高）；

2. 盒模型（ Box Model）

   也称框模型，在页面布局中将页面样色合理有效地组织在一起，形成一条完整行之有效的规则和规范，称之为盒模型；
   包括的元素：内容（content）、内填充（padding）、边框（border）、外边距（margin）几个要素。
   css盒模型的本质是一个盒子，封装周围的HTML元素；
   (1)、盒模型的相关属性：
   内容属性：
   width属性：宽度 取值：auto（默认值） 数值单位（px、em、 %、rem）
   height属性：高度 取值：auto（默认值） 数值单位（px、em、 %、rem）
   (2)、内填充（padding） 内边距：元素边距和元素内容的区域；
   单边内填充：
   padding-top（上）、 padding-right（右）、padding（下）、padding（左）；
   复合写法：
   padding：上（npx） 右（mpx） 下 （xpx）左（ypx）（顺序）；
   百分比：上下内填充和左右内填充百分比数组是相对于父元素的width属性的大小而言的；
   （3）、border（边框）：围绕元素内容和内填充的线；
   边框属性：border-right：边框宽度；
   border-style：边框样式（线性）；
   border-style：none；没有边框；
   border-style：solid；实线；
   border-style：double；双实线；
   border-style：dashed；条状虚线；
   border-style：dotted；点状虚线；
   border-color：边框颜色；
   单边属性：
   border-top上边框；
   border-top-width：上边框的宽度；
   border-top-style：上边框的样式；
   border-top-style：上边框的颜色；
   border-right和border-bottom和border-left同上；
   默认的边框颜色是元素本身的前景色；如果没有为元素本身设置边框颜色和前景色，它将于父元素的前景色一致；
   （4）、margin（外边距）：定义元素周边的空间；
   单边外间距：
   margin-top：上外边距；-right 右外边距； -bottom 下右边距；-left；左外边距；
   margin：；一个数时设置四个边的属性；两个数时上下一样，左右一样；三个数是上下样式不一样，左右样式一样；四个数时，四个数本别代表盒子的上、右、下、左四个边；
   margin：0 auto； 固定宽度且水平居中，必须与width属性配合使用，时间盒子的水平居中；
   margin值的问题： 垂直方向相邻的margin值相遇会叠加的问题；两个值相同取当前值；两个值不同时，取较大值；
   当子元素添加margin-top值时，会把父元素拉下来；
   产生问题的条件：当子元素和父元素之间没有内容，父元素没有border值；
   解决问题的方法：
   给父元素设置border-top值，
   转换思路，巧用padding值，规避margin值；
   实现效果：
   触发BFC （Block Formatting Context 块级匀速格式格式化上下文，是web页面的可视化css视觉绚烂的一部分。用于决定盒子的布局浮动相聚影响范围的一个区域）改变父级的绚烂规则。
   方法：
   position：absolute/fixed；
   display:inline-block;
   float:left/right；
   overflow：hidden；
   行级元素的上下外边距用户看不到（实际不占上下外间距的）；

3. 背景（background-）

   （1）、背景颜色：background-color：；默认值为transparent（透明） 应用于padding border所在区域；
   （2）、背景图片：backgroun-image：URL（图片地址）；
   背景图片是不占位的；
   默认背景图片的水平居中和垂直方向重负平铺；
   背景图片会铺满整个区域范围；
   背景图片是网页的装饰，只起美化页面的作用；
   背景图片写在样式中；
   背景图片不会被搜索引擎搜索到；
   图片名称可以是英文 英文和数字的混合、但不能使用中文；
   （3）、背景图是否重复
   background-repeat：repeat；默认值背景图片在水平和垂直方向都重复；
   background-repeat：repeat-x；背景图片在水平方向重复； background-repeat：repeat-y；背景图片在垂直方向重复；
   background-repeat：no-repeat；都不重复；
   （4）、背景图片的位置：
   background-position：xpos，ypos；属性值一般有两个水平位置的垂直位置用空格隔开；
   关键字：left/right/center 、top/bottom/center;
   如果只出现一个关键字，那么另一个关键字是center；
   长度值：图片的左上角是0px， 0px，负值是向盒外，正值是向盒内；
   百分比：左上角是0% 0%，右下角是100% 100%，相当于元素本身的宽度和高度设置，如果只提供一个百分数值，提供的值作为水平方向位置，垂直方向假设为50%；
   （5）、背景图关联
   background-attachment：scroll；默认值，背景图片随网页滚动而滚动
   background-attachment：fixed；图片图固定；
   （6）、复写样式：
   background： background-color（背景颜色） url（图片地址）（背景图片） background-repeat（背景图是否重复） background-position （背景图定位）background-attachment（背景图关联）；

   标准盒模型的计算公式

盒子的实际高度 =height（内容高）+padding-top（上填充/上留白） padding-bottom（下填充/下留白） border-top（上边框） border-bottom（下边框）；
盒子的实际宽度 =width（内容宽）+padding-left + padding-right + border-left + border-right；
样式重置
网页在显示的过程中由于浏览器的内核不同，对默认样式属性值得皆也不同，将所有的元素的自带样式去掉，然后重置，可以在不同内核的浏览器中都能解析到相同的属性；