关于css样式的知识点整理

1.css概念 Cascading Style
层叠样式表，将html文件的内容以更加优良的方式呈现给用户
用多个样式修饰同一个元素
{
属性：值；
}
2.css声明
选择器{
属性名：属性值；
}
3.可读性【规范性】
1.缩进、空白
2.添加注释
3.速写
margin-top:10px;margin-left:20px;margin-bottom:10px;margin-right:5px;
margin:10px 5px 10px 20px;
4.原理
DOM文档对象模型
将标签渲染成节点
document根节点
1.加载html文件
2.解析html文件中的内容
3.在解析html的同时加载css文件
4.在解析完成后创建DOM树
5.将页面呈现出来
5.如何在html文件中使用css
1.内部
2.外部
3.行内/内联
6.@impotant和link的异同
相同：都可以导入外部的css样式表
不同：
1.所属范围：
@important的语法是css的语法
link是html文件中的标签
2.加载顺序不同：
link导入的css实在解析html文件的同时解析的
@important导入的css只有在html文件解析完毕后才能加载
3.兼容性问题
link是html标签，不存在兼容性问题
@important是css语法，所以可能存在兼容性问题【低版本浏览器中可能失败】
7.css选择器
1.基本选择器：
通配选择器 *
id选择器 #
class选择器（类名选择器） .
逗号选择器 ，
标签选择器
组合选择器 div.one
2.层次选择器：
子代选择器 .one>.two
后代选择器 .one .two
8、属性选择器【表单元素】
[key]选中所有具有key属性的元素
[key=val]选中所有具有key属性且值是val的元素
9、伪类选择器
:link a标签未点击时
:hover a标签光标悬浮
:active a标签点击时
:visited a标签访问时

:first-child
:last-child
:nth-child(n)

10、伪元素选择器
::before 在当前选中的元素前面创建一个伪元素
::after 在当前选中的元素后面创建一个伪元素
清除浮动
11、级联
浏览器采用css样式的顺序
1.！important 优先级最高
具有该属性值的样式，优先级最高
2.特性值
内联样式 1000
id选择器 100
class选择器/伪类选择器/属性选择器 10
标签选择器/伪元素选择器 1
3.css代码的顺序
谁离选中的元素近，就采用谁的样式【就近原则】
12、继承
样式从父元素继承到子元素的过程
1）可以继承的样式
font-size 字体大小
color 字体颜色
cursor 鼠标形状
2）不可继承的样式
height 高度
width 宽度
margin 外边距
background-color 背景色
padding 内边距
13、单位
1)颜色
1.十六进制颜色 #CCCCCC = #CCC(简写)
2.关键字颜色 red/orange/yellow/blue。。。。
3.rgb
r -> red 0~255
g -> green 0~255
b -> blue 0~255
a -> 模糊程度 0~1
2）长度、尺寸
1.px 绝对单位：像素
2.em 相对单位：参考父元素的字体大小
3.rem 相对单位：参考根元素html的字体大小
4.% 相对单位：

14、相对单位
浏览器的默认字体大小是16px
em 参考点
相对于当前元素的父元素的字体大小
rem
相对于根元素html中字体大小
%
相对于父元素的大小

15、盒子模型
浏览器页面中每一个元素都可以被当作一个“盒子”
1.组成
width: 元素内容的宽度
height: 元素内容的高度
padding: 元素内容与边框的距离[内边距]
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
padding：上 右 下 左；
border: 元素的边框
margin: 元素与其他元素之间的距离
2.背景
background-color背景颜色
background-img 背景图片
background-size 背景图的尺寸
background-repeat重复方式
background-position背景图的位置
background-clip 背景图
16、布局
1.默认文档流
1.页面元素出现的顺序与该元素在html文件中出现的顺序一致
2.块级元素独占一行空间
3.行内元素可以与其他元素共享一行空间

    由于默认文档流满足不了所有需求，所以需要采用其他的布局方式
    
2.浮动布局
    用法：为了让块级元素在一行显示。
    语法：float：left/right；
    特点：1.脱离了默认文档流
         2.浮动布局的元素会从左往右一次布局，直到所有浮动元素宽度之和超过父元素的宽度，才换到下一行继续布局
         3.浮动元素会失去对父元素的支撑【清除浮动】

17、overflow 对超出的内容区域进行处理
auto 根据元素是否超出添加滚动条
超出——>添加滚动条
不超出——>不添加滚动条
scroll 给父元素直接添加滚动条，不论子元素是否超出父元素
hidden 将超出父元素的内容隐藏【不显示】

18、文本、字体样式
font-
font-size 字体大小
font-weight 字体粗细
font-family 字体族
font-face 网络字体
color 字体颜色

text-
    text-algin 文字的排布方式
        center
        left
        \right
    text-decoration 文字线的修饰
        overline            上划线
        underline           下划线
        line-through        删除线
    text-transform 文字的变形
        首字母大写
        所有英文
    text-decoration:underline

19、定位布局
当元素使用了定位属性position之后，可以使用left\top\right\bottom来描述元素位置
1）静态布局【默认值】
position:static;
2)相对定位
参考点：相对于当前元素原本的位置
position:relative;
3)绝对定位
参考点：相对与当前元素的父【祖先级】定位元素，当祖先级元素都不是定位元素的时候，相对于浏览及视口进行定位
position:absolute；

20.固定定位：
position：fixed
参考点：浏览器的视口
21.粘滞布局
position:sticky;
相对定位 + 固定定位
阈值：
大于 相对定位
小于 固定定位
22、伸缩盒
在移动端进行布局
1）语法
display：flex;
2)父元素的样式
display：flex 将盒子设置为伸缩盒
flex-direction 弹性元素排布方向
row x轴方向上排布【默认值】
column y轴方向排布
justify-content:主轴上的排列方式
center 居中排布
flex-start 居左排布（开始位置）
flex-end 居右排布（结束排布）
align-item:center副轴上的对齐方式
3）子元素的样式
flex： 弹性元素对于伸缩盒剩余空间的分配

calc()百分比减去像素

23、动画
animation
随着时间的推移动态的改变css样式属性
1）语法【组成】
animantion：动画的配置
@keyframes：动画的关键帧