版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boonyaxnn/article/details/88919857
1.css介绍
层叠样式表 、级联样式表 、简称 样式表
文件后缀 .css
2.作用：
1）实现了内容与表现的分离
2）提高了代码的可重用性和可维护性
3.css语法
属性:属性值;
4.css特点
1）继承性
具有继承性的属性：
color、font-*、text-*、line-height、list-style-*等
不具有继承性的属性：
background-*、margin、padding等
2）层叠性
3）优先级
优先级高的样式生效，优先级相同，后写的样式生效
5.引入方式
1）行内样式、内联样式 只对当前元素生效
<div style="属性:属性值;"></div>
2）内部样式 只对当前页面生效
<head>
<style>
选择器{
属性:属性值;
属性:属性值;
}
</style>
</head>
3）外部样式 实现了内容与表现的分离，提高了代码的可重用性和可维护性
<head>
<link rel="stylesheet" href="1.css"/>
</head>
4）导入式
<head>
<style>
@import "1.css";
</style>
</head>
@import和link的区别：
1）@import先加载HTML文件，再加载css文件；link同时加载HTML和css文件
2）@import只能引入css，link还可以引入其他内容
3）@import有兼容性（IE5以上支持），link没有兼容性
4）但js操作DOM时，只能操作link引入的css文件
5）@import会增加页面的http请求
6.选择器
1）基本选择器
1、全局选择器、通用选择器
*{}
选中页面所有元素
2、元素选择器
div、a、b、i、span、img、input、button.....
选中页面所有指定的元素
3、类选择器
.className{}
选中所有class属性为className的元素
类型可以重复，一个元素可以有多个类名，用空格隔开
4、ID选择器
#idName{}
一个网页中的ID名字唯一
选择器的优先级：
行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重：1000 100 10 1
5、合并选择器
选择器1,选择器2,...{
}
2）关系选择器
1、后代选择器
选择器1 选择器2{}
选中所有后代
2、子代选择器
选择器1>选择器2{}
选中所有直接子代
3、相邻兄弟选择器
选择器1+选择器2{}
下一个兄弟
4、通用兄弟选择器
选择器1~选择器2{}
后面所有兄弟
3）伪类选择器
:link 点击之前（只适用于a）
:visited 点击之后（只适用于a）
:hover 鼠标悬停（适用于所有元素）
:active 鼠标按下（适用于所有元素）
LVHA
css3新增
写在子元素上
:first-child 第一个子元素是...
:last-child 最后一个子元素是...
:only-child 唯一一个子元素
:nth-child(number|odd|even|倍数) 第几个子元素是....
:empty 空的子元素
:not(选择器) 否定
:focus 获取焦点
:checked 被选中
4）伪对象选择器
1、:before|::before{
content:"";
}
2、:after|::after{
content:"";
}
①插入文字
1、:before|::before{
content:"text";
}
2、:after|::after{
content:"text";
}
②插入图片
1、:before|::before{
content:url("");
}
2、:after|::after{
content:url("");
}
③自定义插入内容
1、:before|::before{
content:"";
display:block;
}
2、:after|::after{
content:"";
display:block;
}
5）属性选择器
元素[HTML的属性="属性值"]
元素[HTML的属性^="值"] 以什么开头
元素[HTML的属性$="值"] 以什么结尾
元素[HTML的属性*="值"] 包含
7.背景属性
1）背景颜色
background-color:transparent;
颜色的取值：
1、关键字 red、blue
2、十六进制 #000
3、rgb(0,0,0)
4、rgba(0,0,0,.5)
2）背景图片
background-image:url("");
默认水平垂直平铺
3）背景图片是否平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y;
4）背景图片大小
background-size:x y;
5）背景图片定位
background-position:x y;
默认 0 0
只取一个值时，第二个值默认居中
6）背景固定
background-attachment:scroll|fixed:
7）简写
background:颜色 图片 平铺 大写 定位 固定;
8.雪碧图、css精灵、css sprite
一种图片整合技术、把多张小图放在一张图片里
优点：
1）减少页面的http请求
2）减少图片字节数
3）减少图片命名困扰
9、字体属性
1）字体颜色
color:;
2）字体大小
font-size:16px;
3）字体是否加粗
font-weight:normal|bold|100-900;
normal=400
bold=700
4）字体是否倾斜
font-style:normal|italic;
5）字体
font-family:;
10、文本属性
1）内容水平对齐
text-align:left|right|center;
2）文本装饰
text-decoration:none|underline;
3）英文大小写转换
text-transform:;
4）首行缩进
text-indent:;
11、列表属性
1）项目符号样式
list-style-type:none;
2）项目符号为图片
list-style-image:url();
3）项目符号位置
list-style-position:;
4）简写
list-style:none;
12、溢出
overflow:hidden|auto|scroll;
13、文字溢出省略号显示
在同一行显示
white-space:nowrap;
溢出部门隐藏
overflow:hidden;
文字溢出省略号显示
text-overflow:ellipsis;
14、盒模型
1）标准盒模型、w3c盒模型
1、组成部分
content+padding+border+margin
2、实际宽度
width+padding+border+margin
3、content 内容区域
width 取值px、%（相对于父元素）
块级元素默认宽度为100%，行内元素宽度由内容撑开
height 取值px、%（相对于父元素）
块级元素和行内元素高度由内容撑开
min-width:;
max-width:;
min-height:;
max-height:;
4、border 边框
border-style:solid|dotted|dashed|double|none;
border-color:;
border-width:;
简写：border:1px solid red;
单边属性：
border-top:1px solid red;
border-top-style:;
border-top-color:;
border-top-width:;
border-bottom:1px solid red;
border-bottom-style:;
border-bottom-color:;
border-bottom-width:;
border-left:1px solid red;
border-left-style:;
border-left-color:;
border-left-width:;
border-right:1px solid red;
border-right-style:;
border-right-color:;
border-right-width:;
5、margin 外边距
设置盒子与盒子之间的距离
取值正负 auto
外边距时透明的
margin:value; 四周
margin:value value; 上下 左右
margin:value value value; 上 左右 下
margin:value value value value; 上 右 下 左
单边：
margin-top:; 上外边距
margin-bottom:; 下外边距
margin-left:; 左外边距
margin-bottom:; 右外边距
注意：
1）垂直方向上外边距合并问题
垂直方向上，当外边距相撞时，取较大值
浮动元素不合并
2）第一个子元素设置margin-top问题
①父元素加overflow:hidden;
②父元素或者子元素浮动
③父元素加border:1px solid transparent;
④父元素加padding-top:1px;
6、padding 内边距
设置内容距边框的距离
内边距会撑大容器
不可以取负值和auto
padding:value; 四周
padding:value value; 上下 左右
padding:value value value; 上 左右 下
padding:value value value value; 上 右 下 左
单边：
padding-top:; 上内边距
padding-bottom:; 下内边距
padding-left:; 左内边距
padding-bottom:; 右内边距
2）怪异盒模型、IE盒模型
1、组成部门
content+padding+border+margin
2、实际宽度
width+margin
宽度包含了border和padding
box-sizing:content-box; 默认值、标准盒模型
box-sizing:border-box; 怪异盒模型
3）弹性盒模型
弹性盒中float和clear不生效
1、父元素上的属性
display: flex; 开启弹性盒，子元素默认水平排列
flex-direction: column; 设置子元素垂直排列
justify-content: flex-start|flex-end|center|space-around|space-between; 设置子元素在主轴的对齐方式
align-items: flex-start|flex-end|center; 设置子元素在侧轴的对齐方式
居上 居下
2、子元素上的属性
flex-grow: number;
设置子元素之间宽度的比例
15、定位
1）普通流定位
2）浮动定位
3）元素定位
4）浮动
①原理
浮动后在页面中不占据位置
浮动是碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动只有左右浮动
②语法
float:left|right|none;
③清除浮动的影响
1）浮动元素的父元素加overflow:hidden|auto;
2）受影响的元素加clear:both;
3）浮动元素的父元素加高(父元素的高度已知)
4）空div法
浮动元素的后面加空div
空div clear:both;
5）伪对象法
浮动元素的父元素:after{
content:"";
display:block;
clear:both;
}
5）元素定位
①静态定位
position:static;
默认值
②相对定位
position:relative;
相对于自己原位置定位
定位后原位置保留
配合top、bottom、left、right移动
③绝对定位
position:absolute;
相对于已经定位的父元素定位（相对、绝对、固定），
如果父元素没有定位，逐级往上找
最后相对于body定位
配合top、bottom、left、right移动
④固定定位
position:fixed;
相对于浏览器窗口定位
定位后原位置不保留
配合top、bottom、left、right移动
⑤堆叠顺序
z-index:number;
默认为1 可以正负
取值越大、层级越往上
必须配合定位使用（相对、固定、绝对）
同时定位后，后面的元素再上
16、display属性
属性值：
block 块级元素
inline 行内元素
inline-block 行内块，即在同一行显示，又可以设置宽高
none 隐藏
flex 弹性盒
table-cell 单元格
display:none;和visibility:hidden;和opacity:0;的区别和联系：
联系：隐藏元素
区别：
display:none; 隐藏后不占据页面位置
visibility:hidden;和opacity:0; 隐藏后占据页面位置
不占据页面位置的属性：
display:none;
float:;
position:absolute;
position:fixed;
17、居中问题
1）内容水平居中
text-align:center;
2）块级元素水平居中
div{
width:;
margin:0 auto;
}
3）一行文字垂直居中
行高等于高
line-height:;
4）多行内容垂直居中
padding:20px 0;
5）子元素在父元素中水平垂直居中
<div class="parent">
<div class="child"></div>
</div>
①弹性盒法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 200px;
height: 200px;
background-color: paleturquoise;
}
</style>
②绝对定位法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: paleturquoise;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
③绝对定位计算
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: paleturquoise;
position: absolute;
left: 150px;
top: 150px;
}
</style>
④margin
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
overflow: hidden;
}
.child{
width: 200px;
height: 200px;
background-color: paleturquoise;
margin: 0 auto;
margin-top: 150px;
}
</style>
⑤表格法
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
.child{
width: 200px;
height: 200px;
background-color: paleturquoise;
margin: 0 auto;
}
</style>
18、三栏布局
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
①弹性盒法
<style>
.box{
display: flex;
}
.left{
width: 200px;
height: 500px;
background-color: red;
}
.right{
width: 200px;
height: 500px;
background-color: paleturquoise;
}
.center{
height: 500px;
background-color: plum;
flex-grow: 1;
}
</style>
②绝对定位法
<style>
.box{
position: relative;
}
.left{
width: 200px;
height: 500px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 500px;
background-color: paleturquoise;
position: absolute;
right: 0;
top: 0;
}
.center{
height: 500px;
background-color: plum;
margin-left: 200px;
margin-right: 200px;
}
</style>
③浮动
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<style>
.box{
}
.left{
width: 200px;
height: 500px;
background-color: red;
float: left;
}
.right{
width: 200px;
height: 500px;
background-color: paleturquoise;
float: right;
}
.center{
height: 500px;
background-color: plum;
}
</style>
19、css3新特性
1）选择器（属性选择器、伪对象选择器、伪类选择器）
2）弹性盒display:flex;
3）圆角
border-radius:;
border-radius:50%; 画圆
4）盒阴影
box-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 扩展值 颜色 位置;
正负 正负 正值 正负 outset|inset
5）字阴影
text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色;
正负 正负 正值
6）背景渐变
①线性渐变
background: linear-gradient(方向,color1,color2,.....);
②射线渐变、径向渐变、扇形渐变
background: radial-gradient(渐变中心点,渐变的形状,color1,color2,.....);
7）变型、转换
作用：使元素在位置或者形状上发生一定的改变
属性：transform:;
属性值：
①位移 单位px
transform:translate(x,y);
当只有一个值，代表水平方向
当有两个值，代表水平和垂直
transform:translateX();
transform:translateY();
②旋转 单位deg
transform:rotate(deg)
取值为正，顺时针旋转
位置为负，逆时针旋转
transform:rotateX(deg)
transform:rotateY(deg)
旋转默认的中心点为宽高的一半
transform-origin:;
注意：旋转会旋转整个坐标轴，当位移和旋转同时存在，旋转写在位移的后面
③缩放 取值数值 0-1 缩小 ，>1 放大
transform:scale(x,y)
当只取一个值，等比例缩放
当取两个值，代表水平方向和垂直方向
transform:scaleX()
transform:scaleY()
④倾斜 单位deg
transform:skew(x,y)
当只取一个值，代表水平方向
当有两个值，代表水平和垂直
transform:skewX()
transform:skewY()
8）过渡
作用：使元素从一种样式平滑的过渡到另外一种样式
必须有触发事件,例如鼠标悬停、点击
属性:transition:all 2s linear 1s;
属性值：
1）过渡的属性
transition-property: ,,,;
可以过渡的属性：
①取值为颜色
②取值为数值
③转换 transform
④阴影 box-shadow:; text-shadow:;
⑤背景渐变
简写为 all
2）过渡的持续时间
transition-duration: s|ms;
3）过渡的速度变化类型
transition-timing-function: ;
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速，后减速
linear 匀速
4）过渡延迟时间
transition-delay:s|ms ;
取负值
9）动画
1、动画和过渡的区别
1）过渡只能制作简单的动画，动画可以制作复杂的动画
2）过渡必须有触发事件，动画可以没有
2、关键帧动画属性
animation:;
3、定义动画
@keyframes name {
0%|from{
css样式
}
百分比{
css样式
}
100%|to{
css样式
}
}
4、调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数（infinite） 播放方向（alternate） forwards（动画停在最后一帧）;
5、动画属性
animation-name: ;
animation-duration: ;
animation-timing-function: ;
animation-delay: ;
animation-iteration-count: ;
animation-direction: ;
animation-fill-mode: ;
10）媒体查询
作用：写一次样式，适用于各种终端
语法：
<!--pc端-->
@media screen and (min-width:992px;){
}
<!--ipad端-->
@media screen and (min-width:768px;) and (max-width:991px){
}
<!--移动端-->
@media screen and (max-width:767px;){
}
11）兼容性
1、厂商前缀
浏览器 厂商前缀 内核
谷歌、苹果 -webkit- 苹果味webkit，谷歌为blink
火狐 -moz- gecko
欧朋 -o- 一开始为presto，后改用blink内核
IE -ms- trident内核（IE内核）
2、css hack
兼容IE 6 7 8
1）条件注释法
<!--[if IE]>
<![endif]-->
2）属性前缀或后缀
前缀 - _ + * #
后缀 \0 \9 \9\0 ！important
12）多列
column-count: number; 列的数量
column-gap: ; 列之间的距离
column-rule: 1px solid red; 列之间的边框