这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

笔记大纲

CSS基础：基础规则、学习资源
CSS盒模型、文档流、布局、定位
CSS调试及预处理CSS、js-in-css

CSS是啥

CSS基础规则

选择器选择了一个或多个需要添加样式的元素
*声明一个单独的规则，如color：red
属性： 人类可读的标识符，指示您想要更改的元素的样式特征(例如font-size, width, background-color) 。
值：每个指定的属性都有一个值，该值指示要更改指定属性的样式特性

重叠与继承

CSS代表层叠样式表（Cascading Style Sheets），层叠的表现方式是理解CSS的关键，在相同优先级的情况下，顺序在最后的生效。一个选择器越具体越优先常用选择器权重优先级： !important > id > class > tag

CSS怎么学？

codecademy.com
udacity.com
freecodecamp.org
developer.mozilla.org/zh-CN/docs/…
W3C文档

CSS 常用规则

CSS布局相关

盒模型

CSS中组成一个块级盒子需要：

Content box 显示内容；通过width、height设置
PAdding box 包围在内容区域外部的空白区域；通过padding设置
Border box 边框盒包裹内容和内边距。大小通过border设置
Margin box 最外围的区域，盒子和其它元素之间的空白区域，大小通过margin相关属性设置

display属性

“盒子”——块级盒子（block box）和内联盒子（inline-box）。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为

块级盒子（block box）

绝大数情况盒子和父容器一样宽
每个盒子换行
width和height会生效
padding、margin、border会将其它元素从当前盒子周围推开。真正占用面积：宽度=width+2padding+2border 高度=height+2padding+2border 可以通过设置 box-sizing:border-box 将宽高指定为border-box（默认是content-box）

内联盒子（inline-box）

盒子不会产生换行
width和height属性不起作用
垂直方向的内外边距、边框会被应用但不会推开其它处于inline状态的盒子。
水平方向的内外边距、边框会被应用并且会推开其它处于inline状态的盒子。
< a>、 < span> 默认inline状态

行内块盒子（inline-block）

在内联和块之间的中间状态。可以不切换到新行且可以设置宽高。

弹性盒子（flex）

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
在容器上加上display:flex.可以获得一个横排的布局。
此时容器类似于块级元素，但宽度是由子元素决定的；
子元素类似于inline-block元素，可以设置宽高且不换行。其原本的display被无视。
flex-direction：控制子元素的排布顺序
justify-content: 确定子元素如何水平分配空间，比如center是居中
align-items: 子元素垂直对齐方式。如center居中、baseline按文字对齐

定位（position）

static|relative|absolute|fixed

static 静态定位（默认）
relative 相对定位在文档流中仍占据位置，可以用top,left,bottom,right 做偏移操作（移动了还占坑）
absolute 绝对定位，完全脱离文档流，top、left相对于一个非static的父元素（跑了也不占坑了）
fixed 相对于浏览器窗口的 z-index 属性，控制元素上下层，越小越底层

装饰相关

文字
背景 background
border
box-shadow 盒子阴影可设置内外阴影、阴影扩大、双阴影
text-shadow 文字阴影
cursor 光标
transition 转变弹性动画效果
animation

CSS进阶

CSS调试

在开发者工具computed窗口进行CSS的调试右键选中元素检查

可以在styles面板直接修改预览元素样式

CSS扩展

CSS预处理器另一种组织CSS的方法是利用一些对于前端开发者可用的工具，让我们可以稍微更程序化的编写CSS。预处理器以原文件为基础运行，将它们转换为样式表。

变量复用

less
sass
stylus

#less
#变量
@link-color: red
#mixin  类似于函数
.mixin(@color:black; @margin:10px;@padding:20px){
  color:@color;
  margin:@margin;
  padding:@padding;
  }
.class1 {
   .mixin(@margin:20px;@color:red);
 }

CSS革新

现在我们已经不一定需要写css文件了。

以styled-components为代表的css-in-js方式，用JS的力量武装css

const Title =styled.h1`
        font-size:1.5em;
        text-align: center`

render(
<Title>
  Hello
</Title>)

utility-class方案：改样式就改html文件即可，用有限的选择帮助我们定好设计规范。

//一下两个样式是相同效果的
<div class="p-2 bg-blue-400 text-white">
    hello
</div>
<div style="padding:8px;background:rgba(96,165,250);color:white">
    hello
</div>

后记

码的有点累了，夜也深了，UI设计的部分就明天好了。to be continued

【青训营】CSS基础