HTML系列：
CSS系列：
- CSS基础知识筑基
- 常用CSS样式属性
- CSS选择器大全48式
- CSS布局秘籍(1)-任督二脉BFC/IFC
- CSS布局秘籍(2)-6脉神剑
- CSS动画-transition/animation
- CSS处理器-Less/Scss
01、CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)，对HTML网页内容进行统一外观样式设计和管理，给网页进行各种装饰，让她变得美观，是HTML的化妆师。（Cascading ：/kæsˈkeɪdɪŋ/（水）倾泻；连续传递；串联。cascade 的现在分词）
主要优点：
- 美化页面：提供丰富的外观设计能力，大量的样式属性。
- 可复用：可以统一管理HTML页面的样式，可复用。
- CSS3可以实现网页样式、内容分离，并对网页元素实现像素级的样式管理。
1.1、知识框架
详见前端技术路线图
1.2、CSS 是怎么工作的？
下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。
当浏览器遇到无法解析的 CSS 代码会发生什么？——什么也不会干，继续解析下一个CSS样式。
02、CSS基础知识
2.1、基础语法
CSS样式由 选择器名 花括号 {n个申明(属性:值);} 组成。
- 选择器就是用来选择要改变样式的HTML元素。
- 属性与值用半角冒号
:分开，半角分号;结尾，分割多组键值。一般建议一行一个键值对。 - 如果属性值有多个词组，需加上引号保护起来。
- 不合法、错误的申明会被忽略（跳过），CSS总是怎么宽容！
🔸代码风格：
- 小写：一般都采用小写，字母开头，字母、数字、下划线组成。
- 短线分割：当选择器里是类名时，且类名由多个单词组成，则各个单词之间下划线
_、或中划线-分割。多用中短线：background-image - 当使用并集选择器时，各个元素竖着写。
🔸注释：/*注释，可换行*/
📢注意空格：一定注意关键字（
and、or）、符号（括号()，加+、减-）之间的空格，不然有些时候会有些莫名其妙的问题。其中加+、减-会首先当做正负数符号
2.2、CSS 的简写属性
简写属性就是将同一主题的属性的定义集中在一起，空格分割，如background、font、border、margin、padding。
margin-top: 1px; margin-left: 2px; margin-bottom: 3px; margin-left: 4px; /* 上面四个属性的简写形式，同时也覆盖他们样式*/ margin: 1px 2px 3px 4px; border-top-color: blue; border-color: red; /* 四个边颜色简写，覆盖上面的样式 */ border-width: 2px; border-style: dotted; border: green solid 5px; /* 综合边框样式的简写，上面所有边框的样式 */
- 覆盖：没有指定的值会被设置为它的初始值。这就意味着，⚠️它将会覆盖之前设置的值。
- 顺序：简写属性的值本身没有顺序要求，但值类型一样时，就需要注意对应简写属性的规则了。
2.3、CSS的使用
| 描述 | 示例 | |
|---|---|---|
| 🔸行内样式 | 在元素的style属性上写css样式。⚠️缺点：代码耦合度高，样式不复用，不利于维护，尽量不用。 |
|
| 🔸内部（内嵌）样式 | 在样式 |
|
| 🔸外部样式（推荐） | 单独css文件定义样式，html的head中该css文件的页面都会生效，便于复用和统一管理。 |
|
<html> <head> <meta charset="utf-8"/> <title>css练习HTML预览title> <link type ="text/css" rel="stylesheet" href="css1.css" /> <style type="text/css"> pre{ color:red; } style> <style type="text/css"> @import "mystyle.css" supports(display: flex); style> head> <body> <div> <p style="color: blue;">一段p标签文字，使用行内样式stylep> <pre>pre标签文本，使用内部样式pre> <font>font标签内容font> div> body> html>
❓和@import的区别？都可以用来加载外部css资源文件，不同点：
|
@import() | |
|---|---|---|
| 资源类型 | link支持更多外部资源加载，包括css、图标 | @import是CSS语法，只支持导入css |
| 哪里使用？ | HTML页面中 | css文件、 |
🔸径向渐变radial-gradient()
从中心往四周辐射扩散的颜色渐变，（radial /ˈreɪdiəl/辐射、径向）。
radial-gradient (形状 | size at 圆心位置 , 颜色 位置% , 颜色 位置% , ... )
- shape：径向渐变的图形形状，ellipse (默认)、circle （圆）
- at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
- 坐标定位（像素、百分比）：
at 0 50%，at 10px 30px - 方位定位（top、bottom、right、left、center）：
at left top
- 坐标定位（像素、百分比）：
- size：渐变结束形状的大小，枚举值：closest-side、closest-corner、farthest-side、farthest-corner
<div class="rg"> <p>b1p> <p>p2p> <p>p3p> <p>p4p> div> <style> .rg p { width: 100px; height: 80px; text-align: center; font-size: 20px; line-height: 80px; margin: 10px; display: inline-block; } .rg p:nth-child(1) { background-image: radial-gradient(black 6px,black 10px,red,white) } .rg p:nth-child(2) { background-image: radial-gradient(circle at center,black 6px,black 10px,red,white); } .rg p:nth-child(3) { background-image: radial-gradient(at 0 80px, black 6px,black 10px,red,white); } .rg p:nth-child(4) { background-image: radial-gradient(farthest-side at 0 80px, black 6px,black 10px,red,white); } style>
🔸圆锥渐变conic-gradient()
沿着圆的时钟方向进行旋转渐变（conic /ˈkɒnɪk/锥形）
conic-gradient (开始角度/圆心位置 , 颜色 位置%|角度deg , 颜色 位置%|角度deg , ... )
- from angele：锥形渐变的开始角度，
from 0deg - at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
- 坐标定位（像素、百分比）：
at 0 50%，at 10px 30px - 方位定位（top、bottom、right、left、center）：
at left top
- 坐标定位（像素、百分比）：
<div class="cg"> <p>b1p> <p>p2p> <p>扇形p> div> <style> .cg p { width: 100px; height: 100px; text-align: center; font-size: 20px; line-height: 100px; margin: 10px; display: inline-block; } .cg p:nth-child(1) { background-image: conic-gradient(from 0deg,black 10%,green 90deg,red) } .cg p:nth-child(2) { background-image: conic-gradient(from 0deg at center 20px,black 10%,green 90deg,red) } .cg p:nth-child(3) { border-radius: 50%; background-image: conic-gradient(from 90deg,blue 60deg,green 60deg,green 120deg,red 120deg) } style>
» 锥形渐变实现的进度图效果：
<style> .pie{ width: 200px;height: 200px; /* 锥形渐变实现进度环颜色 */ background-image: conic-gradient(#7870e4 70%,#dce7f3 0) ; border-radius: 50%; padding: 20px; /* 内容居中 */ display: flex; align-items: center; } .pie p{ height: 100%; width: 100%; font-size: 2em; /* 文字居中 */ display: flex; justify-content: center; align-items: center; /* 白色圆环 */ background-color: white; border-radius: 50%; } style> <div class="pie"> <p>70%p> div>
🔸重复渐变repeating
重复渐变就是执行多次渐变，以铺满整个区域，上面三种渐变都支持重复渐变模式。
repeating-上面的三种渐变
<div class="reg"> <p>b1p> <p>b2p> <p>b3p> div> <style> .reg p { width: 100px; height: 100px; text-align: center; font-size: 20px; line-height: 100px; margin: 10px; display: inline-block; } .reg p:nth-child(1) { background-image: repeating-linear-gradient(green 0px,green 5px,red 5px, red 10px) } .reg p:nth-child(2) { background-image: repeating-conic-gradient(from 0deg at center, black 30deg, green 60deg, red 90deg) } .reg p:nth-child(3) { border-radius: 50%; background-image: repeating-radial-gradient(green 0px,green 5px,red 5px, red 10px) } style>
3.5、计算函数calc()函数
calc （计算表达式） 可动态的计算出一个数值，IE9。
- 可用于长度、角度、时间、百分比、数字的计算。
- 支持
+加法、-减法、*乘法、/除法。注意运算符前后须有空格，否则可能会无法识别为一个有效的表达式，因为+-可能会被认为是正负数。
width: calc(20% + 100px); width: calc(100% / 6); font-size: calc(1em + 1vw);
3.6、CSS变量var(--)
带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性(IE🚫)，通过 var()函数在作用域范围内复用的。
- 变量的作用域：取决于其申明的选择器。
:root { /* :root标识根元素html，相当于全局作用域 */ --main-bg-color: pink; /*申明css全局属性（变量）*/ --Hi: 'hello'; --Name: var(--Hi)',world'; /*字符串变量可以拼接*/ } body { background-color: var(--main-bg-color); }
04、盒子模型
4.1、万物皆盒子
在CSS眼中，万物皆盒子，每一个元素都是一个盒子，盒子有边框border，有内边距padding，有外边距margin，以及盒子内的内容区域content。HTML中的元素就是各种层叠的盒子，CSS的布局也是基于这些盒子。
- ∎content：盒子里的内容，这个区域也称为“content-box”。
- ∎padding：盒子内边距，盒子内容到边框
border的间距（上右下左，顺时针方向）。 - ∎border：盒子边框，边框线包括多个样式属性：线粗细、线样式、颜色、圆角等。border包含的区域称为“border-box”。
- ∎margin：盒子外边距，盒子和其他元素的间距（上右下左）。
| 属性 | 描述 | 值 |
|---|---|---|
| ∎border | 边框样式（上右下左），可简写 | border:5px solid red; |
| border-width | 设置四个边框的宽度 | border-width: 5px 10px 1px medium |
| border-style | 设置 4 个边框线的样式 | dotted点、 solid线、 double双线、 dashed虚线 |
| border-color | 设置四条边框的颜色 | border-color:red green blue pink; |
| border-radius | 设置四个 border-*-radius 圆角属性 | border-radius:15px 0; |
| border-collapse | 表格的边框的合并设置 | collapse /kəˈlæps/ |
| ∎padding | 设置所有（上右下左）内边距属性 | 数值/百分比%：padding:10px 5px; |
| ∎margin | 设置所有（上右下左）外边距属性，可负数 | 数值/百分比%：margin:10px 5px 15px 20px; |
border、padding、margin都有四个边（上右下左，顺时针方向：top、right、bottom、left），可以一起设置，也可以分别设置。在浏览器的调试模式下可以看到任何元素的盒子模型结构：
⁉️注意：margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框
border为止 —— 不会延伸到margin。
⁉️外边距折叠 ：两个外边距上下相邻的元素，他们的外边距将合并为一个外边距（重叠在一起），即最大的那个外边距的大小，而不是二者的外边距之和。当然不是绝对的，参考外边距重叠。
用边框画三角形：四个边框可以分别设置样式，设置其他三个变为透明色，就可以画出一个三角形了。
/*用边框画三角形：全部用边框填充*/ <div class="border">div>
基于块级元素、内联元素的区别，盒子也分为两种：块级盒子 (block box) 和 内联盒子 (inline box)。
🔶块级盒子 (block box)：应用完整的盒子模型
- 自动换行，宽度默认和父容器一样宽
- width、height有效，内边距、外边距、边框会将盒子周围的元素“推开”。
🔶内联盒子 (inline box)：部分盒子模型有效
- 盒子不换行，width、height无效，基于元素内容自动适应。
- 垂直方向的内边距、外边距、边框有效，但不会把其他inline盒子推开。
- 水平方向的内边距、外边距、边框有效，会把其他inline盒子推开。
4.2、box-sizing盒模型
盒子模型 box-sizing 有两种模式：标准盒模型、代替（IE）盒模型，通过属性box-sizing设置（IE8支持，之前IE都只有代替盒模型）。
| box-sizing | 描述 | 备注 |
|---|---|---|
| content-box | 标准盒子模型（默认值）： 元素width、height仅限 Content内容，padding 和 border往外扩张。如果给元素设置 width 、height，实际设置的是 content box。 整个盒子的宽高需再加上padding 和 border，是不是很反人类？是就对了！ 切换标准盒模型： box-sizing: content-box |
 |
| border-box | 替代（IE）盒模型： 元素width、height包含 Content、padding、border，padding 和 border都向内挤压。切换代替盒模型： box-sizing: border-box有时候为了更精确的控制布局，会强制使用IE盒模型并初始内外边距为0： box-sizing: border-box; margin: 0px; padding: 0px; |
 |
4.3、min/max-content内容尺寸
下面的*-content（IE🚫）“值”用来设置元素的宽度、高度，是基于盒子的内容来动态设置盒子尺寸。
| 尺寸值 | 描述 |
|---|---|
| min-content | 最小内容尺寸，基于盒子内容content最小的尺寸 |
| max-content | 最大内容尺寸，基于盒子内容content最大的尺寸 |
| fit-content | 适应内容尺寸（/fɪt/适应，合适），会根据视口的大小自适应min-content、max-content |
<style> #d1 p{ background-color: antiquewhite; padding: 3px;margin: 5px 0px; } style> <div id="d1"> <p style="width:min-content;">标题H2 title：min-contentp> <p style="width:max-content;">标题H2 title：max-contentp> <p style="width:fit-content;">标题H2 title：fit-contentp> <p style="width:auto;">标题H2 title：autop> div>
©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀