CSS相关知识点整理(超详解高度塌陷)

本文旨在帮助读者快速回顾CSS的一些重要知识点
(解决高度塌陷讲的很清楚一定要看啊😂)

1.CSS常用选择器

    元素选择器：可以通过标签来选中指定的元素
    语法:标签名{}
    例子：p{},h1{},div{}
    
    id选择器 只有唯一确定id
    语法: 首先在body确定id的名值对 然后在head修改 #id的属性值{}
    例子 #red{}

    class选择器(类选择器) 可以确定多个class
    语法：首先在body确定class的名值对 然后在head修改 .class的属性值{}
    例子.blue{}

    交集选择器 同时确定标签和属性值  希望元素满足多个条件时可以选择它，元素可以不止包含这些条件
    语法:选择器1选择器2选择器3选择器n{}    
    例子:div.red{}
    注意:如果交集选择器中有元素选择器，则必须元素选择器开头

    并集选择器 
    作用，同时选择多个选择器对应的元素  
    语法:选择器1,选择器2,选择器3{}
    例子 h1,div.red{}

    子元素选择器
    作用：选择指定父元素的指定元素
    语法:父元素>子元素

    后代元素选择器
    作用:选定指定元素内的所有指定后代元素
    语法:祖先 后代

    下一个兄弟选择器
    作用:指定平级关系中的后一个元素
    语法:前一个 + 下一个(只能紧挨着的下一个兄弟)
    或者:兄~ 弟 (兄后面所有的弟元素)

    属性选择器
    作用:选择有指定属性的元素
    语法:标签名[属性名]{}  或者 标签名[属性名=属性值]{}
    或者标签名[属性名^=属性值]以指定值开头的元素
    或者标签名[属性名$=属性值]以指定值结尾的元素
    或者标签名[属性名*=属性值]含有该值的元素
    例子p[title];p[title = 'abc']

2.伪类选择器

伪类用来描述元素的一个特殊状态 该元素是真实存在于结构层中的
比如第一个元素，被点击的元素，鼠标移入的元素
伪类一般情况下都是使用冒号开头
:first-child :last-child :nth-child(n) :nth-child(n+1)
2n或even表示偶数 2n+1或者odd表示奇数

3.伪元素

伪元素表示页面中并不真实存在的元素
伪元素使用::开头
::before(表示元素的位置，指针在第一个字母前面)
::after(表示元素最后的位置，指针在最后一个字母后面)
before 和 after 必须结合coutent属性使用
例子:在div标签的前面加一个内容填充abc，字体颜色为灰色的元素。

div::before{content:‘abc’;color: gray;}

4.选择器权重

当通过不同的选择器选择相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突
选择器的权重:
内联样式 1000
id选择器100
类和伪类选择器 10
元素选择器1
通配选择器*0
继承的样式没有优先级
分组选择器 如a,div,span是单独分开计算的

可以在某个样式后面加上!important获得最高优先级
在开发中这个玩意一定要慎用

5.文档流

文档流(normal flow)
网页结构多层，文档流是网页最底层
我们所创建的元素默认都是在文档流中进行排列
对于我们来说元素有两个状态
1.在文档流中
2.不在文档流中(脱离文档流)

元素在文档流中有什么特点？

块元素：

块元素会在页面中独占一行
-默认宽度是父元素的全部(会把父元素撑满)
-默认高度是被内容撑开（子元素）

行内元素：

-行内元素在页面中左向右水平排列，容纳不下会到第二行继续自左向右排列
-行内元素不会独占一行，只占自身的大小

6.盒模型

盒模型
CSS中的所有元素都设置为了一个矩形的盒子
将元素设置为了矩形的盒子以后，对页面的布局就变成不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成
-内容区(content)
-内边矩(padding)
-边框(border)
-外边距(margin)

内容区:元素中的所有子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
width 设置内容区的宽度
height设置内容区的高度

边框:
边框的大小会影响到整个盒子的大小
属于盒子的边缘，边框里边属于盒子内部，出了边框属于盒子外部
设置边框至少需要设置三个样式
border-wodth是边框粗细
border-color是边框颜色
border-style是边框风格,能决定是实线还是虚线

7.盒模型中水平方向的分布

素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left border-left padding-left
width
padding-right border-right margin-right
这些值加起来等于父元素内容区的长度
如果不等 ，而且这七个值中没有auto的情况，浏览器会调整margin-right值使等式满足

width,margin-left,margin-right中如果某个元素设置了auto值，则会自动调整auto值使等式成立
width默认是auto
margin:0 auto让子元素在父元素中水平居中

8.外边距折叠如何处理?

-相邻的垂直方向的外边距会发生折叠
-相邻的水平方向的外边距就会直接求和
1.两个兄弟元素的相邻外边距取两者中较大的，所以说会折叠
2.如果相邻外边距一正一负，则取两者的和
3.如果相邻的外边距都是负值，则取两者之中绝对值较大的

对于父子元素
1.父子元素的相邻外边距:子元素的外边距会传递给父元素(上外边距)
2.父子外边距的折叠会影响到页面的布局，必须要进行处理
3.可以在父元素设置内边距(padding)但是内边距挤开的像素必须要在height上减去
4.可以在父元素设置边框(border-top)以隔开父元素和子元素的外边距，但是还是要处理像素大小的变化

9.浮动

通过浮动可以使一个元素向其父元素的左端或者右端移动使用float属性来设置
元素的浮动
可选值
none 默认值，元素不移动
left元素向左浮动
right元素向右移动
注意:元素设置浮动以后，水平布局的等式不需要强制成立
而且float设置以后元素可以在文档流的外面，元素下面的还在文档流中的元素会自动向上移动
浮动的特点
1.浮动元素会完全脱离文档流，不再占据文档流中的位置
2.设置浮动以后元素会向父元素的左侧或者右侧移动
3.浮动元素默认不会从父元素中移除
4.浮动元素向左侧或右侧移动时，不会超过它侧边的其他浮动元素
5.如果浮动元素的上边是没有浮动的块元素，则浮动元素无法往上移
6.块元素不再独占一行
7.块元素的高度和宽度默认被内容撑开
8.行内元素脱离文档流以后可以设置宽度和高度

10.解决高度塌陷

嫌太长直接看最终解决方案吧😥
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，子元素从文档流中脱离，无法撑起父元素高度
导致父元素的高度丢失

父元素高度丢失以后，会导致其下的元素上移
处理方法一
自定义父元素框架大小，等于写死父元素(极力不推荐)

处理方法二
BFC(Block Formatting Context)块级格式化环境
-BFC是CSS中的一个隐含的属性，可以为一个元素开启BFC，开启后元素会变成一个独立的布局区域
元素开启BFC的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式开启元素的BFC
1.设置父元素的浮动，会丢失父元素的宽度
2.将父元素设置为行内块元素display:inline-block
3.将父元素的overflow设置为一个visible的值 可以用overflow:hidden 或者auto ，scroll则会增加两个滚动条

处理方法三:
如果我们不希望某个元素因为其他元素浮动的影响改变位置
可以通过clear属性来清除浮动元素对当前元素的影响
clear：
left 清除左边浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中影响最大的那侧

原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，使其位置不受到其他浮动元素影响

下列代码根据box3的clear属性为left,right,none会呈现三种不同效果

如果是left，相当于认为box1不是浮动元素,但还是认为box2是浮动元素，box3就会紧贴在box1下方。

如果是right，相当于认为box2不是浮动元素，就会紧贴在box2下方，box1是什么状态和box3没关系

如果是none，由于box1和box2脱离文档流，box3直接贴在父元素body的左上角。但是会被脱离文档流的box1所覆盖
各位可以分别进行尝试:

.box1{width: 200px; height:200px;background-color: #bfa; float: left;}
.box2{width: 400px; height:400px;background-color: yellow; float: right;}
.box3{width: 200px; height:200px;background-color: orange;clear: left;}

最终解决方案:

 <style>
        .box1{width: 200px;height: 200px;background-color:#bfa ;}
        .box1::before{content:'';display: table;}
        /*
        方案一:在内容框里面输入一个不占地方的table，
        用来阻隔和子元素的外边距重叠
       
		方案二:(强力推荐)或者给父元素添加一个类叫clearfix，
		同时用css给clearfix设置下列样式
		.clearfix:after {
					  visibility: hidden;
					  display: block;
					  font-size: 0;
					  content: " ";
					  clear: both;
					  height: 0;
					}	
		*/
        .box2{width: 100px;height: 100px;background-color:orange ;margin-top:100px}
    </style>

<div class="box1">
        <div class="box2"></div>
    </div>