wangjie-fourth 的个人博客

记录精彩的程序人生

目录
CSS02 - 文档流
/    

CSS02 - 文档流

文档流(Normal Flow)是在没有改变默认布局规则情况下的页面元素默认的布局方式。文档流得流动方式分为3种:

  • inline:【内联元素】:元素从左到右,元素可在分开显示;
  • block:【块级元素】:元素从上到下,每一个元素都占一行;
  • inline-block:【内联块元素】:元素从左到右,元素不可以分开显示;

image.png
注意:
1、标签是不分为内级元素、块级元素、内联块级元素。
只是有的标签默认样式是内级元素、块级元素、内联块级元素。比如说:sapn默认是内级元素;div默认是块级元素。我们可以通过样式来改变这三个元素文档流方向。所以说,标签不应该按照这三个流方向分类。因为我们可以随时改变他
2、通过display来指定便签得文档流

.class{
    display: inline; /* block、inline-block */  
}

三种文档流得宽度计算

1、inline宽度

  • inline宽度是内部所有元素内容之和;
  • 它不能使用width来指定宽度;

注意:inline元素里面不要放block元素,一般没有这种用法,因为很丑。

2、block宽度

  • block默认计算宽度,也就是说它得css代码就是width:auth;,而不是width:100%
  • 它可用width指定

那么width:100%width:auto的区别是什么呢?

3、inline-block宽度

  • inline-block宽度默认是内部所有元素内容之和;
  • 他可以通过width来指定元素得宽度;

三种文档流得高度计算

1、inline高度
inline高度由line-height间接确定,跟height无关。

line-height是用来指定标签中文字得高度

(1)关于内联元素高度的理解
image.png
这里看起来使用padding将内敛元素高度给撑高了,但是并没有将内敛元素的实际高度加大。注意这一点。
(2)这里间接是指当指定行高后,不一定会生效
image.png
参考:https://zhuanlan.zhihu.com/p/25808995

2、block高度
block高度由内部文档流元素决定,可以设height

如果里面有脱离文档流的元素,就不会参与这个高度;

3、inline-block高度
inline-block高度由内部文档流元素决定,可以设height

overflow溢出

溢出是指当内容的宽度或高度大于容器的高度和宽度时,发生的现象。
image.png
可以使用overflow来设置是否显示滚动条,overflow可以分为overflow-xoverflow-y部分。

  • auto:灵活设置;没有溢出,不显示滚动条;有溢出,显示滚动条;
  • scroll:永远显示;
  • hidden:直接隐藏溢出部分;
  • visible:直接显示溢出部分;

脱离文档流

CSS可以设置某些元素脱离文档流,这样就使得这些元素不在这个文档流中。哪些元素可以脱离文档流:

  • float
  • position:absolute / fixed

宽度不要写成100%

评论