【CSS非全解02】CSS基础-文档流

基本概念

  • 文档流 mdn
  • 块、内联、内联块?
  • margin合并
  • 两种盒模型

文档流 Normal Flow

流式布局 mdn

文档流动方向

eg.

css-demo-1 with CSS animation & SCSS

内联元素占满一行,空间不够时,折行,即拦腰折断显示到下一行

块级元素就算设置了宽度不占满,也不会合成一行,即不并排,除非设置定位属性:默认情况下,每个块级元素独占一行

文档流小结

  • 流动方向
    • inline元素从左到右,到达最右边才会换行
    • block元素从上到下,每一个都会另起一行
    • inline-block也是从左到右
  • 宽度
    • inline宽度为所有内部内联元素的宽度,一般即文字宽度的和所决定,指定width无效
    • block默认自动计算宽度width:auto;,指能有多宽就占多宽,尽量得宽,并不一定是100%,可用width指定,指定了也不会换行,除非有其他非默认属性
    • inline-block结合前两者部分特点,默认宽度和inline相同,尽量得窄,紧密包裹里面的内容,但可设置width
  • 高度
    • inline高度由inline-height间接确定,跟它的height或者padding无关
    • block高度由所有内部正常文档流中的元素高度之和决定,全部包裹住,可以设height
    • inline-blockblock类似,可以设置height

这里内联/行内 | 块级 | 行盒 元素指的是 display:[inline | block | inline-block]的元素,因为HTML5标准不分块级、内联级,只分浏览器的默认属性,可以随时切换

默认<span></span>的高度是由谁决定的?

css-demo_flow with CSS animation & SCSS

  • demo里默认<span></span>既不接受宽度,也不接受高度;
  • 包裹它的<div></div>并没有被<span></span>设置的padding撑开,而<div></div>的高度由其里面的元素决定,包裹住其中的元素;
  • 加了内边距的<span></span>被撑高的只是可视高度
  • inline元素的实际高度是由行高line-height间接确定的
  • 包裹它的<div></div>被内部元素的实际高度撑开,行高会继承,写在div后也一样
  • 间接?还受到不同字体的影响,请看行盒模型深入理解CSS:字体度量...by方应杭
  • 脱离文档流元素不计算入父元素的高度, 具体看层叠上下文 mdn

属性overflow溢出

当内容content大于容器box

  • 等内容的宽度或高度大于容器的,会溢出
  • 可用overflow来设置是否显示滚动条
  • auto:灵活设置
  • scroll:永远显示,太丑,多出的像素会影响布局,不用,在cssReset里干掉
  • hidden:直接隐藏溢出部分
  • visible:直接显示溢出部分
  • overflow可以分为overflow-xoverflow-y

脱离文档流 mdn

超出的内容...

  • visible 可见
  • hidden 不给看
  • scroll 可滚(太丑 高度不超过也显示滚动条)
  • auto 超出部分,自动显示滚动条

<div></div>里面什么也没有,即高度为0px,里面没有文档流元素

<span></span>里面什么也没有时,加了border,看出高度是由line-height决定的

指定除visible(默认值)以外的值将创建一个新的 块级格式化上下文.

为使overflow有效果,块级容器必须有一个指定的高度(height或者max-height)或者将white-space设置为nowrap。

注意: 设置一个轴为visible(默认值),同时设置另一个轴为不同的值,会导致设置visible的轴的行为会变成auto。

注意: 即使将overflow设置为hidden,也可以使用JavaScript Element.scrollTop 属性来滚动HTML元素。

如果有滚动条,那么里面的元素默认只在第一屏显示,后面留空

css-demo-overflow with SCSS

让一个元素脱离文档流

回忆一下

  • block高度由内部文档流元素决定,可以设height
  • 有些元素可以不在文档流中,放飞自我

哪些元素脱离文档流
如何让一个元素脱离文档流?

内联元素的高度是由行高决定的-->确定了行高的文字内容形成文档流元素-->决定了其外部块级元素的高度-->高度撑开其外部的块级元素

现在让文字即其内联元素脱离文档流

  • 加属性float
  • 加属性position:absolute | fixed;

怎么让元素不脱离文档流

  • 不要用以上提到的属性
  • 一个元素脱离文档流,就不影响块级父元素的高度,换句话说父容器计算高度时就不把它计算在内了
  • 以后会学清除浮动,但一旦脱离文档流,就回不去了

块、内联、内联块?过时的概念

元素的默认level

内联/行内 | 块级 | 行盒 元素指的是 display:[inline | block | inline-block]的元素,因为HTML5标准不分块级、内联级,只分浏览器的默认属性,可以随时切换,块级元素与行内元素 mdn

  • 默认是block-level box的元素

  • 默认是in-line-level box的元素

  • 通过display:[inline | block | inline-block|];来随时切换

  • inline-block在文档流上很像inline,但是不会跨两行显示

Flow Layout and Overflow 流布局和溢出

块级元素设置的高度比内容矮时,内容溢出边框

margin合并(死记硬背)

两种盒模型(border-box更符合人类思维、直觉)

更符合人类思维、直觉

eg.
第三视角

CSS不是重点,面向工作学习市场上比较需要的技术才是王道,张*旭的职业发展不适大多数人,选择比努力更重要


·未完待续·


参考文章

CSS 基础概念.pdf

相关文章



推荐阅读更多精彩内容