为什么学习CSS

网页样式和布局：CSS是一种用于描述HTML元素在网页上呈现的样式和布局的语言。通过学习CSS，我们可以使网页看起来更加美观、易于使用，为用户提供更好的体验。
设备和浏览器兼容性：CSS具有跨设备和浏览器的兼容性。学习CSS能帮助我们针对不同的设备和浏览器优化网页样式，确保在各种环境下都能提供一致的用户体验。
网页性能优化：通过有效地使用CSS，我们可以减少网页的加载时间、优化渲染速度，提高网站的性能。这对于用户体验和搜索引擎优化（SEO）都非常重要。
动画和交互：CSS3引入了许多新特性，如动画、过渡、变形等，使得我们可以仅使用CSS来实现一些原本需要JavaScript的动画和交互效果。这样可以减少对JavaScript的依赖，提高网站性能。
响应式设计：CSS的媒体查询功能使得我们可以为不同屏幕尺寸的设备创建自适应的布局，实现响应式设计。这对于提高网站在移动设备上的用户体验和适应性至关重要。
提高开发效率：掌握CSS可以帮助我们更快速地完成网页开发。通过组织良好的样式表，我们可以在多个页面之间重用样式，减少重复劳动，提高开发效率。

2. 选择器

元素选择器：根据HTML元素类型选择元素。例如，p选择所有的<p>元素。

-类选择器：根据元素的类属性选择元素。例如，.my-class选择具有类my-class的所有元素。

-ID选择器：根据元素的ID属性选择特定元素。例如，#my-element选择ID为my-element的元素。

属性选择器：根据元素的属性和属性值选择元素。例如，[data-attribute]选择具有data-attribute属性的所有元素，[data-attribute="value"]选择具有data-attribute属性且其值为value的所有元素。

-伪类选择器：根据元素的状态或文档结构选择元素。例如，:hover选择鼠标悬停在其上的元素，:first-child选择作为其父元素的第一个子元素的元素。

伪元素选择器：选择元素的某个部分，例如内容的前后。例如，::before选择元素内容之前的一个虚拟元素，::after选择元素内容之后的一个虚拟元素。
组合选择器：通过组合多个选择器来选择符合所有条件的元素。
- 后代选择器（空格）：例如，div p选择所有作为<div>元素后代的<p>元素。
- 子元素选择器（>）：例如，div > p选择所有作为<div>元素直接子元素的<p>元素。
- 相邻兄弟选择器（+）：例如，div + p选择紧跟在<div>元素后面的<p>元素。
- 一般兄弟选择器（~）：例如，div ~ p选择在<div>元素后面的所有<p>兄弟元素。
多个选择器：使用逗号分隔的多个选择器可以同时选择符合任一选择器条件的元素。例如，div, p选择所有的<div>和<p>元素。
内联样式的权重为 1000
ID选择器的权重为 100
类选择器、属性选择器和伪类的权重为 10
元素选择器和伪元素的权重为 1

- 继承

CSS 中的继承是一种机制，通过它，子元素可以从其父元素接收样式属性值。这使得我们可以在一个地方设置通用样式，然后让其他元素自动继承这些样式，从而减少代码的重复和提高可维护性。

并非所有的 CSS 属性都是可继承的。一些常见的可继承属性包括：color、font、text-align等。这些属性在父元素上设置后，子元素会自动继承这些样式，除非子元素上明确设置了不同的值。

布局和定位

布局的传统解决方案，基于盒子模型，依赖 display，position，float 等属性。它对于那些特殊布局非常不方便。比如，垂直居中就不容易实现。我们可能要 position + transform 才能配合完成。新的方案flex布局，可以简便、完整、响应式地实现各种页面布局。

使用了flex布局的盒子模型设置垂直居中就非常简单了，只需要设置 align-items:center; 属性常规流（Normal Flow）布局，也被称为文档流（Document Flow）布局，是浏览器默认的 CSS 布局方式。在常规流布局中，元素按照它们在 HTML 代码中的顺序自上而下、自左向右地排列。常规流布局主要包括两类元素：块级元素（block-level elements）和行内元素（inline elements）。

块级元素：
- 块级元素会独占一行，即它们会从上到下排列。
- 块级元素默认的宽度为其父容器的宽度，高度取决于其内容。
- 常见的块级元素有：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等。
行内元素：
- 行内元素会在同一行内从左到右排列，直到容器宽度不足时才会换行。
- 行内元素的宽度和高度取决于其内容，而不是父容器的尺寸。
- 常见的行内元素有：<span>、<a>、<strong>、<em>、<img>等。

在常规流布局中，元素遵循一定的规则进行排列，这些规则取决于元素的 display 属性。display 属性有几个常用值，例如：block（块级元素）、inline（行内元素）和 inline-block（既具有块级元素的特点，又具有行内元素的特点）。

虽然常规流布局是浏览器的默认布局方式，但现代前端开发中，很多布局需求无法仅依靠常规流实现。因此，CSS 提供了更加强大和灵活的布局技术，如 Flexbox、Grid、定位（Positioning）等，来满足各种布局需求

响应式设计推荐遵循的原则

媒体查询

媒体查询（Media Queries）是 CSS3 引入的一种技术，允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如screen、pit)以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。

说白了就是允许你根据设备特征（如屏幕尺寸、分辨率等）对样式进行条件性地应用。这让网页能够根据不同的设备和视口尺寸自适应地调整布局和样式，从而提高用户体验

> 思考

样式污染引发的思考：scoped原理

1、用法 scoped是实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。（事实上， scoped是一个boolean值）

2、原理（postcss）给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性

转译后

在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性（注：这就会带来其他影响）

这里的样式无效是在父组件中更改子组件的样式

3、样式穿透

当我们引入第三方组件库时，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。

在 stylus中使用 >>>

在sass和less中使用 /deep/或 ::v-deep （预编译器会不支持>>>）

改变app外层div的样式如 body

因为scope的原因，我们在组件内部的style里是改变不了app外层的div的样式，如body。如果我们要改变body，我们可以在mount阶段给body添加clas，来改变样式

为了不影响其他页面的全局样式，我们可以在离开该组件，在beforeDestroy时，删除该class

flex布局思考

align-items和justify-content的区别？

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

flex-direction 属性决定主轴的方向（也就是排列方向），有4个属性值可以设置：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

align-items 属性定义项目在交叉轴上如何对齐。

justify-content 属性定义了项目在主轴上的对齐方式。

flex:1;代表什么意思？

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex 属性属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

所以flex: 1表示的含义是等分剩余空间。

总结：

对于前端学习道路还有很多知识没有掌握，要继续努力，静心钻研

css | 青训营笔记