美文网首页
浮动和标准流

浮动和标准流

作者: 5a4982b9b5fe | 来源:发表于2016-11-20 16:21 被阅读0次

    1.设计稿

    清空所有的边距

    从外向内,从上面到下

    2.网页布局方式

    1)标准流排版方式

    【1】浏览器默认的方式

    【2】块级元素,行内元素,行内块级元素

    【3】水平排版

    垂直排版 ,如果元素为块级元素,垂直排版

    水平排版,如果元素为行内元素/行内块级元素

    2)浮动流的排版方式

    【1】和父类的最左边和最右边对齐使用float

    【2】浮动流是半脱离标准流的排版方式

    【3】只有一个水平排版,只有左右,没有中间

    不可以使用margin:0 auto;

    【4】在浮动流中不区分块级元素,行内元素,和行内块级元素

    【5】在浮动流中无论是块级元素,行内元素,和行内块级元素都可以设置宽高,和标准流中的行内块级元素一样

    【6】浮动元素的脱标

    脱标:脱离标准流,当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标

    脱标之后的影响:如果前面一个元素浮动了,后面一个元素没有浮动,那么这个时候前面的一个元素会覆盖后面一个

    【7】浮动元素的排序规则

    1)相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面

    样式 显示

    2)不同方向上的浮动元素,左浮动会找左浮动

    3)浮动元素浮动之后的位置,由浮动元素之前在标准流中的位置来确定

    样式 显示 若box4也是左浮动,显示为上面的

    【8】浮动元素贴靠现象

    当父元素的不可以放的下的时候,将最后一个浮动元素往前贴靠,以此往前找浮动元素

    排版

    浮动元素不会覆盖没浮动元素的内容,自围现象

    样式显示 代码

    【9】在企业开发中,水平方向上多用浮动流来布局,垂直方向按照标准流来布局

    【10】浮动元素的高度问题

    1.在标准流中内容的高度可以撑起父类元素的高度

    2.浮动流中浮动的元素是不可以撑起父元素的高度的

    相关文章

      网友评论

          本文标题:浮动和标准流

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