CSS-Day-3 浮动流，margin塌陷，伪元素

CSS学习笔记 Day-3

注：

1. 真正的两栏布局必须不能有重叠
2. 正常模式下区域不能共用
3. 凡是设置了position:abolute; float:left/right; 的，系统会自动从内部把元素转换成inline-block元素

CSS属性

• opacity 透明度

  .div{
      width:100px;
      height:100px;
      opacity:0.5;
      background-color:#fcc;
      
  }
  

  div中的粉色方块儿变为了半透明

• overflow：hidden;

  溢出部分隐藏

• float 浮动

  left（从左往右）/right（从右往左排列） 可以使元素站队

  规则能放下一个放一个，放不下到容器下一行，不会溢出。

浮动流：

• 浮动元素产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素

clear 清除浮动流

clear:both/left/right

（能使用clear清除浮动的必须为块儿级元素）

1.解决父级所包裹的浮动流

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <p class="clear"></p>
</div>

.wrapper{
  
    border: 1px solid black;

}
.content{
    float:left;
    color:#fff;
    background-color: pink;
    width: 100px;
    height: 100px;
} 

.clear{
    clear: both;
} */

2.利用伪元素清除浮动流

利用伪元素清除浮动流
.wrapper::after{
    content: "";
    clear:both;
    display: block;

}

margin塌陷

• 成父子结构嵌套的元素，垂直方向的margin移动,俩元素会黏合到一起，取其最大值一块儿移动。

• eg：

  <div class="wrapper">
          <div class="content"></div>
      </div>
  

  *{
  margin: 0;
  padding: 0;
  }
  .wrapper{
      margin-top: 100px;
      margin-left: 100px;
      width: 100px;
      height: 100px;
      background-color: black;
  
  }
  
  .content{
      margin-top: 150px;
      margin-left: 50px;
      width: 50px;
      height: 50px;
      background-color: green;
  }
  

• 解决方法：

  bfc（block format context 块儿级格式化上下文）

  改变一个盒子中的语法规则，触发bfc的语法规则：

  1. position:absolue;

  2. display:inline-block

  3. float:left/right

  4. oxerflow:hidden

  注：兄弟结构的div在垂直结构上的margin没有排斥，会相互融合的问题，也可用bfc解决，但是不用解决，不可以随便增加html的结构。

伪元素

• 每一个元素中天生都带有俩个伪元素，只是自己看不到而已，可被css操作，但是没有html结构

• 选择伪元素的方法

  span::before{
  content:"书写的内容将展现于网页中";
  }
  

  span::after{
  content:"是的，的确是这样"
  }
  

  <span>
  很帅
  </span>
  

• 伪元素为行级元素line