css 学习笔记浮动，不脱离文档流，继承和层叠

Posted 2022-04-29 黎燃黎燃

浮动

浮动的元素没有块级一说，原来多大浮起来就是多大，
只要是涉及到页面的布局都是用float布局的
<style>
       #d1 
           height: 200px;
           width: 200px;
           background-color: red;
           float: left;/*向左浮动*/

       
       #d2 
           height: 200px;
           width: 200px;
           background-color: blue;
          float: right;/*向右浮动*/

       

浮动带来的影响

·解决浮动带来的影响
·溢出属性
·定位
·验证浮动和定位是否脱离文档流
·Z-index模态框
·透明度
·简单的博客园搭建
·JS编程前戏

解决浮动带来的影响

带来父标签塌陷的问题
解决浮动带来的影响的 推导步骤
1·自己增加一个div设置高度
2· 利用clear属性

d4 
clear: left;/*该标签的左边（地面和空中）都不能有浮动的元素 clear：right即为右侧不能有，both即为两侧都不能有*/

3·通用的解决浮动带来影响的方法
在写html之前 先提前写好处理浮动带来印象的css代码

.clearfix:after
content:;
display:block;/*把一个空的内容设置为一个块级标签，块级标签自带独占一行的属性*/
clear:both;/*使标签两侧都不能存在浮动的标签*/

之后只要出现了标签塌陷的问题就给该塌陷的标签增加一个clearfix属性即可

验证浮动和定位是否脱离文档流

浮动
相对定位
绝对定位
固定定位

不脱离文档流

1·相对定位不脱离文档流

脱离文档流

1·浮动
2·绝对定位
3·固定定位
在学习H5与CSS的过程中，会遇到很多让人疑惑的地方，我的解决方法是实践与记录。先将问题暂时记在记事本，再在过程中不断试验并记录截图，方便后期总结对比。总结的过程中也会重新发现很多当初没有注意或没有深入思考的点，而正是这些点促成我们的进步。

继承和层叠

层叠是指当元素应用了多个样式规则，哪个规则优先应用。 如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况，那可能是层叠没有运用好。 层叠与继承紧密相关，继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关，不同的选择器具有不同的特异性，当有几个选择器可以应用于一个元素时，继承可以决定应用哪个规则。