css绘图练习 span标签实现汉堡图标关闭

1>绘图 前情提示：伪元素是添加给某个元素的虚拟子元素。

1. 一个span实现汉堡图标。
   
   思路：
   前后伪元素作为两条横杠 父元素上边框作为一条横杠。
   中间空白使用伪元素和父类分别添加外边距和内边距。
   
   html
   <span class="justhum"></span>
   
   css

   .justhum {

   display:block;

   width: 100px;

   padding-top:10px;

   border-top: 2px solid #888;

   }

   .justhum::before, .justhum::after {

   display:block;

   content: "";

   width: 100px;

   height: 2px;

   background-color: #888;

   }

   .justhum::after {

   margin-top:10px;

   }

2. 一个span实现关闭图标。
   
   思路：伪元素的边框旋转作为箭头 通过定位把箭头拼在一起。
   
   html
   <span class="close"></span>
   css

   .close{

   margin-left:20px;

   display:block;

   position: relative;

   width:0;

   height:0;

   }

   .close::before, .close::after {

   position: absolute;

   display:inline-block;

   content: "";

   width: 10px;

   height: 10px;

   margin:2px;

   }

   .close::before{

   right:0;

   border-top:solid 2px #888;

   border-right:solid 2px #888;

   transform: rotate(45deg);

   }

   .close::after{

   left:0;

   border-top:solid 2px #888;

   border-left:solid 2px #888;

   transform: rotate(-45deg);

   }

3. 多个span 动态切换汉堡和图标。
   
   思路：三个span分别作为一个横杠垂直布局 点击的时候隐藏中间横杠 上下两个旋转交叉。
   
   html

   <div class="closengeIcon" onclick="this.classList.toggle('change')">

   <span></span>

   <span></span>

   <span></span>

   </div>
   css

   .closengeIcon{

   padding:20px;

   }

   .closengeIcon>span{

   display:block;

   width: 100px;

   height: 2px;

   background-color: #888;

   transform-origin: 50px 1px;

   margin-top:10px;

   }

   .closengeIcon.change >span{

   margin-top:0;

   }

   .closengeIcon.change span:nth-child(3){

   transform: rotate(45deg);

   }

   .closengeIcon.change span:nth-child(1){

   transform: rotate(-45deg);

   }

   .closengeIcon.change span:nth-child(2){

   opacity: 0;

   }

2>块级元素会存在边距重叠问题 行级元素不会

1. 出现情况：当父子级都设置了外边距；当两个标准块兄弟盒元素垂直布局。

2. 解决方案：
   父子级重叠：父级设置overflow:hidden.
   不要同时给兄弟父子设置外边距 考虑给一个元素添加样式满足布局需求。
   改变布局方式 新增float flex或者使用定位postion。

3>行内块级元素之间缝隙，解决方法父子设置font-size:0。