1、css
层叠样式表 级联样式表 简称样式表
2、作用
1）实现了内容与表现的分离
2）提高了代码的可重用性和可维护性
3、文件后缀
.css
4、HTML中引入css的方式
1）行内样式 内联样式——只对当前元素生效
利用HTML的style属性
<div style="color: red;"></div>
2）内部样式——只对当前页面生效
利用HTML的style标签
<head>
<style>
选择器{
属性:属性值;
属性:属性值;
}
</style>
</head>
3）外部样式——实现了内容与表现的分离，提高了代码的重用性和可维护性
<head>
<link rel="stylesheet" href="1.css">
</head>
4）导入式
<head>
<style>
@import "";
</style>
</head>
@import和link的区别：
①@import先加载HTML文件，再加载css文件；link是同时加载HTML的css文件
②@import有兼容性，link没有兼容性
③@import只能引入css文件，link还可以引入其他内容
④@import会增加页面的http请求
⑤JavaScript操作DOM时，只能操作link引入的css
5、选择器
1）基础选择器
全局选择器 通用选择器
*{}
选中页面所有元素
元素选择器
div{}
a{}
input{}
选中页面所有指定的元素
类选择器
.className{]
类名可以重复 一个class可以起多个名字 用空格隔开
ID选择器
#IDName{}
id名字具有唯一性
合并选择器
选择器1,选择器2,...{}
交集选择器
元素.className{}
选择器的优先级：
全局选择器 < 元素选择器 < 类选择器 < ID选择器 < 行内样式
权重： 1 10 100 1000
2）关系选择器
后代选择器 空格
选择器1 选择器2{}
选中所有的后代
子代选择器 >
选择器1>选择器2{}
所有直接子代
相邻兄弟选择器 +
选择器1+选择器2{}
平级 挨着 后面的一个兄弟
通用兄弟选择器 ~
平级 后面的所有兄弟
3）伪类选择器
:link 点击之前(只适用于a)
:visited 点击之后(只适用于a)
:hover 鼠标悬停(适用于所有元素)
:active 鼠标按下(适用于所有元素)
C3新增：
:first-child 第一个子元素是...
:last-child 最后一个子元素是...
:nth-child(number|odd|even|倍数) 第几个子元素是...
:only-child 唯一一个子元素是...
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type() 第几个子元素
:empty 空的子元素
:not() 否定
:focus 获取焦点
:checked 默认被选中
4）伪对象选择器
在元素之间或者之后插入内容
::before{
content:"";
}
::after{
content:"";
}
5）属性选择器
[属性]
[属性=属性值]
元素[属性=属性值]
元素[属性^=值] 开头
元素[属性$=值] 结尾
元素[属性*=值] 包含
6、背景属性
1）背景颜色
background-color:transparent;
颜色的取值：
①关键词
②十六进制
③rgb(0,0,0)
④rgba(0,0,0,.5)
2）背景图片
background-image: url("");
当背景图片和背景颜色同时存在，背景图片优先级到
3）背景图片是否平铺
background-repeat: ;
repeat 默认值 水平垂直平铺
no-repeat 不平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
4）背景图片大小
background-size: x y;
当只有一个值是，等比例缩放
取值 % px cover contain
cover 覆盖，背景图片覆盖整个背景区域，但是背景图片可能显示不完全
contain 内容，背景图片拉伸至最大，但是背景区域可能覆盖不完全
5）背景图片定位
background-position:x y ;
默认在左上角 0 0
当只取一个值，第二个值默认居中
取值 px % left right top bottom center
6）背景图片固定
background-attachment: ;
scroll 默认值
fixed 固定
7）简写
background:颜色 图片 平铺 大小 定位 固定;
当简写属性和单个属性同时存在，推荐简写属性写在单个属性的前面
7、字体的属性——继承性
1）颜色
color:;
2）字体大小
font-size:16px;
支持最小字体为12px
3）字体是否加粗
font-weight:;
normal 默认值 不加粗
bold 加粗
100-900 400 = normal 700 = bold
4）字体样式
font-style:;
normal 默认值 不倾斜
italic 倾斜
5）字体
font-family:字体1,字体2,...;
8、文本属性——继承性
1）元素内容水平对齐方式
text-align:left|center|right;
2）文本装饰
text-decoration:underline|none;
3）英文字母大小写转换
text-transform:uppercase|lowercase|capitalize;
4）首行缩进
text-indent:;
单位
px 绝对单位
em 相对单位 相对于当前字体大小 默认1em = 16px
9、列表属性——继承性
1）设置项目符号
list-style-type:none;
2）设置项目符号为图片
list-style-image:url("");
3）设置项目符号的位置
list-style-position:outside|inside;
4）简写
list-style:;
10、表格属性
1）边框
border:style width color;
2）背景颜色
background-color:;
3）背景图片
background-images:url();
4）元素的大小
width:;
height:;
5）内容距边框的距离
padding:;
6）内容水平对齐方式
text-align:left|center|right;
7）内容垂直对齐方式
vertical-align:middle|top|bottm;
8）边框折叠
border-collapse:collapse;
11、内容溢出
overflow:;
属性值：
visible 默认值 内容默认溢出
hidden 溢出部分隐藏
auto 自动，有溢出显示滚动条，没有溢出，不显示滚动条
scroll 无论是否溢出，都显示滚动条
12、文字溢出省略号显示
//文字在同一行显示
white-space:nowrap;
//溢出部分隐藏
overflow:hidden;
//文字溢出省略号显示
text-overflow:ellipse;
13、雪碧图 css精灵 css sprite
1）定义
雪碧图是一项图片整合技术
把许多小图合并到一张大图上面
2）原理
background-image:url("");
background-position:;
3）优点
①减少页面http请求
②减少图片字节数
③减少图片的命名困扰
4）缺点
①背景图片定位玛法
14、行高——继承性
当行高等于高，一行垂直垂直居中
line-height:px|number;
15、字符之间的距离
letter-spacing:;
16、元素的透明度
opacity:;
取值0-1
0：完全透明
1：不透明
17、盒模型
1）标准盒模型 w3c盒模型
①组成部分
content+padding+border+margin
②实际大小
宽度：width+padding+border+margin
高度：height+padding+border+margin
③content 内容区域
width:;
height:;
min-width:;
max-width:;
min-height:;
max-height:;
块级元素默认宽度100%，行内元素默认宽度由内容撑开
块级元素和行内元素的高度默认都由内容撑开
块级元素可以设置宽高
行内元素设置宽高不生效
④border 边框
border-style:solid|dotted|dashed|double|none; 边框的样式 必须属性 默认3px 黑色
border-width:; 边框的宽度
border-color:; 边框的颜色
简写：border:style width color; 四周的边框
border-top:width style color; 上边框
border-bottom:width style color; 下边框
border-left:width style color; 左边框
border-right:width style color; 右边框
⑤padding 内边距
不可以取负值和auto
设置内容距边框的距离
语法：
padding:value; 四周
padding:value value; 上下 左右
padding:value value value; 上 左右 下
padding:value value value value; 上 右 下 左
padding-top:;
padding-bottom:;
padding-left:;
padding-right:;
注意：padding会撑大容器(padding有背景颜色)
⑥margin 外边距
可以取正负和auto
设置元素之间的距离(没有背景颜色)
语法：
margin:value; 四周
margin:value value; 上下 左右
margin:value value value; 上 左右 下
margin:value value value value; 上 右 下 左
margin-top:;
margin-bottom:;
margin-left:;
margin-right:;
注意：
①垂直方向上外边距合并问题
当垂直方向上外边距相撞时，取较大值
浮动元素不合并
②margin-top问题
第一个子元素设置margin-top，父元素会跟着一起下来
解决办法：
a、父元素加overflow:hidden;(开启了BFC格式)
b、父元素或者子元素浮动(开启了BFC格式)
c、父元素加border:1px solid transparent;
d、父元素加padding-top:1px;
应用：
①块级元素水平居中
margin:0 auto;
2）怪异盒模型 IE盒模型
①组成部分
content+padding+border+margin
②实际大小
宽度：width+margin
高度：height+margin
width和height包含了padding和border
③标准盒模型和怪异盒模型相互转换
box-sizing:content-box; 默认值 标准盒模型
box-sizing:border-box; 怪异盒模型
3）弹性盒模型 伸缩盒模型 flex Box
多用于移动端布局
在弹性盒模型中float、clear、vertical-align不生效
①父元素上的属性
a、开启弹性盒模型
display:flex;
子元素默认水平排列
父元素开启弹性盒模型，子元素默认宽度由内容撑开
b、设置弹性盒的方向
flex-direction:;
row：默认值 子元素从左往右水平排列
column：子元素从上往下垂直排列
row-reverse：子元素从右往左水平排列
column-reverse：子元素从下往上垂直排列
c、设置子元素在主轴的对齐方式
默认主轴为x轴，侧轴为y轴
当子元素垂直排列时，主轴为y轴，侧轴为x轴
justify-content:;
flex-start：弹性盒的开始 默认值
flex-end：弹性盒的结束
center：居中
space-between：在子元素之间平均分配父元素剩余的空间
space-around：在子元素四周分配父元素剩余的距离，两端的距离是中间的一半
d、设置子元素在侧轴的对齐方式
align-items:;
flex-start：弹性盒的开始 默认值
flex-end：弹性盒的结束
center：居中
②子元素上的属性
设置子元素怎么分配父元素剩余的空间
flex-grow:number;
18、BFC
块级格式上下文
开启了BFC格式，就是独立的一块，不受子元素影响
以下属性可以开启BFC格式：
1）float:left|right;
2）overflow:hidden|auto|scroll;
3）position:absolute|fixed;
4）display:inline-block|table-cell|flex;
19、设置属性后，元素的宽度默认由内容撑开
1）float:left|right;
2）position:absolute|fixed;
3）display:flex;
20、浮动
1）原理
浮动后排除到普通文档流之外
浮动后在页面总不占据位置
浮动是碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动只有左右浮动
浮动后所有元素转换为块级元素
2）语法
float:left|right|none;
3）清除浮动的影响
元素浮动后不占据位置，父元素没有设置高度的情况下，父元素的高度坍塌，对后面的元素产生影响
方法：
①浮动元素的父元素加高(高度已知)
②浮动元素的父元素加overflow:hidden;(自动找高)
③受影响的元素加clear:both;(父元素的高度没有找到)
④空div法(父元素的高度找到，页面新增很多空div元素)
浮动元素后面加空div
空div{clear:both;}
⑤伪对象法
父元素::after{
content:"";
display:block;
clear:both;
}
21、元素定位
1）属性
position:;
2）属性值
①static 默认值 没有定位
②relative 相对定位
相对于自己原位置移动
定位后原位置保留
配合left、right、top、bottom移动
应用场景：
a、配合绝对定位使用
b、自己小范围移动
③absolute 绝对定位
相对于已经定位(relative、absolute、fixed)的父元素定位，如果父元素没有定位，逐级往上找，最后相对于body定位
定位后原位置不保留
配合left、right、top、bottom移动
应用场景：
a、形成独立的一层
④fixed 固定定位
相对于浏览器窗口定位
定位后原位置不保留
配合left、right、top、bottom移动
应用场景：
a、固定在页面某个位置
3）堆叠顺序
z-index:number;
取值越大，层级越往上
默认值auto 和父元素同一层级
可以取负值，不推荐
必须配合定位(relative、absolute、fixed)使用
同时定位，后面的元素在前面元素的上面
22、display属性
属性值：
block 块级元素
inline 行内元素
inline-block 行内块，即在同一行显示，又可以设置宽高和margin、padding的四周
常见的行内块:img、input、button等
注意：行内块会识别代码之间的空白
none 隐藏，隐藏后不占据位置
flex 弹性盒模型
table 表格
table-cell 单元格
23、设置属性后在页面中不占据位置
1）display:none;
2）position:fixed;
3）position:absolute;
4）float:left|right;
24、display:none;和visibility:hidden;和opacity:0;和overflow:hidden;的区别
display:none; 隐藏自己，隐藏后原位置不保留
visibility:hidden; 隐藏自己，隐藏后原位置保留
opacity:0; 透明度为0，隐藏自己，隐藏后原位置保留
overflow:hidden; 溢出部分隐藏
25、居中问题
1）元素内容水平居中
text-align:center;
2）块级元素水平居中
margin:0 auto;
3）一行文字垂直居中
line-height:;
行高等于高
4）多行内容垂直居中
padding:20px 0; 写在父元素上
margin:20px 0; 写在子元素上
5）子元素在父元素中水平垂直居中
<div class="box">
<div class="box1"></div>
</div>
①子元素宽高已知
a、margin
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
overflow: hidden;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
margin: 100px;
}
</style>
b、绝对定位
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
c、相对定位
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 100px;
left: 100px;
}
</style>
d、padding
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
padding: 100px;
box-sizing: border-box;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
e、弹性盒法
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
f、绝对定位法
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
g、表格法
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
</style>
h、位移
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
}
.box1{
width: 200px;
height: 200px;
background-color: green;
transform: translate(100px,100px);
}
</style>
②子元素宽高未知
a、弹性盒法
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.box1{
background-color: green;
}
</style>
b、绝对定位配合位移
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box1{
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
26、三栏布局
左右两侧固定，中间跟着页面的缩放而缩放
1）弹性盒法
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.box{
display: flex;
}
.left{
width: 200px;
height: 200px;
background-color: palegoldenrod;
}
.right{
width: 200px;
height: 200px;
background-color: palegreen;
}
.center{
height: 200px;
background-color: plum;
flex-grow: 1;
}
</style>
2）绝对定位法
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.box{
position: relative;
}
.left{
width: 200px;
height: 200px;
background-color: palegoldenrod;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 200px;
background-color: palegreen;
position: absolute;
top: 0;
right: 0;
}
.center{
height: 200px;
background-color: plum;
margin-left: 200px;
margin-right: 200px;
}
</style>
3）浮动法
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<style>
.left{
width: 200px;
height: 200px;
background-color: palegoldenrod;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: palegreen;
float: right;
}
.center{
height: 200px;
background-color: plum;
}
</style>
4）圣杯法和双飞翼法
先加载center
27、C3新特性
1）选择器
属性选择器 伪类选择器 伪对象选择器
2）弹性盒模型
3）圆角
border-radius:;
border-radius:50%; 画圆
4）盒阴影
box-shadow:水平方向偏移的位置 垂直方向偏移的位置 模糊度 阴影的尺寸 颜色 位置;
必需 必需 可选 可选 可选 可选
正负 正负 正值 正负 outset|inset
5）字阴影
text-shadow:水平方向偏移的位置 垂直方向偏移的位置 模糊度 颜色;
6）背景渐变
①线性渐变
background: linear-gradient(方向,颜色1,颜色2,...);
②径向渐变
background:-webkit-radial-gradient(中心点,渐变的形状,颜色1,颜色2,...);
7）转换
①作用
使元素在位置或者形状上发生一定的改变
②属性
transform:translate() rotate() scale() skew();
③位移 单位px、%
transform:translate(x,y);
当只有一个参数表示水平方向移动的距离
当有两个参数表示水平和垂直方向
transform:translateX();
transform:translateY();
④旋转 单位deg
transform:rotate(30deg);
当取正值，顺时针旋转
当取负值，逆时针旋转
当位移和旋转同时存在，推荐位移写在旋转的前面
旋转会旋转整个坐标轴
默认元素的中心点为宽高的一半
transform-origin:; 修改元素的中心点
⑤缩放 取值为number <1:缩小；>1:放大；默认为1
transform:scale(x,y);
当只取一个值，表示等比例缩放
当取两个值，表示水平和垂直方向
transform:scaleX();
transform:scaleY();
⑥倾斜 单位deg
transform:skew(xdeg,ydeg);
当只有一个值，表示水平方向倾斜的弧度
当有两个值，表示水平方向和垂直方向倾斜的弧度
transform:skewX();
transform:skewY();
8）过渡
①作用
使元素从一个样式逐渐变为另外一个样式
②过渡必须有触发事件
例如： 鼠标悬停 鼠标点击
③属性
transition:过渡的属性 过渡的持续时间 速度的变化类型 延迟时间;
必须 必须 可选 可选
④过渡的属性——必须属性
transition-property: ;
可以过渡的属性：
a、取值为颜色
b、取值为数值
c、阴影
d、转换
e、背景渐变
简写为all
⑤过渡的持续时间——必须属性
transition-duration: ;
默认0s|0ms
⑥过渡的速度变化类型——可选
transition-timing-function: ;
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 运算
⑦过渡的延迟时间——可选
transition-delay: ;
默认值0s|0ms
可以取负值：把这段时间的效果跳过
9）动画
①定义动画
@keyframes name{
0%|from{}
百分比{}
100%|to{}
}
②调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数(number|infinite) 播放的方向(alternate) 动画停在最后一帧(forwards);
必须 必须
animation-play-state:running|paused; 设置动画的播放状态
animation-name: ;
animation-duration: ;
animation-timing-function: ;
animation-delay: ;
animation-iteration-count: ;
animation-duration: ;
animation-fill-mode: ;
10）媒体查询 media query
①作用
实现响应式布局
②语法
a、内部
移动端
@media screen and (max-width:768px){}
ipad端
@media screen and (max-width:992px) and (min-width:768px){}
pc端
@media screen and (min-width:992px){}
b、外部
移动端
<link href="" rel="stylesheet" media="screen and (max-width:768px)"/>
ipad端
<link href="" rel="stylesheet" media="screen and (max-width:992px) and (min-width:768px)"/>
pc端
<link href="" rel="stylesheet" media="screen and (min-width:993px)"/>
11）字体图标
12）厂商前缀
①作用
解决浏览器对C3新特性的支持
浏览器 厂商前置 内核
谷歌 -webkit- blink
苹果 -webkit- webkit
火狐 -moz- gecko
欧朋 -o- blink
IE -ms- trident
13）css hack
①作用
解决IE低版本浏览器兼容性问题
②语法
a、条件hack
<!--[if 条件]>
<![end if]-->
b、属性前缀和后缀
前缀 + - _ # *
后缀 \0 \9 \9\0 !important(优先级最高)
14）多列
①作用
把元素内的文本分成多列
②属性
column-count: ; 设置列的数量
column-gap: ; 设置列之间的距离
column-rule:style width color ; 设置列之间的边框
