目录
一，css入门知识
1.1 web标准
不是一个标准，是一系列标准
网页组成部分：内容（所有东西），结构（使内容更加清晰），变现（使网页更加美观），行为(网页和用户的交互)
结构标准：HTML,XHTML,XML
表现标准：css
行为标准：JavaScript
web标准制定的目的：为了让同一个页面在不同的浏览器或者终端设备看到的效果一致
1.2什么是css
Cascading Style Sheets即层叠样式表简称样式表
1.3css的作用
1，减少重复格式化，减少网页体积，加快下载访问速度
2，便于更新和维护
3，符合内容与变现形式分离的原则
4，实现HTML格式不能实现的高级功能
1.4 css3
1，css3是css规范的最新版
2，css3的兼容问题（面试题）
同一个页面在不同的浏览器或者版本看到的效果不一致
处理方式：添加私有前缀（面试）
谷歌 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
标准的属性放在最后
1.5 css3的新特性
选择器、文字颜色特效，背景和边框、盒子模型、布局、过度、动画、2D/3D转换
二，css基本语法
2.1 css的三个组成部分
选择器+属性+属性值
2.2 css语法
选择器{
属性：属性值；
属性：属性值：
}
注意：所有的符号都为英文状态下，属性和属性值之间用冒号，属性值之后必须有分号
2.3 css 的注释
css的注释采用/* */ 快捷键ctrl+/
2.4 css常用属性
文字颜色 color：颜色的英文
文字加粗 font-weight:blod;
文字大小 font-size:*px;
2.5 css三种引入方式
1，内联式
<p style="color: aqua;font-weight: bold;font-size: 12">你好</p>
2，内部式
<style>
p{
color: red;
font-weight: bold;
font-size: 16;
}
</style>3，外链式
在head标签里面添加link标签
<link rel="stylesheet" href="../css/1.css">2.6 三种引用方式的区别
内联式不够灵活，和HTML没有分开，优先级最高
内部式和HTML没有分开
外链式在实际项目中使用，练习使用内联式和内部式
三，选择器
一种匹配模式，用于选择想要设置样式的元素
3.1 基本选择器
1， * 选中所有元素（通用选择器）
语法：*{ }
2，标签选择器：选中对应的标签（元素选择器）
语法：标签名{ }
3，类选择器：选中所有对应指定类名的元素
语法： .类名{ }
例如：<p class="">你好</p>
注意：类名不能以数字开头
4，id选择器：选中对应的id名元素
语法：#id名{ }
例如 <p id="">你好</p>
3.2 id和类的区别
id名唯一（同一个页面只能有一个相同的id,同一个元素只能有一个id）
一个元素可以有多个类名，不同元素可以有相同的类名
设置多个类名的方式：class="类名1 类名2 类名3"
3.3 层次选择器
1，后代选择器
语法 e f{ }代表选中e的后代f
2，子代选择器
语法 e>f{ } 代表选中e的儿子f
3，并列选择器
语法 e,f{ }代表选中e和f
注意：e和f没有关系
3.4 伪类选择器
鼠标悬停
e:hover{ } 鼠标悬停在e上面的样式设置
注意： ：hover是一个整体，不准有空格之类
p>a:hover{
color:red;
}鼠标的四种状态，只有a标签有其他三种状态，其他标签只有悬停状态
e:link 未访问的链接
e:visited 已访问的链接
e:hover 鼠标悬停状态
e:active 选定的激活状态
四，CSS的继承与优先级
4.1css的继承
具有上下级关系，上级元素的样式被下级元素所拥有的
文本相关属性和列表相关属性可以被继承
4.2 优先级（面试题）
! important>行内样式>#id>.类名>标签名>*>继承>默认
如果用到层级选择器，判断权重之和
行内样式 1000
#id 100
类名 10
标签名 1
权重越大越优先
.wrap .box p 21 .wrap #box .m #test p 221
权重之和一致，后面的覆盖前面
五，字体属性 Font（共9个）
5.1 颜色
语法：color：颜色的表示方法（英文单词/#16进制表示方式/rgb(R,G,B)）
5.2 粗细
语法：font-weight：normal /bold/100/200-900; 正常粗细/加粗/400正常/700加粗/900特粗
5.3 大小
语法：font-size:字体大小；
字体大小单位说明：* px px是一个绝对尺寸
* em em是相对大小 代表是它基于父亲字体大小的*倍
* rem rem是相对大小 大小基于根元素（HTML）的字体大小
px一般在电脑端使用，rem和em一般在手机端使用
5.4 斜体（字体样式）
语法：font-style: italic/normal/oblique; 斜体/正常字体
5.5 行高
指定的行高内，文字垂直居中
语法：line-height: *px;
应用场景：1，单行文本垂直居中指定高度的盒子 2，多行文本的行间距设置
5.6 字体类型（微软雅黑、宋体）
语法：font-family: ' ', ' '；
说明：多个字体类型的对应关系，从前往后匹配，如果有，就使用，否则往后看，如果都没有则使用默认浏览器。
注意：字体名称用引号引起来
字体和字体之间使用逗号分离
5.7 修饰线（下划线、删除线）
语法：text-decoration: none|underline|line-through 没有效果/下划线/贯穿线、删除线
5.8 英文大小写转换
语法：text-transform:none capitalize uppercase lowercase 默认/大写字母开头/仅有大写字母/仅有小写字母
5.9 font复合属性
一次性可以设置多个属性的属性
语法：font：font-style font-weight font-size/line-height font-family
注意：font这个属性最简单的形式必须设置字体大小和行高和字体类型，否则不会生效
六，CSS3新增选择器
6.1 结构伪类选择器（重点中的重点）
6.1.1 child系列
e:first-child 选中第一个子元素e
e:last-child 选中最后一个子元素e
e:nth-child(n) 选中中间的第n个元素
n是一个乘法因子 可以是数字
也可以是英文单词 odd是奇数 even是偶数
它可以是数学表达式（在表达式中n代表0-无穷的正整数）2n 0 2....
li:nth-last-child(n) 倒数第n个
p:only-child 选中唯一的子元素p
注意:child系列的排序是在父元素的所有子元素里面的排列顺序,与类型无关
6.1.2 type系列
.wrap>p:first-of-type 选中p元素中的第一个元素
以上都类似
6.1.3 type和child不同
child系列是强调在所有的孩子里面的排列顺序
type系列强调是在所有同类型元素里面的排列顺序
建议使用child系列
6.2 否定伪类选择器
.ul1>li:not(:first-child) 除了第一个元素不选其余的都选
前后都为选择器
6.3 伪类和伪元素（掌握概念和面试题）
6.3.1 E:after 和 E：before
配合content使用 在e元素前后插入内容
6.3.2 伪类和伪元素的区别
伪类是一种临时状态，只有被出发才能生效
伪元素是一种虚拟的dom节点（标签）
伪类使用单冒号 伪元素使用双冒号
:after和::after都是伪元素，版本不同写法不一致 方便兼容性 也会使用单冒号
6.4 css3新增的其他伪元素选择器
e::first-letter{ } 选中第一个字符
p::first-line { } 选中第一行
input::placeholder{ } 设置占位符的样式
p::selection{ } 选中效果 不能设置文字大小
七，文本属性text
7.1 文本水平对齐方式 text-align
语法：text-align: left/justify/right/center
justify:代表文字两端对齐
注意：行级元素设置水平对齐没有效果（加div）
7.2 文本垂直对齐
语法：vertical-align:top/middle/bottom 上中下
注意：行级元素支持 块级元素不支持
主要解决图片3px问题（图片本身的高度加3px等于div的高度）
表格里面单元格内容垂直方向的对齐设置
7.4 文本缩进
语法:text-indent:2em;
应用场景：段落首行缩进
7.5 是否自动换行
语法：white-space: normal/ nowrap/pre; 默认/ 不换行/原样输出
7.6 文本溢出
语法：text-overflow: ellipsis; 省略号
单行文本溢出显示省略号（面试题）
设置宽度 设置不换行 设置超出隐藏 设置溢出标识为省略号
p{
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}7.7 字间距和词间距
字间距：letter-spacing: 2px;
词间距: word-spacing: 3px;(英文)
八，文本效果
8.1 文本阴影
语法：text-shadow: x方向的偏移 y方向的偏移 阴影的模糊程度 阴影的颜色
说明：x和y的偏移可以为负数
阴影的模糊程度是不能为负值的，一般和x和y的值一样
p:hover{
text-shadow:10px 10px 10px grey ;
}九，背景的单个属性说明
9.1 背景颜色
语法：background-color: bisque；
9.2 背景图片
语法：background-image:url（1.jpg）;
9.3 设置背景图的平铺方式（重复）
语法：background-repeat:no-repeat； 不重复/默认repeat
可以再某个方向上重复repeat-x/repeat-y
9.4 设置背景图的起始位置
语法：background-position: 0px 0px; x坐标 y 坐标
background-position: center bottom;
9.5 背景复合属性（重点）
语法：background: background-color/background-image/background-repeat/background-postion;
说明：背景复合属性后面的属性值可以有1-4个，顺序可变
9.6 背景的大小
语法：background-size:*px *px;
说明：大小可以为百分比
十，盒子模型
10.1 什么是盒子模型
概念：是一种思维模型，主要用于页面的布局。
特点：每个盒子都有边界，边框，填充，内容四个属性，并且每个盒子都有尺寸。
内边距：盒子边框和内容之间的间隔。
外边距：当前盒子边框和盒子之外的内容之间的间隔。
10.2 盒子尺寸
10.2.1 设置宽度
语法：width:;
说明:百分比基于元素的父元素的宽度的百分比
10.2.2 设置高度
语法：height:*px/*% ;
10.2.3 最小高度
语法：min-height:*px
说明：元素的实际高度大于等于设置的高度。
10.2.4 最大高度
语法：max-height:*px;
说明：元素的实际高度小于等于设置的高度。
10.3 内边距
10.3.1 单个方向的内边距设置
语法：padding-方向: *px;
方向：top bottom left right 上下左右
注意：内边距会撑大盒子
10.3.2 内边距的复合属性
语法：padding: *px;
说明：padding的属性值可以是1-4个
属性值的对应规则：从上方向出发，顺时针对应。有缺省，取对边。
padding: 10px 10px 10px 10px;
10.4 外边距
10.4.1 设置单个方向上的外边距
语法：margin-方向：*px;
方向的英文：top bottom left right
10.4.2 外边距的复合属性
语法：margin：*px;
说明：margin的属性值可以是1-4个
属性值的对应规则：从上方向出发，顺时针对应。有缺省，取对边。
margin: 10px 10px 10px 10px;
10.5 外边距的垂直粘连问题解决（margin的bug）
10.5.1 父随子动
解决方案：1，使用内边距替代外边距（保持盒子高度不变（高度减去内边距））
2，给父亲元素设置overflow: hidden;
3，给父亲设置一个透明色边框border: 1px solid transparent;
10.5.2 垂直塌陷（兄弟关系）
距离取最大 ，不会相加
解决方案：在一个方向上给足够的距离
.div1{
width: 200px;
height: 300px;
border: 1px solid;
background-color: aquamarine;
margin-bottom: 40px;
}
.div2{
width: 300px;
height: 200px;
border: 1px solid ;
background-color: bisque;
margin-top: 30px;
}10.6 边框
语法：border：边框粗细 边框线型（solid） 边框的颜色；
单个方向的边框：border-方向的英文:边框粗细 边框线型 边框颜色；
10.7 阴影和边框（重点）
语法：box-shadow: 20px 20px 0px greenyellow inset（内阴影）;
10.8 圆角边框（重点）
语法：border-radius: 10px（半径画圆）;
注意：要实现一个正圆的前提是该盒子是正方形
十一，标准模式与怪异模式
11.1什么是标准模式与怪异模式？
概念：他们是盒子模型的不同模式
有文档声明的都是标准模式，没有文档声明的在IE6,7,8就会展示为怪异模式
语法：box-sizing: content-box border-box；前者为标准模式，后者为怪异模式
11.2 标准模式和怪异模式的区别（面试题）
元素实际占用的宽高计算方式不一致。
标准模式的元素实际占用的宽度：width+margin+border+padding
怪异模式的元素实际占用的宽度：width+margin
盒子模型：尺寸+margin+padding+border
十二，布局（重点中的重点）
12.1 浮动布局
12.1.1 概念
浮动是一种定位属性，主要用于布局，实现一行多列效果
12.1.2 语法
float: left/right;左右浮动成一行，从左到右，从右到左
注意：浮动会让元素脱离文档流（代码按照从上到下的顺序显示效果）
12.1.3 清除浮动（清除浮动带来的影响）（重点）
方式1
给浮动元素的父亲设置高度
方式2
给浮动元素最后面添加空的兄弟元素（什么样式都没有，内容都没有）
给该元素类名设置clear，设置样式，clear：both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
border: 1px solid black;
}
.wrap>div:not(:last-child){
width: 300px;
height: 100px;
background-color: rebeccapurple;
float: left;
margin-right: 20px;
}
.box{
height: 400px;
background-color: chocolate;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<!-- 给浮动元素最后面添加空的兄弟元素（什么样式都没有，内容都没有）
给该元素类名设置clear，设置样式，clear：both
-->
<div class="wrap">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div class="clear"></div>
</div>
<div class="box"></div>
snjadibs
</body>
</html>方式3
给浮动元素的父亲设置类名clearfix
设置样式
.clearfix:after{
content: "";
height: 0;
display: block;
clear: both;
}方式4
给浮动元素的父亲设置overflow: hidden;
12.1.4 清除浮动小结
方式1 只适用高度固定的情况
方式2 添加很多没意义的结构，不推荐
方式4 会有作弊嫌疑，不建议
推荐方式3
注意：多个元素排列一行，必须保证元素的实际宽度小于父亲的元素的宽度
多个元素排在一行，多个元素都要浮动
12.2 超出隐藏
overflow: hidden; 当元素的内容超出设置的元素宽高时候，隐藏内容
12.3 显示与隐藏
语法：display: inline none block inline-block;
none：不显示，隐藏
block：以块元素的样子显示
inline ：以行级元素的样子显示
inline-block:以块级行元素的样子显示（可以设置宽高，且显示在一行）
12.4 设置鼠标形状
语法：cursor: pointer;鼠标形状设置手型（低版本支持hand高版本支持pointer）
十三，定位
13.1 图片和背景图片的区别
1，数据从数据库来，使用img
2，数据经常更改的，使用img（产品图，广告图），不经常改的用背景
3，想要作为页面结构的使用img
4，精灵图，使用背景图
13.2 定位的概念
概念：将一个元素放在指定的位置上
13.3 定位的语法
语法：position: relative static absolute fixed;(定位方式)
坐标：left right :*px
top bottom:*px
static： 静态定位，元素按照默认位置显示
relative ：相对定位 基于元素本身的位置 会占据原来的位置
fixed： 固定定位，基于浏览器窗口的位置判定
absolute ：绝对定位 基于最近的被设置非静态定位（relative ，fixed，absolute ）的上级元素的位置定位
盒子完全居中于未知大小的盒子（应用场景广告，回到顶部，楼层跳转，顶部固定的导航）
方式1
div{
width: 300px;
height: 200px;
background-color:pink;
position: fixed;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -150px;
}方式2
div{
width: 300px;
height: 200px;
background-color:pink;
position: fixed;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
margin: auto;
}13.4 z-index属性
概念：设置元素在z轴上的堆叠层次
语法：z-index:数字 ;
说明：每个元素默认的z-index值大的会覆盖小的（默认的为0）
注意：元素如果要设置z-index，该元素必须被设置非静态定位，搭配position使用 否则无效果
十四，CSS hack以及CSS常用的样式
14.1 CSS hack（面试题）
14.1.1 概念
针对不同的浏览器或者不同版本的浏览器，写不一样的css代码的过程
14.1.2 css hack分类
1，css属性前缀法
针对不同浏览器添加特定浏览器能识别的属性前缀
div{
color: red;
*color:red;//IE6
+color: red;//IE7
}2， 选择器前缀法
在特定浏览器前添加特定浏览器能识别的选择器
div{}
*div{} //IE6
*+div{}//IE7
3，IE条件注释法
专门针对IE浏览器的hack方式
14.1.3 css3添加私有前缀（面试）
添加私有前缀
添加的前缀 代表的浏览器 浏览器内核
-o- 欧朋 presto
-ms- IE trident
-moz- 火狐 gecko
-webkit- 谷歌 webkit
14.2 css常用样式
14.2.1 三角形实现
div{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
} 
14.2.2 通过伪元素实现三角形
.wrap::after{
content: "";
display: block;
width: 0px;
height: 0px;
border: 8px solid transparent;
border-left: 8px solid pink;
}14.3 css精灵(sprites)图像拼合技术
14.3.1 精灵图又叫雪碧图
14.3.2 精灵图的实现步骤
1，实现一个指定的盒子大小
2，将精灵图设置为该盒子的背景图
3，设置背景图的起始位置，以达到显示想要的图
14.3.3 精灵图的优缺点
优点：
减少请求的次数，提升网站的性能，减少图片的文件数目
缺点：
开发过程复杂，需要测量每个背景图的精确位置，进行定位，后期新加或者删除图标比较麻烦
14.4 定位技巧（子绝父相：儿子绝对定位父亲相对定位）
给儿子元素设置相对定位，作为参照的父亲设置绝对定位
14.5 一行两列
1，设置盒子的宽度
2，给盒子设置浮动
注意：两个盒子实际占用的宽度之和要小于等于父亲的宽度
14.6 一行多列
1，设置盒子的宽度
2，除最后一个盒子右浮动外其余都左浮动
14.7 设置元素透明度
透明度在0-1之间
img{
opacity: 0.5;
}
img:hover{
opacity: 1;
}
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
