这是我参加第四届青训营笔记创作活动的第1天

一.选择器

通配选择器 *
标签选择器（标签+{}）
id选择器
类选择器
属性选择器
选择器组例：

body,h1,p,div{color:yellow}

用逗号分隔

二.颜色

rgb（0-255，0-255，0-255）
#0-255 0-255 0-255 （用十六进制表示）例：#00ff00表示绿色
hsl(色相，饱和度，亮度)

三.设置字体

1.设置字形：font-family:serif
2.设置大小：font-size:100px
3.设置字重：font-weight

四.调试CSS

右键页面选择检查

五.选择器选择规则

选择器特异度之和越大，其优先级就越高。
特异度为其id，类，标签个数相加之和。优先级高的会覆盖优先级低的属性。（类比C++多态）

六.继承关系

某些属性会自动继承其父元素的计算值
显示继承（inherit）：让不可继承变为可继承的 CSS每个属性都有初始值（initial）

七.CSS布局

包括margin，height，width，padding，border等

border:边框
paddng:内边距（px)
margin:边缘

box-sizing:boder-box表示定义了带边框的盒子例：

  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

display:

block 块级盒子
inline 行级盒子
inline-block 行内盒子
flex（重要）
grid（重要）

margin：auto表示水平居中

flex布局

flex grow
flex shrink
例：

  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

八.grid布局

grid-template-columns：100px 100px
grid-template-rows:200px 100px

用来划分网格线：
grid-are:1/1/3/3

参考：理解CSS（上）和理解CSS（下）ppt

理解CSS|青训营笔记