CSS
CSS简介
使用CSS的目的就是让网页具有美观一致的页面
CSS概念
CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表 CSS文件后缀名为.css CSS用于HTML文档中元素样式的定义
为什么需要CSS 使用css的唯一目的就是让网页具有美观一致的页面
语法 CSS规则由两个主要的部分构成：选择器，以及一条或多条声明(样式)
选择器通常是您需要改变样式的HTML元素 每条声明由一个属性和一个值组成 属性(property）是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开
CSS的引入方式
内联样式（行内样式） 要使用内联样式，你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性 温馨提示 缺乏整体性和规划性，不利于维护，维护成本高
内部样式 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表 温馨提示 单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱
外部样式（推荐） 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部
选择器一
CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）
全局选择器 可以与任何元素匹配，优先级最低，一般做样式初始化
元素选择器 HTML文档中的元素，p、b、div、a、img、body等。 标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的”个性“
再比如说，我想让"学完前端，继续学Java"这句话中的“前端"两个变为红色字体，那么我可以用<span>标签把“前端"这两个字围起来，然后给<span>标签加一个标签选择器
温馨提示 1.所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等 2.无论这个标签藏的多深，一定能够被选择上
3.选择的所有，而不是一个
类选择器 规定用圆点 . 来定义，针对你想要的所有标签使用 优点 灵活
class属性的特点 1.类选择器可以被多种标签使用 2.类名不能以数字开头 3.同一个标签可以使用多个类选择器。用空格隔开
选择器二
ID选择器 针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以#来定义
特别强调 1.ID是唯一的 2.ID不能以数字开头
合并选择器 语法：选择器1，选择器2…{} 作用：提取共同的样式，减少重复代码
选择器的优先级 CSS中，权重用数字衡量 元素选择器的权重为：1 classi选择器的权重为：10 id选择器的权重为：100 内联样式的权重为：1000 优先级从高到低：行内样式>ID选择器>类选择器>元素选择器、
字体属性
CSS字体属性定义字体，颜色、大小，加粗，文字样式
color
规定文本的颜色
font-size
设置文本的大小 能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
温馨提示 chrome浏览器接受最小字体是12px
font-weight 设置文本的粗细
font-style 指定文本的字体样式
font-family font-family属性指定一个元素的字体 温馨提示 每个值用逗号分开 如果字体名称包含空格，它必须加上引号 
背景属性
CSS背景属性主要有以下几个
background-color属性 该属性设置背景颜色
background-image属性 设置元素的背景图像 元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
background-repeat属性 该属性设置如何平铺背景图像(默认值是水平垂直都平铺)
background-size属性 该属性设置背景图像的大小
background-position属性 该属性设置背景图像的起始位置，其默认值是：0%0%
文本属性
text-align 指定元素文本的水平对齐方式
text-decoration text-decoration属性规定添加到文本的修饰，下划线、上划线、删除线等
text-transform text-transform属性控制文本的大小写
text-indent text-indent属性规定文本块中首行文本的缩进
** 温馨提示** 负值是允许的。如果值是负数，将第一行左缩进
表格属性
使用CSS可以使HTML表格更美观
表格边框 指定CSS表格边框，使用border属性
border: （第一个属性）大小（px） (第二个属性)边框线样式（solid实线） （第三个属性）边框线颜色 （color）
折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
表格宽度和高度 width和height属性定义表格的宽度和高度
表格文字对齐 表格中的文本对齐和垂直对齐属性（默认为左中对齐） text-align属性设置水平对齐方式，向左，右，或中心
垂直对齐属性设置垂直对齐（上：top 中：center 下：bottom）
表格填充 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
表格颜色 下面的例子指定边框的颜色，和th元素的文本和背景颜色
注意后面的color为字体颜色
关系选择器
关系选择器分类 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器
后代选择器 定义 选择所有被E元素包含的F元素，中间用空格隔开 语法
子代选择器 定义 选择所有作为元素的直接子元素F,对更深一层的元素不起作用，用>表示 语法
相邻兄弟选择器 定义 选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素(向下选择) 语法
通用兄弟选择器 定义 选择E元素之后的所有兄弟元素F，作用于多个元素，用～隔开 语法
CSS盒子模型(Box Model）
概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距(margin),边框(border),内边距(padding),和实际内容(content)
1.Margin(外边距)-清除边框外的区域，外边距是透明的(两个值：第一个值上下，第二个值左右) 2.Border(边框)-围绕在内边距和内容外的边框 3.Padding(内边距)-清除内容周围的区域，内边距是透明的（两个值：第一个值上下，第二个值左右） 4.Content(内容)-盒子的内容，显示文本和图像
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离
弹性盒模型(flex box)
定义 弹性盒子是CSS3的一种新的布局模式 CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
CSS3弹性盒内容 弹性盒子由弹性容器(Flex container))和弹性子元素(Flex item)组成 弹性容器通过设置display属性的值为flex将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 温馨提示 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局元素进行排列、对齐和分配空白空间
温馨提示 默认弹性盒里内容横向摆放
父元素上的属性
display属性 display:flex开启弹性盒 display::flex:属性设置后子元素默认水平排列 flex-direction属性定义 flex-direction属性指定了弹性子元素在父容器中的位置 语法
1.row:横向从左到右排列（左对齐），默认的排列方式 2.row-reverse:反转横向排列（右对齐，从后往前排，最后一项排在最前面)
3.column:纵向排列 4.column-reverse:反转纵向排列，从后往前排，最后一项排在最上面
justify-content属性 定义 内容对齐(justify-content)属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐 语法
1.flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-starti边线，而后续弹性项依次平齐摆放 2.flex-end单性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 3.center弹性项目居中紧挨着填充。(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)
align-items属性 定义 align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 语法
1.flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界 2.flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 3.center弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
子元素上的属性 flex-grow/flex(权重比) flex-grow根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 默认为0，即如果存在剩余空间，也不放大 如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%
文档流
文档流是文档中可显示对象在排列时所占用的位置/空间 例如：块元素自上而下摆放，内联元素，从左到右摆放 标准流里面的限制非常多，导致很多页面效果无法实现 1.高矮不齐，底边对齐 2.空白折叠现象 3.无论多少个空格、换行、tab，都会折叠为一个空格 4.如果我们想让img标签之间没有空隙，必须紧密连接
文档流产生的问题
高矮不齐，底边对齐
空格折叠
无论在文本里打多少空格都只会显示一个空格
元素无空隙
脱离文档流 使一个元素脱离标准文档流有三种方式 1.浮动 2.绝对定位 3.固定定位
浮动（增加一个浮层来放置内容）
浮动的定义
float属性定义元素在哪个方向浮动，任何元素都可以浮动。
浮动的原理 1,浮动以后使元素脱离了文档流 2.浮动只有左右浮动，没有上下浮动 元素向左浮动 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
元素向右浮动
所有元素向左浮动 当所有元素同时浮动的时候，会变成水平摆放，向左或者向右
当容器不足时 当容器不足以横向摆放内容时候，会在下一行摆放
清除浮动
浮动副作用 当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动， 1.浮动元素会造成父元素高度塌陷 2.后续元素会受到影响
清除浮动 当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用 解决方案有很多种 1.父元素设置高度 2.受影响的元素增加clear属性 3.overflowi清除浮动 4.伪对象方式
父元素设置高度 如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小
overflow清除浮动 如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动 这种情况下，父布局不能设置高度 父级标签的样式里面加：overflow:hidden;clear:both
伪对象方式 如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理 为父标签添加伪类after,设置空的内容，并且使用clear:both; 这种情况下，父布局不能设置高度
定位
定义 position属性指定了元素的定位类型
其中，绝对定位和固定定位会脱离文档流 设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom
相对定位
绝对定位（脱离文档流）
每设置一个绝对定位就设置了一层
固定定位
随着页面的滚动会跟随滚动保持相对位置，那页面保持位置不变
温馨提示 设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
Z-index z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
CSS3新特性
圆角
使用CSS3 border-radius属性，你可以给任何元素制作”圆角“ border-radius属性，可以使用以下规侧： 1.四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 2.三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角 3.两个值：第一个值为左上角与右下角，第二个值为右上角与左下角 4.一个值：四个圆角值相同
阴影 box-shadow向框添加一个或多个阴影。
给阴影添加一个模糊效果
三个方向的阴影效果
动画
动画是使元素从一种样式逐斩变化为另一种样式的效果 您可以改变任意多的样式任意多的次数 请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100% 0%是动画的开始，100%是动画的完成。 @keyframes创建动画 使用@keyframes规则，你可以创建动画
name:动画名称，开发人员自己命名； percent:为百分比值，可以添加多个百分比值；
animation执行动画
切换背景颜色
呼吸效果
媒体查询
媒体查询能使页面在不同在终端设备下达到不同的效果 媒体查询会根据设备的大小自动识别加载不同的样式
设置meta标签 使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
参数解释 1.width=device-width宽度等于当前设备的宽度 2.initial-scale初始的缩放比例（默认设置为1.0） 3.maximum-scale允许用户缩放到的最大比例（默认设置为1.0） 4.user-scalable用户是否可以手动缩放（默认设置为no）
媒体查询
雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去 优点 1.减少图片的字节 2.减少网页的http请求，从而大大的提高页面的性能 原理 1.通过background-image引入背景图片 2.通过background-position把背景图片移动到自己需要的位置
实例
字体图标
我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而目图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题 常用字体图标库：阿里字体图标库优点 1.轻量性：加载速度快，减少http请求 2.灵活性：可以利用CSS设置大小颜色等 3.兼容性：网页字体支持所有现代浏览器， 使用字体图标
1.注册账号并登录 2.选取图标或搜索图标 3.添加购物车 4.下载代码 5.选择font-class引用