CSS基础（三）

目录

1、css三大特性

层叠性

继承性

优先级

2、盒子模型 

    盒子模型概念及本质：

3、边框（border）

01.边框组成：

02.border-collapse：

4、内边距（padding）

01.padding含义：

02.内边距对盒子大小的影响：

5、外边距（margin）

01. margin含义

02. margin应用

03.外边距合并

6、清除内外边距

7、行高的继承性：

eg01. body {   font:12px/1.5 Microsoft YaHei； }

---

1、css三大特性

层叠性

• - 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• - 样式不冲突，不会层叠

继承性

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

• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

优先级

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

• - 选择器不同，则根据选择器权重执行

---

2、盒子模型 

    盒子模型概念及本质：

• 把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
• CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：border，padding，margin，content

---

3、边框（border）

01.边框组成：

• 边框样式：  border-style : none/solid/dashed/dotted

• 边框颜色：  border-color

• 边框宽度(粗细)：  border-width

• 边框简写：  border: 1px solid red;

02.border-collapse：

• border-collapse 它控制相邻单元格的边框( border-collapse: collapse; 表示相邻边框合并在一起)

   注：边框会影响盒子实际大小，解决办法：

         - 测量盒子大小的时候,不量边框。

        - 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

---

4、内边距（padding）

01.padding含义：

设置内边距，即边框与内容之间的距离

02.内边距对盒子大小的影响：

- 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

- 解决办法：  如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

---

5、外边距（margin）

01. margin含义

设置外边距，即控制盒子和盒子之间的距离。

02. margin应用

外边距可以让块级盒子水平居中的两个条件：

• - 盒子必须指定了宽度（width）。
• - 盒子左右的外边距都设置为 auto 。
• -eg. margin-left: auto; / margin-right: auto;/margin: auto;/margin: 0 auto;
• -以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

03.外边距合并

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

• 解决方案：
• 尽量只给一个盒子添加 margin 值。

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

• 解决方案：
• - 可以为父元素定义上边框。
• - 可以为父元素定义上内边距。
• - 可以为父元素添加 overflow:hidden。

---

6、清除内外边距

 * {

    padding:0;   /* 清除内边距 */

    margin:0;    /* 清除外边距 */

  }

---

7、行高的继承性：

eg01.
 body {
   font:12px/1.5 Microsoft YaHei；
 }

• - 行高可以跟单位也可以不跟单位
• - 如果子元素没有设置行高，则会继承父元素的行高为 1.5
• - 此时子元素的行高是：当前子元素的文字大小 * 1.5
• - body 行高 1.5  这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高