CSS概念
- CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。
- 后缀名为.css
- CSS用户HTML文档中元素样式的定义
使用css的目的就是让网页具有美观一致的页面
CSS语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（即样式）
<style>
h1{
color:blue;
font-size:12px;
}
</style>
CSS的引入方式
-
内联样式（行内样式）
image.png -
内部样式
image.png -
外部样式（最优）
image.png
选择器
选择器种类
-
全局选择器
优先级最低，一般用于样式初始化
image.png -
元素选择器
image.png
image.png -
类选择器
image.png -
ID选择器
image.png
选择器的优先级
优先级从高到底：行内（内联）样式>ID选择器>类选择器>元素选择器
字体属性
CSS字体属性定义字体，颜色、大小、加粗、文字样式
color：文本的颜色（）
font-size：文本大小（chrome浏览器接受最小字体是12px）
font-weight：设置文本的粗细
image.png
font-style：指定文本的字体样式，<i>标签默认是斜体的
image.png
font-family：指定一个元素的字体（如微软雅黑）
每个值用逗号分开
如果字体名称包含空格，它必须加上引号
image.png
背景属性
CSS背景属性主要有以下几个：
cover：使容器填充满，而图片中多余的部分看不到
contain：使图片保持最大比例显示，容器会有多余部分没被填充
文本属性
- text-align:指定元素文本的水平对齐方式，值：left right center
- text-decoration：underline（下划线）、overline（上划线）、line-through（删除线）
-
text-transform：控制文本的大小写 captialize（每个单词开头大写）、uppercase（全部字母大写）、lowercase（全部字母小写）
image.png - text-indent：规定文本块中首行文本的缩进（单位px，负值允许）
表格属性
- 折叠边框和宽高
表格：table>tr*N>td*N
border-collapse：折叠边框，将table与td中设置的边缘线折叠起来，使看起来是单线条
- 表格文字对齐方式
td{ text-align:right; }
垂直对齐属性设置垂直对齐
td{ vertical-align:bottom}
-
表格填充
padding：设置文本与表格边缘的距离
image.png
image.png - 背景与字体颜色
background-color
color
关系选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 通用兄弟选择器
CSS盒子模型(Box Model)
盒子模型在设计和布局时使用
概念：所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTMl元素，它包括：
外边距（margin），边距（border），内边距（padding），和实际内容（content）
image.png
Margin（外边距）：清除边框外的区域，外边距是透明的；如果只设置一个值，那么默认情况下上下左右外边距都是这个值，也可以分别设置各个方向的值；两个值：第一个上下，第二个左右。同时也可以四个值分开来写，比如margin-right。
Border（边框）：围绕在内边距和内容外的边框
Padding（内边距）：清除内容周围的区域，内边距是透明的（适应内容的背景颜色），两个值：第一个上下，第二个左右。同时也可以四个值分开来写，比如padding-left。
Content（内容）：盒子的内容，显示文本和图像
padding：第一个值代表上下间距，第二个值代表左右间距。当然，还有padding-left、padding-right、padding-top、padding-bottom来设置各个方向的padding值
margin和padding一样也具有margin-left等设置。
- box-sizing：content-box|border-box
1、 content-box：当定义width和height时，它的参数值不包括border和padding。
2、 border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。
弹性盒子模型（flex box）
弹性盒子是CSS3的一种新的布局模式
CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排序、对其和分配空白空间
- CSS3弹性盒内容
弹性盒子由弹性容器（felx container）和弹性子元素（Flex item）组成
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
默认弹性盒里内容横向摆放
- flex-dicrection属性
- justify-content属性（纵向位置调整，居上、居中、居下）
- align-items属性（横向位置调整，居左、居中、居右）
子元素上的属性
- flex-grow/flex：简单理解就是设置权重，然后自动为分配的元素分配剩余的空间，这个属性的优先级大于宽高，也就是说一旦设置了权重，那么子元素的宽或者高就失效了（具体看flex-dicrection的设置是横向还是纵向）
文档流
文档流是文档中可显示对象在排列时所占用的位置/空间
解决方法：脱离文档流
- 脱离文档流：
1、 浮动
2、 绝对定位
3、 固定定位
浮动
增加一个浮层来放置内容
flow属性定义元素在那个方向浮动，任何元素都可以浮动。
image.png
- 浮动的原理
1、 浮动以后使元素脱离文档流
2、 浮动只有左右浮动，没有上下浮动
浮动在导航的应用
清除浮动
- 浮动的副作用
当元素设置float浮动后，该元素就会脱离文档流并向左或向右浮动
1、 浮动会造成父元素高度坍塌：当父元素没有设置高度，由子元素撑起高度时，父元素会包裹子元素，但子元素浮动时，这种撑起效果就消失了，父元素肉眼不见，即父元素坍塌。
2、 后续元素会造成影响 - 浮动清除方案:
1、 父元素设置高度
2、 受影响的元素增加clear属性
当clear：both，无论左浮动还是右浮动，都清除
3、 overflow清除浮动（使用较多）
4、 伪对象方式
定位
position属性指定了元素的定位类型
其中绝对定位和固定定位会脱离文档流
设置定位后：可以使用四个方向值进行调整位置：left、top、right、bottom
| 值 | 描述 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位（可以多层覆盖） |
| fixed | 固定定位（页面滚动，不会对其位置造成影响，类似于悬浮按钮） |
注意：设置定位后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。简单理解：就是父级容器设置了定位（不管是相对还是绝对），父级容器的位置会影响子级容器的位置。
当父级没有定位时：
- z-index
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
image.png
CSS3新特性
- 圆角
border-radius属性 - 阴影
box-shadow：h-shadow v-shadow blur color；
| 值 | 描述 |
|---|---|
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果，也是CSS3新特性的一种
可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%
0%是动画的开始，100%是动画的完成。
animation执行动画
| 值 | 描述 |
|---|---|
| name | 设置动画的名称 |
| duration | 设置动画的持续时间 |
| timing-function | 设置动画效果的速率（如下） |
| delay | 设置动画的开始时间（延时执行） |
| iteration-count | 设置动画循环的次数，infinite为无限次数循环 |
| direction | 设置动画播放的方向（如下） |
| animation-play-state | 控制动画的播放状态：running代表播放，而paused代表停止播放 |
| timing-function值 | 描述 |
|---|---|
| ease | 逐渐变慢（默认） |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| direction值 | 描述 |
|---|---|
| normal | 默认为normal表示向前播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
例子：鼠标悬浮于导航时状态变化效果
opacity：透明度
媒体查询
媒体查询能使页面在不同终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
-
设置meta标签
去掉这段代码后，在手机端将等比例缩放
image.png - 媒体查询语法
根据设备屏幕的的尺寸不同，发生变化
雪碧图
- 优点
1、 减少图片的字节
2、 减少网页的http请求，从而大大的提高页面的性能 - 原理
1、 通过background-image引入背景图片
2、 通过background-position把背景图片移动到自己需要的位置
移动图片，只展示需要的那一部分
可以通过检查调整position
字体图标
我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载会就越慢。所以，我们可以使用字体图标的方式来显示图标，及解决了失真的问题，也解决了图片占用资源的问题
常用字体图标库：阿里字体图标库
优点
1、 轻量型：加载速度块，减少http请求
2、 灵活性：可以利用CSS设置大小颜色等
3、 兼容性： 网页字体支持所有现在浏览器，包括IE低版本使用字体图标
1、 下载代码
2、 选择font-class引用
