CSS 是什么？

CSS定义

css：层叠样式表（cascading syle sheets）一种用来为结构化文档（基本就是html）添加样式的语言。

CSS结构

选择器：选择一个或多个需要添加样式的元素。选择器有不同的类型和优先级：

选择器选择器权重
继承、* 0,0,0,0
元素（标签）选择器 0,0,0,1
类/伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!Important ∞
声明：一个单独的规则，用来指定添加样式元素的属性
属性：指定要改变的HTML元素样式
属性的值：从指定属性的众多外观中选一个值

选择器	选择器权重
继承、*	0,0,0,0
元素（标签）选择器	0,0,0,1
类/伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
!Important	∞

CSS常用规则

CSS布局

布局

盒模型

在css中，所有元素都被一个个的盒子包围着，理解这些盒子的基本原理，是我们使用css实现准确布局、处理元素排列的关键。

盒子分为块级盒子和内联盒子

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隔，块级元素是垂直组织。
内联元素不会另起一行，只要在其父级块元素的宽度内有足够的空间，他们与其他内联元素被安排在同一行。如果空间不够，溢出的文本或元素将移动到新的一行。

弹性盒子(最常用)

一种按行或列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。弹性布局可以完成90%的布局要求，非常灵活。

一键开启弹性盒子，替代正常文档流。声明弹性布局，得到一个横排的布局，这是一个隐含的盒模型状态，容器类似于block，但宽度默认由子元素决定，子元素类似于inline-block，可设置宽高且不换行：
```
.container {
  display:flex
}
复制代码
```

更改弹性盒子的主轴。flex-direction属性控制子元素的排布顺序。

.container {
  display:flex;
  flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

子元素主轴线上如何对齐。justify-content属性，确定子元素如何分配空间。

    .container {
      display: flex;
      justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    }
复制代码

子元素横轴线上如何对齐。align-items确定子元素如何垂直对齐

    .container {
      display: flex;
      align-items: stretch | flex-start | flex-end | center | baseline;
    }
复制代码

定位

CSS定位布局-Static, Relative, Absolute, Fixed, Sticky & z-index

非static值的定位让元素非常独立可控，广泛运用在弹窗、下拉选项、固定导航栏等场景。

浮动

......

装饰相关

字体

属性	描述
font-size	字号，单位通常为px
font-family	字体，如Microsoft YaHei
font-weight	粗细,默认粗细用normal或400表示，加粗为bold
font-style	样式 italic(斜体)
font	复合属性，字体相关属性连写，顺序为：style(可选)→weight(可选)→size→family

边框

属性	描述
border-style	样式，dotted点边框 / dashed虚线边框 / solid实线边框 / double两个边框
border-width	边框宽度，thick(3px) / medium(2px) / thin(1px)
border-color	边框颜色
复合属性	border: 5px solid red

阴影

box-shadow:h-shadow v-shadow blur spread color inset;
复制代码

值	描述
h-shadow	必需。水平阴影的位置，允许负值。
v-shadow	必需。垂直阴影的位置，允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset）改为内部阴影

文字阴影

text-shadow: offset-x | offset-y | blur-radius | color;
复制代码

交互

cursor-pointer

cursor: help | wait | crosshair | not-allowed | zoom-in | grab ;
复制代码

:hover

动画

developer.mozilla.org/zh-CN/docs/…

CSS调试技巧、扩展和革新

CSS调试

Chrome浏览器vue调试工具devtools一键下载安装无须配置

CSS扩展

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。

要使用CSS预处理器，必须在web服务中服务器安装CSS编译工具。

流行的CSS预处理器:

less，扩充的功能：变量类型，编译后会填充到对应位置，函数：实现样式的批量生产。
scss

CSS革新

css的发展已经不一定需要写css文件了以style-components代表的css-in-js方案，通过组件的方式复用属性，用js的力量武装css

//creat a title component that'll render an <h1> tag with some styles
const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;
//creat a wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;
复制代码

//Use title and wrapper like any other React component - expect they're styled!
render(
    <Wrapper>
        <Title>
            Hellow world!
        </Title>
    </Wrapper>
)
复制代码

以tailwindcss为代表的方案，改样式就改HTML文件即可，好处：css的选择是无限制的，收拢css的选择（bg-blue-400）

1629354629(1).jpg

【青训营】-CSS基础