[CSS]CSS浮动float详解(一):标准文档流

时间:2022-03-17 05:36:38

Web网页的制作,是一个流,必须自上而下依次进行。

标准文档流

流的比喻很形象,就像水流一样,必须从上而下,像织毛衣一样。
那么究竟什么是标准文档流呢?在web中,标准文档流有以下几个特点:

  • 高矮不齐,底边对齐

    [CSS]CSS浮动float详解(一):标准文档流

  • 自动换行
    无论字体大小有多高,图片大小有多高,底边始终对齐,而且会自动换行。

  • 空白折叠现象

    <p>我叫Feathers                                        <img src="me.png">,人生没有什么追求,只有一个 <span>学习</span>! <img src="zb.jpeg">学习让我快乐!生命在于学习!一刻不学习就浑身难受!</p>

    这串代码是上方图片中的文档的源代码,我们看到,我们无论在文档中输入多少空格或者是回车,都会被折叠为一个空格,这个现象称作空白折叠现象。

文本级标签与容器级标签

HTML将html标签分为两类,文本级容器级。规定了标签的作用,文本级标签只能存放文本,而容器级标签可以容纳其他容器,也可以容纳文本。

注意:文本不仅仅是只文字,图片、链接等都是文本。所以,img标签既不是文本级标签,也不是容器级标签!只是使用标签的形式来表示图片而已。

文本级标签有:span,p,u,i,em,strong
容器级标签有:div,h,li,dt,dd

块级元素和行内元素

CSS将html元素分为两种块级元素行内元素。通过display:inline/block给元素设置默认的样式,最主要的区别在于,块级元素占整行,而行内元素的宽度只会包裹内容。

  • 行内元素

    • 元素不能设置宽和高,
    • 不能设置宽、高。默认的宽度,就是文字的宽度。
    • 常见的行内元素有:span,u,i,em,strong

    [CSS]CSS浮动float详解(一):标准文档流

  • 块级元素

    • 霸占一行,不能与其他任何元素并列
    • 能接受宽、高
    • 如果不设置宽度,那么宽度将默认变为父容器的100%。
    • 如果不设置高度,那么高度默认为包裹内容,或者说容器内的孩子会将容器的高度撑起来
    • 常见的块级元素有:p,div,h,li,dt,dd… 注意p虽然是文本级元素,但它时块级元素。

    [CSS]CSS浮动float详解(一):标准文档流

块级元素和行内元素之间的转换

因为行内元素和块级元素之间各有各的特点,各有各的表达效果。通常,我们可能需要给span标签设置一个宽和高,给让div标签并排,此时就需要使用到元素类型转换。

我们可以通过display:block/inline设置元素的类型,从而达到我们想要的效果。