CSS基础知识（4）

1.CSS三大特性

1.1 CSS层叠性

原则： 

            样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行哪个样式

            样式不冲突，不会重叠

1.2 CSS继承性

 概念：

       子标签会继承父标签的某些样式，如文本颜色和字号

       想要设置一个可继承的属性，只需将它应用于父元素即可    

       简单的理解：子承父业

1.3 CSS优先级

概念：

      定义样式时，经常出现两个或更多规则应用在同一元素上，此时，

      选择器相同，则执行层叠性

      选择器不同，就会出现优先级问题

 权重计算公式：

  权重叠加

   

 

2.CSS盒子模型

盒子模型有元素的内容、边框（border）、内边距（padding）和外边距（margin）组成

2.1 盒子的边框（border）

语法：

border:border-width || border-style || border-color

   

 

2.2 内边距（padding）

      padding属性用于设置内边距，是指边框与内容之间的距离

      设置：

  

 2.3 内盒尺寸计算（元素实际大小）

 2.4 padding不影响盒子大小情况

       如果没有给一个盒子指定宽度，此时如果给这个盒子指定padding 则不会撑开盒子

3.外边距（margin）

 

 3.1 外边框

      margin属性用于设置外边距，margin就是控制盒子和盒子之间的距离

 3.2  设置

 3.3 文字居中和盒子居中区别

    1.盒子内的文字水平居中是text-align:center,而且还可以让行内元素和行内块居中对齐

    2.块级盒子水平居中，左右margin改为auto

3.4 插入图片和背景图片区别

   1.插入图片我们用的最多，比如产品展示类 移动位置只能靠盒模型 padding margin

   2.背景图片我们一般用于小图标背景 超大背景图片 背景图片 只能通过 background-position

3.5 清除元素的默认内外边距

*{

  padding:0;   //清除内边距
  margin:0;    //清除外边距

}

3.6 相邻块元素垂直外边距合并

    当上下相邻两个块元素相遇时，如果上面的元素有下边框margin-bottom  下面的元素有上边框margin-top  则他们之间的垂直间距不是margin-bottom与margin-top之和

    取两个值中的较大值这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷） 

3.7 嵌套块元素垂直外边距的合并（塌陷）

   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

   父元素的上边距会与子元素的上外边距发生合并

   合并后的外边距为两者中的较大者

解决办法：

   1.可以为父元素定义上边距

   2. 可以为父元素定义内边距

   3.可以为父元素添加overflow:hidden

3.8 盒子模型布局稳定性

   按照优先使用宽度其实是内边距再次外边距

   width>padding>margin

原因：

   margin会有外边距合并还有IE6下面margin加倍的bug所以最后使用

   padding 会影响盒子的大小，需要进行加减计算其次使用

   width没有问题，我们经常使用宽度剩余法高度剩余法来做

3.9 圆角边框

border-radius:length;

3.10 盒子阴影（CSS3）

语法：

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）阴影尺寸（影子大小）阴影颜色  内/外阴影