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

选择器的优先级（生效规则）

根据特异度确定

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

.btn.primary中的样式会覆盖.btn的样式

继承

子元素继承父元素的样式

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

<strong>的父元素为<p>,则会继承<p>的样式

显式继承

其中有一些是不可继承的，如果需要实现继承，可以使用显式继承

初始值

如果没有设置属性或没有找到父元素的样式设置就会使用初始值

CSS求值过程

cdpn.io/webzhao/deb…

布局

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

布局技术

1.常规流

行级
块级
表格布局
FlexBox
Grid布局

2.浮动

3.绝对定位

盒模型

width

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

height

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

padding

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

border

指定容器边框样式、粗细和颜色

三种属性

border-width
border-style
border-color 四个方向
border-top
boder-right
border-bottom
border-left

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

<div></div>

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

两边都为auto可以实现水平居中的效果

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

margin在垂直方向上有边距的合并，取一个较大的边距进行计算，利于文字排版

box-sizing: border-box

CodePen Embed - 青训营/CSS/box-sizing

overflow

overflow用于控制溢出部分的展示
visible
hidden
scroll
CodePen - 青训营/CSS/overflow (cdpn.io)

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