本次课程主要内容
- 基础知识
- 布局和定位
- 层叠上下文
- 变形, 过渡 , 动画
- 响应式设计
- CSS 生态相关
CSS 简要发展历史
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页展示效果的语言。它可以定义字体、颜色、布局、边框、背景等方面的样式，使得网页看起来更加美观、规范、易读。
CSS的发展历史可以大致分为以下几个阶段：
- 1994年-1996年，CSS的诞生。在Web诞生初期，网页的排版样式是直接写在HTML标签中的，这导致了维护困难、代码冗长的问题。于是，W3C组织开始着手开发CSS规范，并在1996年发布了CSS1标准。
- 1998年-2007年，CSS的成熟和普及。随着CSS在网站开发中的应用越来越广泛，W3C不断更新和完善了CSS规范，同时也涌现出了许多优秀的CSS框架和预处理器，如Bootstrap、LESS、SASS等，使得CSS的编写变得更加高效、灵活、可重用。
- 2009年至今，CSS3时代的到来。CSS3是CSS规范的最新版本，新增了大量的特性和功能，如动画、渐变、阴影、弹性盒子、网格布局等，使得网页样式的实现更加丰富、灵活、响应式。
总之，CSS从最初的实验性语言到如今的成熟体系，经历了一个漫长而又不断创新的发展过程，为Web设计和开发带来了前所未有的变革。
① 基础知识
1.1 选择器
1.2 选择器的优先级
内联
>id>class=attribute=pseudo-class>type=pseudo-element
- 首页
理解CSS | 青训营笔记
2023-04-2357阅读24分钟
关注
本次课程主要内容
- 基础知识
- 布局和定位
- 层叠上下文
- 变形, 过渡 , 动画
- 响应式设计
- CSS 生态相关
CSS 简要发展历史
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页展示效果的语言。它可以定义字体、颜色、布局、边框、背景等方面的样式，使得网页看起来更加美观、规范、易读。
CSS的发展历史可以大致分为以下几个阶段：
- 1994年-1996年，CSS的诞生。在Web诞生初期，网页的排版样式是直接写在HTML标签中的，这导致了维护困难、代码冗长的问题。于是，W3C组织开始着手开发CSS规范，并在1996年发布了CSS1标准。
- 1998年-2007年，CSS的成熟和普及。随着CSS在网站开发中的应用越来越广泛，W3C不断更新和完善了CSS规范，同时也涌现出了许多优秀的CSS框架和预处理器，如Bootstrap、LESS、SASS等，使得CSS的编写变得更加高效、灵活、可重用。
- 2009年至今，CSS3时代的到来。CSS3是CSS规范的最新版本，新增了大量的特性和功能，如动画、渐变、阴影、弹性盒子、网格布局等，使得网页样式的实现更加丰富、灵活、响应式。
总之，CSS从最初的实验性语言到如今的成熟体系，经历了一个漫长而又不断创新的发展过程，为Web设计和开发带来了前所未有的变革。
① 基础知识
1.1 选择器
1.2 选择器的优先级
内联
>id>class=attribute=pseudo-class>type=pseudo-element
属性继承
CSS 中的 值 和单位
盒子模型
盒模型例子
② 布局和定位
2.1 概述
2.2 块级格式化上下文(block formating context)
块级格式化上下文（Block Formatting Context）是Web页面中的一种CSS渲染模式，它决定了元素如何布局和相互作用。
具体来说，当一个HTML元素形成了BFC时，它会创建一个独立的渲染区域，在这个区域内的元素布局不会影响到外部元素。这也就意味着，同一个BFC区域内的元素会按照一定的规则进行垂直方向的布局，而且它们之间的边距、浮动等属性也会受到特殊的处理。
常见的触发BFC的条件包括：
- 根元素
- 浮动元素（float属性不为none）
- 绝对定位元素（position为absolute或fixed）
- display属性值为inline-block、table-cell、table-caption、flex、inline-flex的元素
- overflow属性值不为visible的元素
在实际开发中，我们可以利用BFC的特性，来解决一些布局上的难题，如清除浮动、避免margin重叠等问题。同时，BFC还可以提高页面渲染的效率和性能。
2.3 内联级格式化上下文（Inline Formatting Context）
内联级格式化上下文（Inline Formatting Context）是Web页面中的另一种CSS渲染模式，它定义了内联元素（inline-level boxes）如何排列和相互作用。
具体来说，当一个HTML元素形成了IFC时，它会创建一个独立的渲染区域，其中内联元素会按照一定的规则进行水平方向的布局，同时也会受到特殊的处理，例如可以通过vertical-align属性来控制它们在垂直方向上的对齐方式。
常见触发IFC的条件包括：
- 根元素
- display属性值为inline、inline-block、inline-table、inline-flex的元素
- 设置了text-align、vertical-align、line-height属性的元素
- 在块级元素中的文本内容
在实际开发中，我们可以利用IFC的特性，来解决一些布局上的问题，如水平居中、文本垂直居中等。同时，IFC还可以提高页面渲染的效率和性能。因此，在理解和应用BFC的基础上，深入理解IFC同样是很有必要的。
一些例子
- 单行文字垂直居中
<style> .title{ background: #000; color: #fff; font-size: 18px; line-height: 36px; } </style> <body> <div class="title">我是标题</div> </body>
- icon 和 文字 保持居中垂直
<style> .title{ background: #000; color: #fff; font-size: 18px; margin-left: 4px; vertical-align: middle; } .image{ width: 24px; height: 24px; vertical-align: middle; } </style> <div class="warp"> <div class="title">奥里给</div> <img src="图片相对地址" class="image"> </div>
2.4 外边距塌陷
2.5 弹性盒子布局(常用✌️✌️✌️)
可以去看下我这篇文章 详细讲解了flex 布局
2.6 Grid 布局
CSS Grid Layout是CSS的一项新特性，它可以帮助我们灵活、高效地构建网页布局。GRID布局简单来说就是基于行和列进行定位而构成自适应的二维网格。
以下是使用Grid布局实现网页布局的基本步骤：
- 在父容器中定义grid环境：通过给父元素设置display: grid属性，创建一个grid环境。
- 划分行与列：通过grid-template-rows、grid-template-columns属性划分出网格的行与列，并可设置其大小等信息。
- 定义子元素位置：通过grid-row、grid-column属性指定每个子元素要占据哪些行与列，或者使用grid-area属性直接为每个子元素指定代表区域。
- 调整子元素大小：通过使用grid-row-span、grid-column-span、grid-row-start、grid-row-end、grid-column-start、grid-column-end等属性，对子元素进行跨行或跨列操作、或者调整子元素的尺寸。
- 完善样式：对子元素进行样式调整，如添加背景色、边框等，使之更符合设计要求。
学习和使用CSS Grid布局可以优化网页排版布局，增强网页的美观度和交互性。同时，该技术也在不断完善和发展中，为Web开发提供更多的可能性。
示例 :
demo代码: CSS部分
.container { display: grid; grid-template-rows: repeat(2, 1fr); /* 将容器划分为两行，每行占据相等的空间 */ grid-template-columns: repeat(2, 1fr); /* 将容器划分为两列，每列占据相等的空间 */ gap: 10px; /* 设置网格之间的间隔 */ background-color: pink; } .box1 { grid-row: 1 / 2; /* 指定该元素跨越第一行到第二行 */ grid-column: 1 / 2; /* 指定该元素跨越第一列到第二列 */ background-color: #f00; /* 设置背景色 */ } .box2 { grid-row: 1 / 2; /* 指定该元素跨越第一行到第二行 */ grid-column: 2 / 3; /* 指定该元素跨越第二列到第三列 */ background-color: #0f0; /* 设置背景色 */ } .box3 { grid-row: 2 / 3; /* 指定该元素跨越第二行到第三行 */ grid-column: 1 / 2; /* 指定该元素跨越第一列到第二列 */ background-color: #00f; /* 设置背景色 */ } .box4 { grid-row: 2 / 3; /* 指定该元素跨越第二行到第三行 */ grid-column: 2 / 3; /* 指定该元素跨越第二列到第三列 */ background-color: #ff0; /* 设置背景色 */ }
HTML 部分
<div class="container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> <div class="box4">Box 4</div> </div>
效果图:
2.7 FLex 布局 和 Grid 布局 对比
2.8 定位
| 定位属性 | 作用描述 |
position: static |
默认值，元素在正常流中位置不受影响 |
position: relative |
相对定位，元素的位置相对于其正常位置进行偏移，但仍保持在正常流中 |
position: absolute |
绝对定位，元素的位置相对于最近的非static祖先元素确定，如果不存在，则相对于初始包含块。会从正常流中删除，并不保留原本位置的空白 |
position: fixed |
固定定位，元素的位置相对于viewport（浏览器窗口）进行偏移，不随滚动条滚动，会从正常流中删除，并不占据空间 |
position: sticky |
粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位 |
③ 层叠上下文（CSS Stacking Context）
3.1 概念
CSS层叠上下文（CSS Stacking Context）是CSS rendering的一个重要概念，它定义了元素如何根据z-index属性进行层次叠加。
具体来说，每个层叠上下文由一组HTML元素和它们的子元素构成，并且这些元素按照一定的规则垂直地贴合在一起形成平面。在这个平面中，每个层叠上下文都有自己的层级关系，即z轴方向的顺序。
在同一个层叠上下文中，具有较高z-index值的元素会被放置在具有较低z-index值的元素上方；而在不同层叠上下文中，其z-index值的比较就不仅仅局限于自身了，如以下几种情况：
- 层叠上下文父元素的背景色：当两个层叠上下文相互重叠时，如果父元素的背景色与子元素不同，则背景色优先于 z-index 判断。
- 层叠上下文的层级分离: 在不同层叠上下文之间，即使后者的位置在前者之下，元素的层级也可能反转，也就是说放在前面的元素可能被遮挡。
- 根据文档流的顺序：在相同层叠上下文中，后面出现的元素会覆盖在前面出现的元素之上。
3.2 形成层叠上下文的条件
形成层叠上下文的条件包括：
- 根元素即HTML元素
- position属性值为absolute、relative、fixed、sticky的元素
- display属性值为flex、inline-flex、grid、inline-grid的元素
- opacity属性值不为1的元素
- transform属性值不为none的元素
- mix-blend-mode属性值不为normal的元素
- filter属性值不为none的元素
- z-index属性值为除auto以外的数字的元素
- isolation属性值为isolate的元素
- -webkit-overflow-scrolling属性值为touch的元素
当一个元素形成了层叠上下文时，它就具有了一定的独立性和优先级，其子孙元素会在该元素内部形成自己的层叠关系，并且不会影响到其他元素。同时，该元素也可以通过z-index属性与其他元素进行相对位置调整。
3.3 编写z-index 的建议
