美文网首页
两栏布局,两大经典bug

两栏布局,两大经典bug

作者: 徐嘉迪 | 来源:发表于2022-03-13 11:55 被阅读0次

    1.div页面居中: 定位+left top 50%+margin-left margin-top 负的div宽高

    2.两栏布局:

    右边绝对定位脱离文档流,左边就上去了,再利用据右边距离来调节定位元素的位置,在把下面排到上面的把定位元素的宽空出来

    3.margin塌陷  加入了css

    垂直方向父子元素margin取最大的一个margin-top作为他俩的margin-top值

    第一种解决方案:给父元素加一个边框,子元素就能相对于父元素来进行margin-top了

    效果如下:

    margin塌陷  只能说是弥补,但解决不了,根据需求选择

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

    css把每一个元素都当成一个盒子,每个盒子都有自己的渲染规则,根据你写的代码能绘制出来

    bfc语法能改变个别盒子的渲染规则,遵循另一套渲染规则,只改变一丁点  解决了margin塌陷 

    如何触发盒子的bfc:让父级变成bfc,内部采用bfc语法

    position :absolute

    display:inline-block

    float:left/right

    overflow:hidden

    4.margin合并    加入了html 和css  一般不解决

    区域不能共用

    兄弟元素垂直方向上margin合并  解决办法将兄弟两个其中一个或者是全部放在一个具有bfc语法的盒子里面

    5.模型

    盒模型    层模型  浮动模型

    浮动元素产生了浮动流

    所有产生了浮动流的元素,块级元素看不到,

    产生了bfc的元素和文本类属性(带inline属性的)的元素以及文本都能看到浮动元素

    p逻辑上在就行,可以没有高度

    css选择器

    伪元素是行级元素

    能清除浮动的必须是块级元素 

    清除浮动要把父级元素变成bfc语法的元素

    行内块元素宽高由内容决定

    去掉ul里面li的小圆点

    #424242标准的黑色

      font-family:    arial标准字体

    每次用完浮动就要清除一下:

    相关文章

      网友评论

          本文标题:两栏布局,两大经典bug

          本文链接:https://www.haomeiwen.com/subject/uhmrdrtx.html