深入CSS（上）|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第3天

一、课程知识要点：

1. 哪条规则生效
2. CSS求值过程
3. CSS继承
4. 布局是什么
5. 布局相关技术

二、详细知识点介绍：

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值 。一般来说，在CSS中，和文字相关的比如color，font-size都是可以继承的，和模型相关的是不能继承的，比如div标签里的p标签，是不能继承像素大小的。

box-sizing是不可继承的属性,通过通配符选择器，inherit显示继承，都从父级去继承

     *{
        box-sizing: inherit;
     }
     html {
        box-sizing:border-box;
     }

初始值

一层层找没有找到父级要继承的或者是不可继承的时候要用到 CSS中，每个属性都有一个初始值

1. background-color的初始值为transparent
2. margin-left的初始值为0，可以使用initial关键字显示重置为初始值background-color:initial

CSS求值过程

布局（Layout）是什么？

1. 确定内容的大小和位置的算法
2. 根据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

• 常规流：块级，行级规则，表格布局，FlexBox，Crid布局
• 浮动
• 绝对定位

盒模型

width

1. 指定content box 宽度
2. 取值为长度、百分数、auto
3. auto由浏览器根据其他属性确定
4. 百分数相对于容器的 content box 宽度

height

1. 指定content box 高度
2. 取值为长度、百分数、auto
3. auto取值由内容计算得来
4. 百分数相对于容器的 content box 高度
5. 容器有指定的高度时，百分数才生效

padding

1. 指定元素四个方向的内边距
2. 百分数相对于容器宽度

border

1. 指定容器边框样式、粗细和颜色
2. 三种属性：border-width、border-style、border-color
3. 四个方向：border-top、border-right、border-bottom、border-left

margin

1. 指定元素四个方向的外边距
2. 取值可以是长度、百分数、auto
3. 百分数相对于容器宽度

使用margin:auto水平居中

<style>
 div{
      width:200px;
      height:200px;
      background:coral;
      margin-left:auto;
      margin-right:auto;
 }
</style>

box-sizing:border-box

overflow visible:

hidden：

scroll：

三、课后总结：

除了简单的样式属性，我们还应该更加深入的了解CSS，比如继承是什么等。