小白前端07-CSS特性/盒子模型/新增属性

---

1.CSS三大特性

1.1 层叠性

• 作用：相同选择器设置相同样式，此时一个样式会覆盖另一个冲突的样式，主要解决样式冲突问题。
• 层叠性原则：
  • 就近原则：样式冲突，哪个样式离结构近，执行哪个样式。
  • 样式如果不冲突，则不重叠。

  div{
    color:black;
    font-size:12px;
  }
  div{
    color:pink;
  }
  

  颜色被后面的pink覆盖，但是字号没有覆盖。

1.2 继承性

• 作用：子标签会继承父标签的某些样式，如文字颜色和字号。
  • 恰当使用继承，可以简化代码，降低CSS样式的复杂性。
  • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

1.2.1 行高的继承性

• 行高可以不跟单位，表示是当前字号的倍数
• 如果子元素没有设置行高，会继承父元素的行高
• 此时子元素的行高是：当前子元素字号的倍数

  body {
        font: 12px/1.5 "microsoft yahei";
    }
    p{
        font-size:15px;
    }
    h3{
        font-size: 10px;
    }
  

  p标签的行高为 15px乘上1.5，为22.5px的行高，此时p标签继承了父元素body的行高设置。

注意：如果子元素的字号大小小于父元素的字号，则行高不会是当前子元素字号的倍数了，而是父元素的行高！！

1.3 优先级

• 作用：当同一个元素指定多个选择器，就会有 优先级 的产生。
  • 选择器相同，则执行 层叠性
  • 选择器不同，则根据 选择器权重 执行

1.3.1 选择器权重

选择器	选择器权重
继承 或 *	0,0,0,0
元素选择器	0,0,0,1
类选择器	0,0,1,0
id选择器	0,1,0,0
行内选择器	1,0,0,0
!important 重要的	无穷大

• 注意：
  1.权重是有4组数字组成，但是不会有进位。
  2.可以理解为类选择器（10）永远大于 元素选择器（1），id选择器（100） 永远大于 类选择器（10），以此类推。
  3.等级判断从左到右，若某一位数值相同，则判断下一位数值。
  4.继承的权重是0，若该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。即有直接选中元素的样式，就执行该样式。

注意：对于a标签，由于浏览器默认制定了一个样式（蓝色，有下划线），所以父元素的设置对它无效。

1.3.2 权重叠加

• 权重叠加：如果是复合选择器，则会有权重叠加，需计算权重。
• 如ul li{ ... }和li{ ... }，前面的权重为0,0,0,1+0,0,0,1=0,0,0,2，后面的为0,0,0,1，则选择前面的样式。如.div li，权重为0,0,1,0+0,0,0,1=0,0,1,1。

a:hover，权重为0,0,0,1+0,0,1,0=0,0,1,1，:hover是伪类选择器，权重为0,0,1,0。

---

2.盒子模型（BOX Model）

• 网页布局
  • 首先利用CSS设置好盒子的大小，摆放好盒子的位置
  • 最后把网页元素放入盒子里面
• 盒子模型由四部分组成：元素的内容、边框（border）、内边距（padding）、外边距（margin）。
  • 盒子里的文字和图片等元素是 内容区域
  • 盒子的厚度是 边框
  • 盒子内容与边框的距离是 内边距 （类似单元格的cellpadding）
  • 盒子与盒子之间的距离是 外边距 （类似单元格的cellspacing）

---

3.盒子边框（border）

3.1 概念

• 语法：border: border-width || border-style || border-color
  • 边框可以综合设置：如border:2px solid red;（没有顺序）

和font属性的综合写法不一样，font:font-style font-weight font-size font-family;是固定顺序。

• 属性：
  • border-width：边框的粗细，单位是px
  • border-style：边框的样式
  • border-color：边框的颜色
• 边框的样式：
  • none：（默认值）没有边框，忽略边框的宽度
  • solid：单实线
  • dashed：虚线
  • dotted：点线

3.2 盒子四个边框分别设置

• 盒子边框分为4个：上边框（border-top）、下边框（border-bottom）、左边框（border-left）、右边框（border-right）。
• 可以分别对 边框的粗细、样式、颜色设置，如border-top-color:red;、border-left-style:solid;等。
• 可以进行综合设置：如border-top:2px solid red;

注意：要想只设置一边的边框，首先用border:none让所有边框取消，再用border-bottom: ;设置自己需要的那一边的边框。

3.3 表格的细线边框

• 原因：在表格的设置中，通过表格的cellspacing="0px"，将单元格与单元格之间的距离设置为0px，但是两个单元格之间的边框会出现重叠，是边框变粗。
• 解决：通过CSS中的 table {border-collapse:collapse; }来取消重叠现象。
  • collapse 是合并的意思
  • border-collapse:collapse;表示相邻边框合并在一起

3.4 边框会影响盒子实际大小

• 当设置边框宽度border-width属性时，会在原有的盒子大小上往外扩大一定范围。如div{width:200px; height:200px; border:20px solid red;}，此时盒子的整体大小为240px * 240px.
• 解决：
  1.测量盒子大小的时候，不量边框。（即只量内部大小）
  2.如果测量的时候包含了边框，需要width/height减去边框宽度。

---

4.内边距

4.1 概念

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

4.2 设置

• 属性：
  • padding-left：左内边距
  • padding-right：右内边距
  • padding-top：上内边距
  • padding-bottom：下内边距

注意：设置padding值后，盒子会变大。
这有“利”也有“弊”：
“利”： 可以利用padding内边距会撑开盒子，保证里面的文字一直是在盒子居中显示。
“弊”： 要想使盒子大小固定，就要减去内边距的大小。是两边的距离哦

• 简写：
  • 1个值：padding: 上下左右 内边距;
  • 2个值：padding: 上下内边距 左右内边距;
  • 3个值：padding: 上内边距 左右内边距 下内边距;
  • 4个值：padding: 上内边距 右内边距 下内边距 左内边距;

4.3 内边距不会撑开盒子的情况

• 当盒子本身没有直接指定width/height属性时，此时padding不会撑开盒子。

注意：
1.谁没有被指定，谁就不变化。若width没被指定，height被指定了，则宽度不变，高度变化。
2.子元素继承的父元素大小，不属于被直接指定。因此即使有内边距，子元素的大小还是父元素的大小。

---

5.外边距

5.1 概念

margin属性用于设置外边距，控制盒子与盒子之间的距离。

5.2 设置

• 属性：
  • margin-top: 上外边距
  • margin-right: 右外边距
  • margin-bottom: 下外边距
  • margin-left: 左外边距
• 简写：和padding属性的简写一模一样。

5.3 典型应用

• 外边距可以让块级盒子 水平居中，但必须满足两个条件：
  • 盒子必须指定了宽度（width）
  • 盒子左右的外边距都设置为auto
• 常见写法：
  • margin:0 auto; 最常见。上下外边距为0px，左右居中。
  • margin:auto; 上下左右都居中。

注意： 以上只是让块级元素水平居中，对行内元素或行内块级元素无效，因为这两个元素无法设置宽度

• 对行内和行内块的解决方法：
  • 给其父元素添加text-align:center即可。

5.4 外边距合并

• 使用margin属性定义元素垂直外边距时，可能会出现外边距的合并。
  • 垂直外边距：margin-top或margin-bottom
• 两种情况：
  1.相邻块元素垂直外边距的合并（兄弟关系）
  2.嵌套块元素垂直外边距的塌陷（父子关系）

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

• 概念：当上下两个块元素（兄弟关系），分别设置margin-bottom和margin-top时，垂直的间距并不是两者的距离和，而是取两者中较大的值作为垂直的间距。
• 取两个值中较大值的现象称为相邻块元素垂直外边距的合并。
• 解决：尽量只给一个盒子添加 margin 值。

5.4.2 嵌套块元素垂直外边距的塌陷

• 概念：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时子元素并不会相对父元素移动，因为此时父元素会同时塌陷较大的外边距值。
• 解决方案：
  1.给父元素添加overflow:hidden; 最常用
  2.给父元素定义内边距。（会影响盒子大小）
  3.给父元素定义边框。（会影响盒子大小）
  还有其他方法，如浮动、固定，绝对定位的盒子不会有塌陷问题。

---

6.清除内外边距

• 原因：网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局之前，首先清楚下网页元素的内外边距。
• 方法：

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

注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下的，但是转换成块级和行内块就可以了。

---

7.CSS3新增属性

7.1 圆角边框

• 概念：border-radius属性设置元素的外边框圆角。
• 语法：border-radius: length; radius: 半径（圆的半径）
  • 半径越大，圆角也就越大
  • 参数可以是数值或者百分比的形式
  • 如果是正方形，想设置成一个圆，把数值修改成高度或宽度的一半，或者直接写成50% border-radius:50%;
  • 这个属性是简写属性，可以分别设置4个值，分别代表左上角、右上角、右下角、左下角，也可以设置1个、2个、3个值，表示的和border属性的简写差不多。
  • 分开写：border-top-left-radius。先写上/下，再写左/右。
• 原理：所形成的圆角，是（椭）圆与边框的交集所形成的效 果。

7.2 盒子阴影

• 语法：box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow：（必需）水平阴影的位置，允许负值。负值就是阴影向左移动。
  • v-shadow：（必需）垂直阴影的位置，允许负值。负值就是阴影向上移动。
  • blur：（可选）模糊距离，也就是阴影的虚实。0是实影，越大阴影越虚。
  • spread：（可选）阴影尺寸。阴影范围的大小。
  • color：（可选）阴影的颜色。一般使用rgba()表示。
  • inset：默认是外部阴影，即什么都不写就是外部阴影。内部阴影为（intset）。

注意：
1.对于inset属性，不能写outset，如果写的话，就没有阴影效果了。默认就是外阴影。
2.盒子阴影不占空间，不影响其他盒子的排列。即阴影部分可以被其他盒子挡住。

7.3 文字阴影

• 语法：text-shadow: h-shadow v-shadow blur color
  • h-shadow：（必需）水平阴影的位置，允许负值。
  • v-shadow：（必需）垂直阴影的位置，允许负值。
  • blur：（可选）模糊的距离。
  • color：（可选）阴影的颜色。