很多,一定要掌握
css总结
CSS总结
css相关的属性
color
文字的颜色
取值
关键字：red、pink
rgb
每一项 0~255
rgba
a透明度
0：完全透明
1：完全不透明
0.5：半透明
取值范围是：0~1
十六进制
#
要么是6位
#ffaabb
要么是3位
#fab
font-相关的属性
文字相关的属性
相关属性
font-size
字体的大小
font-weight
字体的粗细
取值
关键字
加粗：bold
正常：normal
纯数字
加粗：700
正常：400
font-style
字体样式
取值
italic
倾斜
normal
正常
font-family
字体的类型
font-相关属性的连写形式
swsf
font：style weight size family
注意覆盖的问题
单独写的样式写在连写的后面
连写的完整版
font：style weight size/line-height family
省略问题
可以省略前两个
background-相关属性
背景相关的属性
相关属性
background-color
背景颜色
background-image
背景图片
默认是平铺效果
background-repeat
背景是否平铺
repeat
平铺
no-repeat
不平铺
repeat-x
x轴平铺
repeat-y
y轴平铺
background-position
背景图片的位置
取值
关键字
水平方向
left center right
垂直方向
top center bottom
px
混用
50px center
x轴50px 垂直方向居中
background-size
设置背景图片的大小
取值
第一个值
背景图片的宽度
数字+px
100%：表示就是当前盒子的宽度
第二个值
背景图片的高度
数字+px
100%：表示就是当前盒子的高度
background-相关的属性的连写形式
background：color image repeat position
覆盖问题
单独写的样式写在连写的后面
text-相关属性
文本相关属性
相关属性
text-indent
首行缩进
首行缩进两个字符
2em
1em=font-size
px
text-decoration
文本的修饰
取值
none
无（没有修饰）
一般用于清除a标签的下划线
underline
下划线
line-through
删除线
text-align
文本的对齐方式（水平方向）
取值
left
center
水平居中
right
line-height
行高
定义：两行文本基线之间的距离
作用：让文本垂直居中
line-height：标签的高度
取值
数字+px
数字+em
1em=font-size
浏览器默认文字大小：16px
百分比
百分比*font-size
单纯的数字（倍数）
倍数*font-size
vertical-align
垂直对齐方式
作用：处理行内块元素对齐方式的问题
一般只会给行内块元素设置
取值
top
middle
bottom
baseline
overflow
设置内容溢出部分的样式
取值
visible
超出不隐藏
hidden
超出隐藏
scroll
滚动条
缺点：无论内容是否超出，都有滚动条
auto
根据内容的多少自动显示或者隐藏滚动条
border-radius
边框圆角
常见的使用
1、画一个圆
盒子是正方形
设置border-radius：50%；
2、胶囊按钮
盒子是一个矩形
设置border-radius：盒子的高度一半；
cursor
鼠标样式
取值
default
默认的箭头样式
pointer
小手的样式
text
工字型
居中方法总结
水平居中
text-align：center
文字
行内元素
span a
行内块元素
img、input
margin：0 auto
标准流中的块级元素
垂直居中
line-height：标签的高度
文字
行内元素
span a
行内块元素
input
img
需要单独给img标签设置vertical-align：middle
定位
1、子绝父相
2、top：50%；
3、transform：translateY（-50%）；
让块级元素垂直居中
选择器
作用：找到页面中的标签，设置样式
基本选择器
标签选择器
标签名 {}
通过标签名，找到页面中所有符合的标签
一类
类选择器
.类名 {}
通过类名，找到页面中所有带有这个类名的标签
注意点:
一个标签可以设置多个类名
一个类选择器可以选中多个标签
多对多
id选择器
#id属性{}
通过id属性，找到页面中带有这个id的标签
注意点
一个标签只能有一个id属性
一个id选择器只能选中一个标签
一对一
id相当于身份证号码，在一个页面中是唯一的，不能重复的！！！！
复杂选择器
通配符
* {}
找到页面中所有的标签，设置样式
效率低 耗性能
并集选择器
选择器1，选择器2 {}
找到选择器1和选择器2选中的标签设置样式
注意点:
并集选择器可以同时写多个选择器，选择器之间用逗号隔开！！
交集选择器
选择器1选择器2 {}
既又原则
既符合选择器1又符合选择器2的标签设置样式
注意点
交集选择器中可以写多个选择器，但是选择器与选择器之间是紧挨着的！！！！
如果多个选择器之间有标签选择器，必须写在最前面
后代选择器
选择器1 选择器2 {}
在选择器1选中标签的后代（儿子、孙子、重孙子....）中，找到符合选择器2的标签，设置样式
子代选择器
选择器1>选择器2 {}
在选择器1选中标签的子代（儿子），找到符合选择器2的标签，设置样式
链接伪类选择器
选择的不仅仅是标签，而是标签的某种状态
a:link
链接未点击时的状态
a:visited
链接访问之后的状态
a:hover
鼠标悬停时的状态
可以用在其他元素
a:active
鼠标按下的状态
书写顺序
lvha
结构伪类选择器
作用：通过标签的html结构关系，找到对应的标签
常见的情况
li:first-child {}
1、找到页面中所有的li
2、找到li的父元素
3、找到父元素的第一个子元素
4、判断第一个子元素是否是li
是
加样式
不是
不加样式
li:last-child {}
1、找到页面中所有的li
2、找到li的父元素
3、找到父元素的最后一个子元素
4、判断最后一个子元素是否是li
是
加样式
不是
不加样式
li:nth-child（数字）
找到偶数个
2n
找到奇数个
2n+1/2n-1
找到前12个
-n+12
属性选择器
作用：通过标签的属性找到对应的标签
结构：标签名[属性名=“属性值”] {css样式}
常用的情况
input[type='text'] {}
找到页面中所有的文本框
input[type='button'] {}
找到页面中所有的表单按钮
css的书写位置（css的三种引入方式）
内嵌样式
书写位置
css写在style标签里面
style标签可以写在任意位置，但是规范最好写在title标签下面
作用范围
当前页面
应用场景
小案例、小demo
行内样式
书写位置
css写在标签的style属性中
作用范围
当前标签
应用的场景
基础班不用，之后js操作的样式都是行内样式
外联样式
书写位置
单独的css文件中，如果要使用通过link标签引入
作用范围
多个页面（谁引入谁生效）
应用场景
项目中用的最多
css的三大特性
继承性
子元素有默认继承父元素样式的效果
哪些属性可以继承？（记忆方法）
color
text-
font-
line-
不能继承的特殊情况
a标签的颜色不能继承
其实是继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h系列的font-size不能继承
其实是继承下来了，但是被浏览器默认设置的样式给覆盖掉了
块级元素有默认继承父盒子宽度的效果
其实并不是继承，只是因为独占一行的效果
如果子元素自己有样式（自己设置、浏览器默认加的），都不会问父元素要
层叠性
层叠的样式不同时，样式会叠加
共同作用在标签上
层叠的样式相同时，样式会覆盖
写在下面的样式生效！！！
优先级
公式
继承<通配符<标签选择器<类选择器<id选择器<行内样式<!important
注意点
!important不能提升继承的优先级
继承永远是继承，优先级最低！！
!important书写位置
font-size：100px !important ；
!important只能提升单个样式的优先级
不能提升选择器的优先级
权重（应付复合选择器）
计算公式
0000
第一级表示行内样式的个数
第二级表示id选择器的个数
第三级表示类选择器的个数
第四级表示标签选择器的个数
!important优先级最高！！！！！！
元素的三种显示方式
块级元素
display：block
特点
独占一行
宽度默认继承父元素的宽度
高度默认由内容撑开（自适应）
可以设置宽高
代表标签
div、h、p
行内元素
display：inline
特点
一行显示多个
宽度和高度默认由内容撑开
不可以设置宽高
代表标签
span a
伪元素默认显示行内元素
行内块元素
dispaly：inline-block
特点
一行显示多个
可以设置宽高
代表标签
input img
三种显示方式的转换
display：block/inline/inline-block
盒子模型
四个部分组成
内容：content
内边距：padding
盒子边框与内容之间的距离
边框：border
外边距：margin
盒子与盒子之间的距离
具体每个部分的组成
border：边框
属性
border-width
边框的粗细
border-style
边框的样式
solid 实线
dashed 虚线
dotted 点线
border-color
边框的颜色
连写
border：width style color
快捷键：bd+
给单方向设置边框
border+方位名词
去除边框：border：none；
padding：内边距
表示：边框与内容之间的距离
取值
一个值
上下左右
两个、三个、四个
从上开始赋值 顺时针赋值，如果没有设置的 看对面的！！！
给单方向设置padding
padding+方位名词
盒子大小的计算公式
盒子的宽度=左border+左padding+内容的宽度+右padding+右border
盒子实际大小的组成部分
内容
width/height
内边距
padding
边框
border
设置盒子的大小
手动内减
自己计算,多出的部分在内容中减去
自动内减
box-sizing：border-box
margin：外边距
表示：盒子与盒子之间的距离
取值
一个值
上下左右
两个、三个、四个
从上开始赋值 顺时针赋值，如果没有设置的 看对面的！！！
给单方向设置margin
margin+方位名词
margin的单方向应用
上下的margin
margin-top
让盒子往下移动
margin-bottom
让下面的盒子往下移动
左右的margin
margin-left
让盒子往右移动
margin-right
让右边的盒子往右移动
margin的特殊现象
margin的合并现象
水平方向：左右margin会叠加
两者之间的距离为margin的和
垂直方向：上下的margin会合并
取两者之间margin的最大值！！！
margin的塌陷现象
现象是什么？
两个块级元素嵌套，如果给子盒子设置margin-top 父盒子会一起往下移动！！！
解决方法
给父盒子设置border-top
给父盒子设置padding-top
给父盒子设置overflow：hidden
触发了BFC
块级格式化上下文
给父盒子设置浮动
把父盒子转换成行内块
浮动
浮动的作用
现在的作用：让垂直布局的盒子变成水平布局（一个左，一个右）
最开始：图文环绕
属性
float：left
左浮动
float：right
右浮动
特点
浮动的元素会脱离标准流（脱标）
飘起来了（不占位置）
比标准流高半个级别
浮动找浮动
浮动的元素受到边界的影响
浮动之后的元素会有类似于行内块的效果
一行可以显示多个
可以设置宽度
其实浮动元素只能覆盖标准流中的块级元素（会把文字、行内块.....挤到一边去）
清除浮动
为什么要清除浮动？？？
清除浮动带来的影响
浮动之后的元素不能撑开父元素（脱标），父元素的高度就为0，就会影响之后的布局
如何清除浮动
额外标签法
1、在父元素里面的最后添加一个块级元素
2、给添加的块级元素设置清除浮动的核心代码
clear：both
缺点：在页面中添加了多余的标签，影响页面的结构不清晰
伪元素清除法
本质上原理和额外标签一样，添加的是伪元素
伪元素：由css添加的元素
常用的伪元素
::before
...之前
::after
...之后
伪元素清除法的代码
给父元素设置overflow:hidden
触发了BFC
直接给父元素设置高度
定位
静态定位
position：static
不能通过配合方位属性使用！！！
相对定位
position：relative
特点
相对于自己原来的位置进行移动
占位置：没有脱标
绝对定位
position：absolute
特点
相对于
默认相对于浏览器进行移动
如果父元素有定位（相对、绝对、固定）,相对于有定位的父元素进行移动
不占位置：脱标了
子绝父相
子元素绝对定位
父元素相对定位
应用
让块级元素水平居中
1、子绝父相
2、left：50%；
3、transform：translateX（-50%）；
让块级元素水平居中都居中
1、子绝父相
2、left：50%；
3、top：50%；
4、transform：translate（-50%，-50%）；
固定定位
position：fixed
特点
永远相对于浏览器进行移动
不占位置：脱标
注意点：脱标之后的元素宽度默认由内容撑开！！！
层级关系
标准流<浮动<定位
三种定位之间层级关系默认一样，写在下面的可以覆盖上面的
如果要手动设置定位元素的层级
z-index：整数；
数字越大，层级越高！！！
css的三种隐藏方式
overflow：hidden
内容超出部分隐藏
是让超出的内容隐藏！！！不是让的元素隐藏！！！
visibility：hidden
元素隐藏，页面中看不见
占位置！！！！
display：none
元素隐藏，页面中看不见
不占位置！！！
嵌套的特殊情况
p标签不能嵌套div
会把p标签解析成两个
a标签不能嵌套a标签
也会解析成两个并列的a标签
精灵图
精灵图的作用（好处）
减轻服务器的请求次数，减轻服务器的压力
使用
1、新建一个盒子
2、通过ps量取精灵图中小图片的大小 设置盒子
3、将精灵图设置为盒子的背景图片
4、通过background-position：来设置背景图片的位置 x和y的值 都是负数
注意：精灵图本质上就是一个盒子（div）设置背景图片，不能使用img标签做！！
字体图标
字体图标的作用
可以减轻服务器的压力
字体图标本质上文字，通过css设置字体图标的颜色、大小、样式
字体图标放大不会失真！！！
使用：
下载
打开demo_fontclass.html说明书
根据说明书的步骤 去使用！！！
1、引入iconfont.css这个文件
2、在页面中写入i标签 添加对应的类名即可！！