阅读 62

CSS学习--高度和宽度

一、文档流:文档内与元素的流动方向

文档流处在网页的最底层,它表示的是一个页面中的位置, 我们所创建的元素默认都处在文档流中

二、元素在文档流中的特点

1、内联元素

内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右。

中文换行文字会分割,英文换行单词不会分割(可加word-break强行分割)

 word-break语法
 word-break: normal|break-all|keep-all;
 normal         使用浏览器默认的换行规则。
 break-all	允许在单词内换行。
 keep-all	只能在半角空格或连字符处换行。
复制代码

在文档流中,内联元素的高度和宽度由字体的建议行高及字体设计师决定的(内联元素高度不可测)

不同字体的建议行高是不一样的

2、块级元素

块级元素在文档流中会独占一行,块元素会自上向下排列。

块级元素如果要和内联元素一样流动,可加display:inline-block;

 display 属性规定元素应该生成的框的类型。
 可取的值
 inline	        默认。此元素会被显示为内联元素,元素前后没有换行符。
 inline-block	行内块元素。(CSS2.1 新增的值)
复制代码

块级元素在文档流中默认宽度是父元素的100%。

块级元素的高度由其内部文档流元素的高度总和决定。如此时body元素的高度是0

文章分类
阅读
文章标签