这是我参与⌈第五届青训营⌋伴学笔记创作活动的第2天

CSS工作流程

渲染树：计算出每一个节点位置，每一个属性样式，再渲染成真正的页面
*为通配选择器，改所有的样式

* {
  color: red;
  font-size: 20px;
}
</style>

[]为属性选择器，当有此属性时选中
input[type="password"]当属性为特定值时选中

也可以对属性值做匹配，并不是严格等于某一特定值时才选中
例如

a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }

a[href^="#"]表示属性值以#开头即可被匹配上
结果

伪类

状态伪类
结构性伪类

状态伪类

a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

link为默认状态 visited为已访问过 hover鼠标移动到上面时 active鼠标点击时
结构伪类

  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}

选中父级第一个child

  input.error {
    border-color: red;
  }

表示既有input又有error才可被选中

组合

颜色 HSL

Hue 基本颜色
Saturation 饱和度，色彩鲜艳程度，越高越鲜艳
Lightness 亮度，越高颜色越亮
alpha 透明度，越高颜色越不透明

Font—family

font-family: Optima, Georgia, serif;
Optima字体没有就用Georgia，再没有就用serif字体族
！最后一定要加一个通用字体族

white-space

normal合并空格，换行
nowrap强制不换行
pre保留所有（包括空格和换行）
pre-wrap一行显示不下，自动换行，保留空格
pre-line合并空格，保留换行

选择器特异度

继承

文字相关可继承父级元素的值
盒模型不可继承
若不可继承的属性想继承父级元素，用inherit关键字，显式的从父级继承。
当一个元素不可继承，但又没给定属性值，或可继承，但上一级元素也没有给定属性值时，会用到初始值
initial属性值可重置为初始值

padding

10px 20px表示上下10px 左右20px
两个值表示上下左右，若四个值顺序为上右下左

margin collapse

    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }

两个盒子上下距离为100px，取最大值，不相加

border-box

包含border、padding在内的宽度高度

overflow

visible

hidden

scroll
可以滚动
auto
超出了就滚动，没超出就不显示滚动条

display属性

inline行级盒子
block块级盒子
inline-block行级，可设置宽高，可简单理解为一张图片

BFC内部的盒子不会与外部的margin合并

Flex box

默认为stretch

flex缩写 flex-basis为未被伸缩前原本的值

Grid布局

划分网格

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

列划分为100px 100px 200px
行划分为100px 100px

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

（fr单位表示：份）

grid area

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

简写

.a {
  grid-area: 1/1/3/3;
}

绝对定位 position

relative属性值

相对于本应该在的位置进行偏移
流内其他元素当没偏移一样布局

absolute属性值

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局产生影响

fixed

对于窗口定位
其余和absolute属性值一样

总结

学好css需要保持好奇心，不断学习，充分利用MDN和W3C CSS规范！
通过今日学习，掌握了许多之前没见过的属性，对页面布局方式、定位等知识掌握更熟练，更加深入理解CSS。

理解CSS|青训营笔记