美文网首页
CSS基础二(高度与文档流)

CSS基础二(高度与文档流)

作者: 索伯列夫 | 来源:发表于2018-09-18 21:23 被阅读0次

问题:

  • div的高度是如何确定?
  • span的高度是如何确定?

1.预备:

文档流:指文档内元素的流动方向;

  • 内联元素从左到右,满了,就换行;
  • 块级元素,从上往下,另起一行;

示例(内联元素的特例):


image.png

对于汉字,会自动分行。要是对于很长的单词,默认就不会分行,如果想分行,需要设置:

work-break: break-all

2.第一个问题:div的高度如何确定?

显而易见,div的高度由其内部文档流元素的高度总和决定。

注意:给div指定height会引入bug,不到情非得已千万不要指定高度.
块级元素的高度由其内部元素的高度总和决定。

3.第二个问题:内联元素的高度如何确定?

比如span。

介绍:(方老师的图)

建议行高.png
字体的高度分为五部分。基线、上部、下部,还有上下空余的部分,是由字体设计决定的(比如上下两行字之间存在间隙,不能紧挨在一起)。按照这样的原则,我们就知道比如“你好与a”,实际上是基线对齐的。

span的高度是多少?

内联高度代码.png

我们在这里设置span里的字体大小为100px,我们观察下实际出来的span是多大。


span效果图.png
  • 首先可以发现汉字与字母按照我们刚说的对齐;
  • 测量b的顶端到g的低端,发现,实际上相差为100px,也就是说实际上font-size设置的是,字体的最高点到最低点的大小。
    那么span到底有多高?
    比如span里有字,span的高度是由字体建议行高以及其它因素决定的。这需要结合字体具体判断,

相关文章

  • CSS基础二(高度与文档流)

    问题: div的高度是如何确定? span的高度是如何确定? 1.预备: 文档流:指文档内元素的流动方向; 内联元...

  • CSS小技巧——高度与文档流

    在CSS里,一个元素的高度是由其内部文档流元素高度总和决定的!那么文档流是什么呢?(加border可检测) 文档流...

  • 高度与文档流

    一、div高度是由什么决定的? div高度由其内部文档流元素的高度总和决定。 二、文档流是什么? 文档流:文档流元...

  • css小技巧

    1、不要写heightdiv高度 -> 文档流内容的高度和让内容撑开外面的高度 2、(1)css垂直居中table...

  • CSS深入浅出-总结

    通过前面11篇博客,我对CSS有了一个基础的了解 控制文档流:利用好默认的宽度和高度规则 控制 z-index:堆...

  • 前端05day

    相对定位 绝对定位 固定定位 CSS高度塌陷 高度塌陷问题 在文档流中,父元素的高度默认是被子元素撑开的,也就是子...

  • 好程序员web前端培训之CSS基础知识之position

    好程序员web前端培训之CSS基础知识之position CSS定位机制 标准文档流(Normal flow) 浮...

  • css进阶专题

    CSS 学习思路宽度与高度(文档流)堆叠上下文icon 全解移动端页面(响应式)Flex 布局布局套路为什么这么多...

  • CSS学习笔记

    左右浮动布局 清除浮动模板,给float元素的父元素添加。 文档流 元素的高度与宽度由内部文档流高度和宽的总和决定...

  • CSS 中的浮动

    浮动的定义: 元素脱离文档流 举栗子: 修改 CSS 代码,清除浮动: 浮动的影响: 父元素高度塌陷 清除浮动: ...

网友评论

      本文标题:CSS基础二(高度与文档流)

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