前端三件套之 CSS 基础教程
一.语法
css规则主要由两个部分组成：选择器+一条或多条声明(样式)
h1{
color: blue;
font-size: 5px;
}
二.引入方式
1.内联样式
在标签中定义样式
2.内部样式
在当前html文件的head当中统一定义样式
p {
color:red;
}
3.外部样式
从外部引入css文件
选择器2
选择选择器1下一级中的选择器2
p>div {
font-size=3px
}
3.交集选择器
语法：选择器1.选择器2
同时满足两个条件的选择器
p.special{
font-size=2px;
}
p标签，且类为special
4.并集选择器
语法：选择器1,选择器2
同时选择多个
,header, .footer {
font-size=3px;
}
5.选择器的优先级
高级选择器的权重=所有选择器的权重相加
六.盒模型
1.概念
所有的html元素都可以看做一个盒子，这个盒子从外往内依次是margin(外边距)，border(边框)，padding(内边距)，content(实际内容)，标签就可以理解为一个干净的盒子。
2.属性
-
内容区 width：设定内容区宽度，单位有像素（px）、百分比（%）等，像 width: 200px 。 height：设置内容区高度，单位同宽度，例如 height: 150px 。
-
内边距（padding） padding：简写属性，一次性设置四个方向内边距，如 padding: 10px 。 padding-top：设置顶部内边距。 padding-right：设置右侧内边距。 padding-bottom：设置底部内边距。 padding-left：设置左侧内边距。
-
边框（border） border：简写属性，设置边框宽度、样式和颜色，如 border: 1px solid black 。 border-width：设置边框宽度，也有 border-top-width 等细分属性。 border-style：定义边框样式，如 solid（实线）、dashed（虚线）等，也有细分方向属性。 border-color：设置边框颜色，同样有细分方向属性。
-
外边距（margin） margin：简写属性，设置四个方向外边距，如 margin: 20px 。 margin-top：设置顶部外边距。 margin-right：设置右侧外边距。 margin-bottom：设置底部外边距。 margin-left：设置左侧外边距。
七.弹性盒模型(flex)
1.概念
-
弹性盒模型由弹性容器和弹性子元素组成
-
通过将容器display属性设置为flex将其定义为弹性容器
-
弹性容器包含了一个或多个子元素，默认为水平排布
2.弹性容器属性
排列方向(flex-direction)
-
row（默认值） 弹性项目会按照水平方向从左到右排列，类似于文本的默认流向。
-
row-reverse 弹性项目水平排列，但方向与 row 相反，即从右到左排列。
-
column 弹性项目会按照垂直方向从上到下排列，就像一列元素。
-
column-reverse 弹性项目垂直排列，方向与 column 相反，即从下到上排列。
水平方向分布(justify-content)
垂直方向分布(align-items)
换行(flex-wrap)
3.子元素属性
flex 属性可接受一个、两个或三个值，这些值分别对应 flex-grow、flex-shrink 和 flex-basis。
-
flex-grow：定义弹性项目的放大比例。默认值为 0，即不放大；若值大于 0，会根据比例分配容器剩余空间。例如，有三个项目，flex-grow 分别为 1、2、1，容器剩余空间会按 1:2:1 的比例分配给它们。
-
flex-shrink：定义弹性项目的缩小比例。默认值为 1，即空间不足时会缩小；若值为 0，则不缩小。
-
flex-basis：定义弹性项目在分配剩余空间之前的初始大小。默认值为 auto，即项目的本来大小；也可以设置为具体的长度值或百分比。
八.定位(position)
-
static(默认定位)：遵循默认文档流布局，top、left、right、bottom等属性无效，不能移动图片
-
relative(相对定位)：元素先按照正常文档流进行布局，然后根据 top、right、bottom、left 属性相对于其正常位置进行偏移，偏移后仍会占据原来的空间。
-
absolute(绝对定位)：元素会脱离正常文档流，相对于最近的已定位祖先元素（即 position 值不为 static 的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于 元素定位。
-
fixed(固定定位)：元素脱离正常文档流，相对于浏览器窗口进行定位，无论页面如何滚动，元素位置保持不变。
-
sticky(粘性定位)：元素先按照正常文档流进行布局，当滚动到某个位置时，会固定在指定位置，类似于 fixed 定位。它是 relative 和 fixed 的混合。
九.浮动(float)
1.介绍
float:left/right
-
float定义元素对齐哪个方向浮动，任何元素都可以浮动
-
浮动以后使元素脱离了文档流
-
浮动只有左右浮动，没有上下浮动
2.效果
-
元素脱离文档流后，相当于在页面上增加了一个浮层来放置内容
-
此时可理解为有两层页面，底层是原页面，上层是脱离了文档流的页面
-
页面会出现折叠现象，两个页面重叠在一起
-
当容器不足时，会在下一行摆放
3.浮动的副作用
-
当设置为浮动后，元素会脱离文档流，此时会造成父元素高度塌陷
-
后续元素也会收到影响
4.清除浮动
-
overflow方式：在父级标签添加overflow:hidden清除浮动
-
伪对象方式：为父级标签添加伪类after，设置空的内容，并且使用clear:both
.container::after{ content:""; display:block; clear:both; }
十.css3新特性
1.圆角(border-radius)
-
一个值：四个角圆角半径相同。
-
两个值：第一个用于左上和右下，第二个用于右上和左下。
-
三个值：依次用于左上、右上和左下、右下。
-
四个值：按左上、右上、右下、左下顺序应用。
2.阴影(box-shadow)
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow：必需，水平阴影位置，正值向右，负值向左。
-
v-shadow：必需，垂直阴影位置，正值向下，负值向上。
-
blur：可选，阴影模糊距离，值越大越模糊。
-
spread：可选，阴影扩展半径，正值扩大，负值缩小。
-
color：可选，阴影颜色。
-
inset：可选，使阴影为内阴影，无此值则为外阴影。
3.动画
动画是使元素从一种样式逐渐变化为另一种样式
@keyframes创建动画
@keyframes name { from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 } }name：动画名称，自命名
percent：百分比值，可添加多个
animation执行动画
写在标签的css中
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-
name：必需，指定动画的名称，该名称对应 @keyframes 规则中定义的动画名称。
-
duration：必需，指定动画完成一个周期所需的时间，单位可以是秒（s）或毫秒（ms）。
-
timing-function：可选，指定动画的播放速度曲线，常见的值有 ease、linear、ease-in、ease-out、ease-in-out 等。
-
delay：可选，指定动画开始前的延迟时间，单位同样可以是秒（s）或毫秒（ms）。
-
iteration-count：可选，指定动画的播放次数，可以是具体的数字，也可以是 infinite 表示无限循环。
-
direction：可选，指定动画的播放方向，常见的值有 normal（正常播放）、reverse（反向播放）、alternate（先正常播放，再反向播放，交替进行）、alternate-reverse（先反向播放，再正常播放，交替进行）。
-
fill-mode：可选，指定动画在播放前后元素的样式状态，常见的值有 none（默认值，动画播放前后不改变元素的样式）、forwards（动画结束后，元素保持最后一帧的样式）、backwards（动画开始前，元素应用第一帧的样式）、both（同时应用 forwards 和 backwards 的效果）。
-
play-state：可选，指定动画的播放状态，常见的值有 running（动画正在播放）、paused（动画暂停）
4.媒体查询
设置meta标签
-
name="viewport"：表明这个 标签是用于设置视口相关属性的。
-
content 属性包含了多个参数，各参数的含义如下：
-
width=device-width：将视口的宽度设置为设备的宽度，这样页面就能自适应不同设备的屏幕宽度。
-
initial-scale=1.0：设置页面的初始缩放比例为 1，即不进行缩放。
-
maximum-scale=1.0：设置页面允许的最大缩放比例为 1，禁止用户放大页面。
-
minimum-scale=1.0：设置页面允许的最小缩放比例为 1，禁止用户缩小页面。
-
user-scalable=no：明确禁止用户手动缩放页面。
媒体查询语法
@media [not|only] media-type [and (media-feature)] { /* 符合条件时应用的样式 */ selector { property: value; } }not、only 为可选逻辑操作符，not 用于取反，only 用于防止旧浏览器误读。 media-type 指媒体类型，常见有 all（所有设备）、screen（屏幕设备）、print（打印设备）等。 media-feature 是媒体特性，像 width（宽度）、height（高度）、orientation（设备方向）等，常结合 min- 或 max- 前缀使用。
5.雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片处理方式。他允许你将一个页面涉及到的所有零星图片都放到一张大图当中
优点：
-
减少图片的字节
-
减少网页的http请求，从而大大的提高页面的性能
原理：
-
通过background-image引入背景图片
-
通过background-position把图片背景移动到自己需要的位置
-
-
-
-
-
-
-
-
-
-
-
-
