01 基础知识
Casading规则,选择器,继承,值和单位,盒模型
01_层叠,优先级
层叠三大原则
- 样式表来源
- 选择器优先级
- 源码位置
由层叠概念引申出的CSS代码good practice
- 选择器尽量少用id
- 尽量不要用!important
- 自己的样式加载在引用库样式的后面
01_继承
-
大部分具有继承特性的属性跟文本有关: color,font,font-family,font-size,font-weight,font-variant,font-style,line-height,letter-spacing,text-align,text-indent,text-transform,white-space以及word-spacing
还有少部分列表,表格的属性
-
可以使用inherit关键字显示指定一个属性值从其父元素继承
...
02 布局
常规流,弹性盒子,grid,定位
02_块级格式化上下文(block formatting context)
格式化上下文的布局规范为: "在一个块格式区域中,盒子会从包含块的顶部开始,按序垂直排列.同级盒子之间的垂直距离会由'margin'属性决定.相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠.在一个块格式区域中,每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序,则盒子的右外边缘与包含块右边缘重合)."
02_外边距塌陷
会产生外边距塌陷的情况
- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空白元素自己上下外边距相邻
消除外边距塌陷的方法
- 在两个相邻的上下边距之间增加border,padding或者内联元素,使之不相邻;
- 在父子元素重叠时,除了上述方法,还可以设置父元素为BFC,使得父子不在同级BFC中
...
03 层叠上下文(The Stacking Context)
层叠上下文（The Stacking Context）是CSS中的一个概念，用于规定元素之间如何在三维空间中呈现。当一个元素发生层叠时，它所处的层叠上下文会将该元素和其所有子元素视为一个整体，通过控制层叠顺序来呈现在其他元素之前或之后。层叠上下文是根据元素的一些特定属性来生成的，一般情况下只有满足下列某些属性的元素才会产生层叠上下文：
- 根元素（HTML元素）
- position为absolute或relative且z-index值不为auto的元素
- position为fixed或sticky的元素
- flex子元素（包括伸缩项）
- grid子元素（包括子网格项）
- opacity属性值小于1的元素（注意不包含为1的元素）
- transform属性值不为none的元素
- filter属性值不为none的元素
- perspective属性值不为none的元素
- isolation属性被设置为isolate的元素
- mix-blend-mode属性值不为normal的元素
- mask元素
- clip-path元素
- backdrop-filter属性值不为none的元素
- shape-outside属性值不为none的元素
当元素形成层叠上下文时，它们的层次顺序由z-index属性的值决定，z-index值越大的元素越靠近用户，越小的越靠近背景。当两个元素的层叠上下文之间存在嵌套时，子元素的层叠顺序不会影响到父元素的层叠上下文。
了解层叠上下文的概念和规则，有助于准确地布局和定位元素，也可以有效地避免一些层叠相关的问题，例如z-index不生效等。
04 变形,过渡,动画
CSS中的变形、过渡和动画都是用于实现元素的动态效果，可以让页面更加生动、吸引人，提升了用户体验。它们的主要区别在于实现方式不同，下面分别进行介绍。
- 变形（Transform）
变形是指通过改变元素的形态、大小、位置或方向来实现元素效果的过程。CSS中提供了一系列的变形函数，如位移（translate）、旋转（rotate）、缩放（scale）、变形变换（matrix），这些函数可以综合使用实现各种复杂的变形效果。常用的场景包括移动菜单、旋转图标、轮播图等。
- 过渡（Transition）
过渡是指在元素从一种状态到另一种状态之间实现渐变的过程。过渡可以用来平滑过渡元素的属性变化，例如改变元素的背景颜色或者文字颜色。过渡需要定义属性的起始状态和结束状态，以及变化时长和缓动函数。通过CSS的transition属性，可以对属性变化进行定义实现过渡效果。
- 动画（Animation）
动画是指在元素中通过关键帧变化来实现动态效果的过程。CSS动画通常由多个关键帧（keyframes）组成，每个关键帧中定义了一个元素在不同时间的样式属性值。在动画中，可以通过指定每个关键帧的动画时长、动画速度等属性来实现不同的效果。通过CSS的animation属性，可以对动画类型、时长、延迟和重复次数，以及缓动函数等进行定义实现动画效果。
总的来说，变形、过渡和动画是CSS中常用的动态效果实现方式，可以通过它们来增强网页的互动性和美观性。熟练掌握它们的使用，可以提高开发效率，实现更多的交互和创新效果。
05 响应式设计
响应式设计（Responsive Design）是指在不同的设备上为网站或应用程序进行自适应布局和设计，以求在各种不同的屏幕分辨率和大小下都有最佳的用户体验。CSS中的响应式设计通常通过媒体查询和弹性布局等技术进行实现。
媒体查询（Media Queries）是CSS3新增的用于针对不同设备屏幕媒介查询的特性，用于指定不同的样式表规则应用于不同的设备或屏幕大小上。媒体查询的语法通常形如 @media screen and (max-width: 767px) {...}，其中screen表示查询屏幕，max-width表示最大宽度为767px。当页面加载时，浏览器会根据媒体查询规则匹配当前设备和屏幕，然后应用相应的样式规则。
弹性布局（Flexbox）是一种新的布局模型，用于实现更灵活和高效的响应式布局。在弹性布局中，元素会自动调整它们的大小、位置和顺序，以适应不同的设备分辨率和视口大小。通过设置容器的 display: flex; 属性和其它一些布局和排列方式，可以实现灵活、自适应、多列、流体和垂直居中等复杂布局效果。
在实际开发中，响应式设计需要考虑元素的大小、位置、字体大小、图像大小、背景图片等各种因素，以便在不同设备和不同分辨率下保持最佳的用户体验。同时需要进行充分的测试和兼容性考虑，以确保网站能够良好的适应各种设备，提供无缝的用户体验。
06 CSS生态相关
CSS生态相关主要指与CSS技术相关的开源工具、库、框架和平台等，这些资源都是前端工程师必备的宝贵资产，可以帮助开发者更高效、更优质地完成前端开发。
以下是CSS生态相关常用的资源：
-
CSS预处理器（CSS Preprocessor）：如Sass、Less等，可以让CSS语言更加灵活、可维护、可重用。
-
CSS框架（CSS Framework）：如Bootstrap、Foundation等，可以提供一套基础的CSS样式库，快速构建网站。
-
CSS模块化（CSS Module）：如CSS Modules、PostCSS等，可以解决CSS命名冲突、文件依赖、可重用性等问题。
-
CSS自适应布局（CSS Responsive Layout）：如Flexbox、Grid等，提供了更灵活、自适应
总结与心得
CSS（层叠样式表）是一种用于描述网页样式的语言，它和HTML一起构成了现代网页的核心技术之一。以下是我个人对CSS的一些分析和思考：
- CSS的层叠性及其优点
CSS中的“层叠”（cascading）指的是多个样式规则之间按照一定的优先级顺序进行叠加处理的过程。这种机制使得多个样式规则可以在同一个元素处同时生效，从而实现样式的继承、重载和覆盖等效果。
由于层叠机制的存在，CSS可以实现样式和结构的分离，使得网页设计变得更加灵活、高效。通过定义一些通用的CSS样式，可以让多个元素都共享这些样式，从而减少了代码量，提高了维护性和可读性。此外，还可以通过层叠机制来优化网页的性能，减少HTTP请求和页面加载时间。
- CSS与响应式设计
响应式设计是指网页能够自适应不同设备和屏幕尺寸的布局和样式的设计方法。CSS在响应式设计中发挥了重要作用。通过CSS的媒体查询（Media Query）功能，可以根据设备的屏幕尺寸、分辨率和方向等属性，来为不同的设备提供不同的CSS样式，从而实现响应式布局和样式。
在响应式设计中，CSS还可以使用弹性布局（Flexbox）和网格布局（Grid）等功能，来实现灵活的布局和定位，以满足不同设备和屏幕尺寸的需求。
- CSS框架与组件化设计
随着Web应用的不断发展，越来越多的开发者开始使用CSS框架（如Bootstrap、Materialize等）来加速开发过程和提高开发效率。CSS框架通常包含一套预定义的样式和组件，可以帮助开发者快速构建网页和应用，并保证其样式和布局的一致性。
同时，CSS框架也鼓励和支持组件化的设计方法。通过将整个网页分解为一系列独立的组件，每个组件都拥有自己的样式、标记和行为，从而实现模块化和可重用的代码。这种设计方法具有更好的可维护性、可拓展性和可重用性。
总之，CSS作为现代网页开发的核心技术之一，具有广泛的应用和不断的创新。熟练掌握CSS的各种属性和功能，可以协助开发者实现高效、灵活和美观的网页设计。
