学习前端的知识总结8

1. CSS的三大特性

1.层叠性：给相同的选择器设置相同的样式，此时会覆盖（只会覆盖冲突部分）
2.继承性：子标签会继承父标签的某些样式（text-、font-、line-、color等）
3.优先级：如果选择器相同，则遵循层叠性；若不同，根据选择器权重执行；（继承和*<元素选择器<类选择器、伪类选择器<id选择器<行内样式 style=“”<！important重要的）
注意：复合选择器涉及权重叠加（不会进位）；

2. 盒子模型

1.1 看透网页布局的本质：

• 先准备好相关网页元素
• 利用CSS设置好盒子样式，然后摆放到相应位置
• 往盒子里装内容

1.2 盒子模型组成

边框(border)、内边距(padding)、外边距(margin)、实际内容(content)
1.边框： 
边框宽度(粗细)border-width：

div {
    width: 300px;
    height: 200px;
    border-width:5px;
}

边框样式border-style:

• solid实线边框
• dashed虚线边框

• dotted点线边框

  div {
  width: 300px;
  height: 200px;
  border-style:solid;
  }
  

边框颜色border-color:

 div {
    width: 300px;
    height: 200px;
    border-color:red;
    }

复合型写法：

div {
    width: 300px;
    height: 200px;
    border:1px solid red;#没有顺序要求
    }

只设置单边框：

div {
    width: 300px;
    height: 200px;
    border-top:1px solid red;#top为上边框，其余框同理（bottom下边框、left、right）
    }

补充：表格细线边框：利用collapse去掉重叠部分

table {#只给四边添加边框
    border:1px solid red;
}

table,
td {#给全部添加边框,但是重叠部分会加粗
    border:1px solid red;
}

table,
    td {#给全部添加边框,重叠部分会合并
    border:1px solid red;
    border-collapse:collapse;
}

1.3边框会影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1.测量盒子大小的时候，不量边框.
2. 如果测量的时候包含了边框,则需要width/height 减去边框宽度

1.4盒子模型之内边距

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

复合型写法：padding：5px 10px 15px 20px;
注意：
只跟一个值：上下左右皆是这个值；
两个值：前面代表上下内边距，后面的代表左右内边距；
三个值：上、左右、下
四个值：上、右、下、左
(padding也会影响盒子的实际大小，需要宽度减去左右内边距）
如果不指定width、height则padding不会撑开盒子的宽度

案例5

1.5盒子模型之外边距

控制盒子与盒子之间的距离

• margin-left 左外边距
• margin-right 右外边距
• margin-top 上外边距
• margin-bottom 下外边距

复合型写法：margin：5px 10px 15px 20px; 与内边距一致

1.6外边距典型应用

外边距可以让块级盒子水平居中，必须符合：盒子必须制定了宽度，左右外边距都设置为auto
两种表达方式：

• margin：0 auto;
• margin-left:auto;margin-right:auto;

行内元素或者行内块元素给其父元素添加text-align:center实现水平居中

1.7外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

• 可以为父元素定义上边框。
• 可以为父元素定义上内边距。
• 可以为父元素添加overflow:hidden

1.8清除内外边距

网页元素会有一些自带的内外边距，不同浏览器默认的也不一致，因此，我们需要先清除内外边距

* {
    padding： 0；
    margin： 0；

}

注意：行内元素尽量只设置左右的内外边距，可以转换为块级或者行内块元素；