zoukankan      html  css  js  c++  java
  • 网站布局——文档流

    一、什么是文档流?
    将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流。

    这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成了文档流。

    二、什么是脱离文档流?
    元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

    三、怎么脱离文档流?

    文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

    网站文档流分三种:

    1.标准流

    2.浮动

    3.定位

    1.标准文档流组成:

              块级元素(block):       <h1>…<h6>、<p>、<div>、列表

             内联元素(inline):        <span>、<a>、<img/>、<strong>...

    注意:内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。

    <例如:h1中可以嵌套span元素,但是span中不能嵌套h1元素>

    displa属性

    说明

    block

    块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符

    inline

    内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符

    inline-block

    行内块元素,元素既具有内联元素的特性,也具有块元素的特性

    none

    设置元素不会被显示

    float属性

        可以使用什么属性使块元素排在一行?   1.inline-block           2.float

                      

    设置浮动以后依次浮动之后会跟在前面浮动的元素后面,并且浮动以后层级提高,后面的元素会排上去,浮动元素有可能会盖在未浮动元素的上面。

  • 相关阅读:
    linux的ls命令输出结果的逐条解释
    dubbo用途介绍
    dubbo有什么作用
    来自19岁女孩和软件开发人员的建议
    C++的反思[转]
    mysql各种引擎对比、实战
    俗话:MySQL索引
    Mysql 30条军规
    MySQL事务原理&实战【官方精译】
    php-msf 源码解读【转】
  • 原文地址:https://www.cnblogs.com/jing-tian/p/11013870.html
Copyright © 2011-2022 走看看