关于CSS的一些学习
1、css三大特性：
1.1 层叠性
一个标签可以有多个css样式（选择器类型相同）
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠） 另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循的原则是"就近原则"，哪个样式声明离结构近，就执行哪个样式
- 样式不冲突，不会层叠
/*h1显示效果为pink*/
<style>
/* 声明样式 */
h1 {
color: red;
}
h1 {
color: pink;
}
</style>
1.2 继承性
子标签会继承父标签的某些特性。如文本颜色和字号、元素可见性、列表布局属性、光标属性，
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
<div>
<!-- 此时li的内容不会发生变化，行内样式 写哪变哪 -->
<p style="font-size: 50px;">
div的子元素p1
<li>p1的li</li>
</p>
<p>div的子元素p2</p>
</div>
- 不可继承：盒子模型属性、display、背景属性、定位属性、生成内容、轮廓样式、页面样式、
权重不可被继承
1.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
权重：
继承的优先级最低
行内样式较高
权重相同时（同选择器作用）：就近原则
！important命令：优先级无限大
h1{
color:gray !important;
}
继承权重公式：
继承、* ： 0,0,0,0
标签选择器：0,0,0,1
类、伪类选择器：0,0,1,0
id选择器：0,1,0,0
行内样式：1,0,0,0
！important：无穷大
width、height：大于无穷大
2、常用单位（了解即可）
px（像素）：最常用
em：绝对单位
rem：由整个html的字号决定，当我们改变了浏览器的字号，页面的字号也会发生变化
%：百分比，相对父元素的比例，高度，宽度都可以设置，但会随页面缩放而变化
3、常用属性
字体大小：font-size：20px;
字体粗细：font-style：bold;加粗
字体修饰：text-decoration: underline;下划线；none，不设置
字体设置：font-family：monospace;
复合属性：font：20px italic bold;
背景颜色：backgound-color：skyblue 或者 #ffff;
背景图片：background-image：url(img/lidj.jpeg)，背景图片优先级高于背景颜色
4、区块属性（重要）
定义一个元素的显示方式display
1、块级元素（block）：独占一行，（自动换行）可设置宽高；div,p,h,li,ul,form,table 等
2、行内元素（inline）：占一行的一小部分，不可设置宽高，多个行内元素水平排版（不自动换行）；span,img,a 等
3、行内块级元素（inline-block）：与行内元素类似，只是可设置宽高；button，img，input，lable,select等
4、空元素（none）：也叫隐藏元素;br,input,meta等
-
块级变行级
div变span:
display：inline; 不可设置宽高
-
行级变块级
span变div
display : inline-block; 不换行了，还能设置宽高
-
display ：none；隐藏元素，页面上不显示，检查元素不显示
5、盒子模型（重要）
组成：context（内容）、padding（内边距）、border（边框）、margin（外边距）
width 只包含内容宽度，不包含 padding 和 border
hight 就只是内容的高度
5.1 box-sizing：设置盒子模型
5.1.1 怪异盒子模型 border-box
border-box:，可以保证盒子大小，包含内边距padding和边框线border，不包括外边距（管你其他怎么设置，始终保证盒子大小）
<style>
.border-box{
box-sizing: content-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
</style>
5.1.1 标准盒子模型 context-box
- 盒子总宽度：margin + border + padding + width
context-box：保证当前div的尺寸，不包含内边距padding和边框线border
需要掌握：会算盒子的各个尺寸
<style>
.content-box{
box-sizing: content-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
</style>
margin：外边距；距离上和左
padding：内边距；距离上和左
/* 初始化，去掉左和上的空格 */
*{
margin：0；
padding：0；
}
6、三种传统网页布局方式（重点）
css提供了三种传统网页布局方式，分别是标准流，浮动和定位三种。
6.1 文档流（标准流）
在网页中将窗体自上而下分成好多行，并在每行从左到右顺序排列元素，即为文档流，（网页默认布局排序方式：自上而下，从左到右排列）
6.2 定位 position
tips：
1、当设置了定位后，原来的元素会脱离文档流（在页面上浮起来）
2、“子绝父相”：子元素绝对定位，父元素相对定位
3、使用定位后，尽量不要用margin
4、定位中的left和margin-left的区别：
left：是定位的属性，是相对于父元素的位置
margin-left：是盒子模型的属性，相对于自己的初始位置，设置有难度
static ：默认文档流
啥也不写就是默认
absolute：绝对定位
-
相对于一个父级元素位置来说的，
-
前提有个父元素作为参考
-
需要指定（类似于坐标）
<style>
.div{
position：absolute
/* 距离父级上和左是200px */
left:200px;
right:200px;
}
</style
relative：相对定位
- 相对于上一级元素位置来说，是设置为相对定位的元素框会偏移某个距离，移动元素会导致它覆盖其它框。
z-index：100 ；大于0即可；z轴索引，设置谁在上谁在下的问题
fixed：固定定位
margin：auto；水平居中
- 定在页面上，对默认的文档流起作用，滑动没反应
6.3 浮动 float（重点）
list-style:none 去掉前面的实心小圆点
- 浮动可以改变元素标签默认的排列方式。
none：不浮动
left：向左浮动
right：向右浮动
特点：
（1）脱离标准流，不占位，移动到指定位置；
（2）浮动的盒子不再保留原先的位置；
（3）全部设置浮动，元素会一行内显示并且元素顶部对齐
（4）当父级元素设置浮动时，浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多的盒子就会另起一行；
（5）一个标签设置了浮动float属性，就会有块级元素属性。
浮动和绝对定位区别:
- 同：这二者都可以让div脱离文档流
- 不同点：
- 浮动：浮动有个占位，文档流的其他内容不会忽略浮动的位置，其他内容会绕开，设置完浮动后，注意后面其他元素的处理；
- 绝对定位：文档流的其他内容会忽略浮动的位置，会直接穿过绝对定位所在的div；
6.3.1 内容坍塌
出现：
在文档流中，父元素的高度默认是被子元素撑开的，（子元素多高，父元素就多高）。
当为子元素设置浮动后，子元素就会脱离文档流，此时就会导致子元素无法撑起父元素的高度，导致父元素出现高度塌陷的问题。并且父元素下的所有元素都会向上移动。
解决：
-
设置元素的
display属性的值为inline-block
-- 可以解决问题，但是也会导致宽度丢失，也不推荐使用这种方式 -
清除浮动
，让盒子撑起来 -
伪元素清除浮动：多处需要清除(推荐使用)，对应元素选择器后加伪类，伪类里啥都不用写
<style>
/* 通过 after 伪类来设置一个空的元素 */
.div1::after{
content:'';
height:0;
line-height:0;
display:block; /* 设置为块级元素 */
visibility:hidden;
clear:both; /* 左右两侧均不允许浮动元素 */
}
</style>
<body>
<div class="div1">
</div>
</body>
7、可见性 visibility
属性 visible ：这是默认的
属性 hidden：隐藏（推荐使用）
检查元素可以看到隐藏位置
8、溢出策略 overflow
装不下了，溢出的部分怎么办
- 滚动条：scroll
- 隐藏：hidden
- 默认：visible
9、一些网页布局（了解即可）
知道长啥样就行
双列布局
两列布局
三列布局
上，左，中右
10、动画 transition、animate
transition：width 2s ease-in 3s,height 3s
宽度在2s后加速到3s变化，高度在3s后变化
两者区别：
前者只能通过固定的属性来开始与结束值
-
使用动画：先声明再使用，
- @keyfram myAnim{ 0%{ /* 属性 */ } 50%{ /*属性，到50%时怎么样 */ } 100%{ /* 最后啥样 */ } /* 引用自定义动画，延迟5s */ <style> animation myAnim 5s </style>11、弹性布局 display：flex（了解即可）
块级元素和行内块级元素可以进行弹性布局
1、父容器加上 display：flex（设置流式布局）
2、加上flex-direction : row (从左到右)（设置排列方向）
要掌握的：
选择器 ( 最重要！！！)
css三大特征
盒子模型（重要！！！）
定位、浮动-清除浮动（必会！！！）
常见属性、字体、背景、列表、边框...
元素的隐藏，元素内容溢出（重要）overflow,display,visibility
开发中推荐使用外部引入方式
参考来源
参考来源：
https://blog.csdn.net/Yang_Xingxing_/article/details/106125602
https://blog.csdn.net/weixin_62061392/article/details/124022510
