CSS基础
CSS是啥？
CSS：层叠样式表（cascading style sheets)，一种用来为结构化文档（基本就是HTML）添加样式的语言。
举例来说，要选择一个HTML页面里所有的段落元素，然后将其中的文本改为红色，可以这样写CSS
p {
color:red;
}
CSS可以给文档添加自定义样式 比如：改变标题和链接的颜色以及大小。
也可以修改布局 比如：将一个单列布局变成双列，包含主要内容区域和存放相关信息的侧边栏区域。
另外还可以用来做一些特效和动画
CSS可以将样式与文章结构分离
CSS基础规则
选择器：选择一个或多个需要添加样式的元素，多个元素之间用,隔开
声明：一个单独的规则，如color:red；用来指定添加样式元素的属性。
属性：指定要改变的元素样式
属性的值：从指定属性的众多外观中选择一个值
规则集包含在{}中
每个声明里要用:将属性与属性的值分隔开
每个规则集里要用;将各个声明分隔开
选择器
选择器有许多不同的类型。上面只介绍了元素选择器，用来选择HTML文档中给定的元素。
元素选择器
也称作标签或者类型选择器。
选择的内容：所有指定类型的HTML元素。
p 选择的就是 <p>
p {
...
}
ID选择器
具有特定id的元素
#my-id 选择的就是 元素的属性中id="my-id"的元素 例如 <div id="my-id"></div>
#myid {
...
}
类选择器
具有特定类的元素
class="my-class"
.my-class{
...
}
属性选择器
拥有特定属性的元素
img[src] {
...
}
伪类选择器
特定状态下的特定元素（比如：鼠标指针悬停）
a:hover
a:hover{
...
}
层叠与继承
层叠
css代表层叠样式表（cascading style sheets),理解第一个词cascading很重要
css
h1{
color:red;
}
h1{
color:blue;
}
html
<h1>This is my heading.</h1>
显示的效果
image-20210818091128899
优先级
浏览器中有选择器的优先级决定规则，基本就是选择器越具体越优先
内联样式 > ID选择器 > 类选择器 > 元素选择器
继承
一些设置在父元素上的属性会被子元素继承，有些不能
css
p {
color: blue;
}
html
<p>text in p <span>text in span</span></p>
结果
image-20210818091733633
CSS怎么学
Learn to Code - for Free | Codecademy
Learn the Latest Tech Skills; Advance Your Career | Udacity
CSS 教程 (w3school.com.cn)
CSS 教程 | 菜鸟教程 (runoob.com)
免费学习编程 - Python、JavaScript、Java、Git 等 (freecodecamp.org)
前面的挑一个学一遍就行，下面的会陪你一辈子
持续学习查阅资料
CSS - 学习 Web 开发 | MDN (mozilla.org)
这是一个CSS文档库，基本会是程序员最常来的地方
CSS Almanac | CSS-Tricks
另一个css文档库，用有别于mdn的形式组织css知识，还有非常活跃的css社区，里面有各种奇技淫巧。作为MDN的补充非常合适。
image-20210818093419631
CSS常用规则
布局
盒模型
在css中，所有元素都被一个个的盒子包围着，理解这些盒子的基本原理，是我们使用css实现准确布局、处理元素排列的关键。
盒子分为块级盒子和内联盒子
image-20210818095257498
css中组成一个块级盒子需要：
content box ：这个区域用来显示内容，大小可以通过设置width和height。
padding box：包含在内容区域外部的空白区域；大小可以通过padding相关属性设置。
Border box：边框盒包裹内容与内边距。大小通过border相关属性设置
Margin box：这是最外面的区域，是盒子和其他元素之间的空白间距。大小可以通过margin相关属性设置。会与其他元素的margin重叠但不叠加
块级盒子block
盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大多数情况下，盒子会和父容器一样宽
每个盒子都会换行
width和height属性可以发挥作用
内边距padding，外边距margin，和边框border可以将其他元素推开
除非特殊指定，诸如标题和段落等默认情况下都是块级盒子。
display:block;
通过box-sizing属性定义盒子宽高作用的对象
box-sizing默认是content-box 这时候width和height作用在content
当设置box-sizing为border-box时，这时候width与height作用在border
box-sizing=content-box（默认） box-sizing=border-box
如果想要所有元素都使用border-box，设置所有元素继承该属性
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
内联盒子inline
盒子不会产生换行
width与height属性将不起作用
垂直方向的内边距、外边距、以及边框会被应用但是不会把其他处于inline状态的盒子推开
水平方向的内边距、外边距、以及边框会被应用且会把其他处于inline状态的盒子推开
诸如a标签、span标签等默认都是inline
display:inline;
内联块inline-block
内联块是一个不会切换到新行但可以设置width与height属性的
display:inline-block;
文档流
盒模型解释了一个元素块的尺寸；那元素块在整篇文档中的位置是如何确定的呢？
正常文档流
默认的，就是按照盒模型的规则进行排布。
块级元素，按照基于父元素的书写顺序的块流动方向放置
每个块级元素会在上一个元素下面另起一行，他们会被设置好的margin分隔。块级元素是垂直布置的。
弹性布局
弹性盒子在布局中使用最广泛的方式
弹性盒子是一种用于按行或者按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间
image-20210818112600039
在容器上加display:flex属性。默认就可以得到一个横排的布局。
就盒模型而言，此时容器类似于块级元素（display:block），但宽度默认 由子元素 决定。
子元素类似于inline-block元素，可以设宽高，且不换行。其原本的display属性基本被无视了，这是一种隐含的盒模型状态。
image-20210818113042883
弹性模型非常灵活。可以利用flex-direction属性控制子元素的排布顺序
image-20210818113405177
flex容器类似块级盒子，可以设置比子元素所需更大的宽度。
justify-content属性可以确定此时子元素如何分配空间
align-items是子元素在主轴方向的对齐方式
image-20210818114435185
image-20210818114418432
定位
position用来定位盒子在整个页面中的位置
静态定位
position:static默认就是正常文档流中的定位
相对定位
position:relative相对定位在文档流中仍然占据位置，但是可以使用top,left,bottom,right属性进行位置的偏移操作。
绝对定位
position:absolute绝对定位完全脱离文档流。绝对定位的盒子的定位，大小，你完全可以指定。
绝对定位的top,left,已经不是相对于原位置了，而是相对于一个非static定位的父元素容器。
固定定位
position:fixed固定定位，相对于浏览器窗口进行top,left的偏移
z-index
因为非static值的position属性让元素之间可以互相覆盖
CSS提供z-index属性来控制哪个元素覆盖在最上层
默认文档中下面的元素在上层
装饰
文字
文字的字体font-family
文字的颜色color
文字的粗细font-weight
文字的样式font-style
文字的装饰text-decoration
文字的对齐方式text-align
文字的大小font-size
image-20210818130058807
背景
background - CSS（层叠样式表） | MDN (mozilla.org)
背景颜色background-color
背景background-image
背景渐变background-image
background-image: linear-gradient(red, orange);
详细的使用可以参照CSS Gradients | CSS-Tricks
边框
border | CSS-Tricks
border - CSS（层叠样式表） | MDN (mozilla.org)
image-20210818131030839
阴影
box-shadow | CSS-Tricks
box-shadow - CSS（层叠样式表） | MDN (mozilla.org)
image-20210818131205190
text-shadow - CSS（层叠样式表） | MDN (mozilla.org)
image-20210818131637359
交互
鼠标样式cursor
cursor - CSS（层叠样式表） | MDN (mozilla.org)
image-20210818131804759
动画transition
transition - CSS（层叠样式表） | MDN (mozilla.org)
动画animation
animation - CSS（层叠样式表） | MDN (mozilla.org)
CSS精益求精
css调试
利用browser的inspect进行元素审查，查看元素的样式
image-20210818132959819
css扩展
css预处理器
less
提供了变量支持
提供类似函数的功能 mixin
image-20210818133746109
sass
stylus
css革新
未来可能就不需要写css了，之间将css写在js里 css-in-js
代表的有styled-components
image-20210818134001598
tailwindcss
可以收拢css的选择
我们可以不单独的写css文件，只需要指定相应的class就行
image-20210818134254857
发表评论 取消回复