Apeller

导航

论布局,bfc,margin塌陷和合并,经典bug

         margin塌陷 加css 别改结构,把父级变bfc

    margin合并就是两个兄弟 垂直之间的margin是合并的,把最上面的兄弟多加像素即可,不要改结构

 

 

      ※    浮动元素产生了浮动流,块级元素看不到它们(所以两个盒子,会处在同一行)产生了bfc的元素和文本类元素以及文本都能看到浮动元素

 

         BFC是block format context   

 

      ※    正常规则里CSS认为把HTML每个元素都当一个盒子,而且进一步的认为每个盒子里都有一套一模一样的语法渲染规则,所以我们可以

        通过一些手段让特殊的盒子里渲染规则发生改变   

 

 

       : position  /   float  /  display:inline-block;  /  overflow:hidden;

 

           根据开发需求选择相应的需要

 


 

                  在学习过程中,怎样灵活的发挥其实对于中国学生来说并不容易,我们都习惯了固定的思维模式,

                  受从小教育的影响,导致大学生很多是作业或者其它everthing 是一样的标准,

                  难道培养人才的模式是一样的吗?为的是把我们变成一样的人吗?答案,is wrong

布局

      table(表格)布局-->float(浮动)布局-->position(定位)布局-->flex(弹性)布局-->grid(网格)布局(还未正式推出)

       float以成过去式了,但为了纪念,还是先聊聊这个问题,margin塌陷问题

      :刚开始float并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题,为的实现图片和文本环绕效果

      如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;就是父包不住

      怎么解决,用伪元素, content=""; clear:both; display:block;  伪元素天生是行级元素  能清除浮动的是块级元素  所以加 display:block;

       position 和 float  打系统内部变成行级块元素

    

网页元素一般分为: 普通流,浮动流,定位流。

网页模型分为:        盒模型 层模型 浮动模型

      

  


      

     参看: https://www.jianshu.com/p/795d070e62f5

     参看:https://www.bilibili.com/video/av35978534/?p=6 渡一成哥

posted on 2019-10-30 15:06  Apeller  阅读(192)  评论(0编辑  收藏  举报