块级元素和内联元素的宽高是如何确定的

Posted ccclarity

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了块级元素和内联元素的宽高是如何确定的相关的知识,希望对你有一定的参考价值。

  在刚接触CSS的时候,每次给元素添加样式,都习惯性的写上宽是多少,高是多少,为自己挖坑无数,还暗自抱怨说CSS好烦,不过它真的是好烦,脾气很怪。

  好,言归正传。在讨论元素的宽高是如何确定的之前,我们先明确一下文档流的概念:对于内联元素,是从左到右排列的,当宽度不够时换行;对于块级元素,是从上到下排列的,每一个元素都另起一行。

  一、内联元素宽高的确定

  宽度:不受width的限制,有文字内容决定的,padding 和 margin 可以改变宽度。

  高度:不受height的限制,padding 和margin 也不能改变。可以通过line-height 和 font-size来改变。

  二、块级元素宽高的确定

  宽度:1、可以自行设置width的值;2、不设置宽度时的值为auto,默认宽度是父元素的宽度-自身的border-自身的margin。3、需要注意的是如果宽度写了100%,应该是元素内容的宽度(content)等于父元素的宽度,元素的宽度应该等于这个宽度加自身的border,会凸出来一部分。

  高度:1、可以自行设置height的值;2、默认值为0;3、由元素内部的文档流中的元素的高度的总和决定的(里面元素的height+padding+margin有合并的可能),当元素脱离文档流时,不能用于父元素高度的计算;4、当块级元素里面是文字时,文字只有一行,高度由line-height决定,文字有多行,会自动换行,但是碰到长度很长的单词时需要手动添加连字符(-)换行,有一个属性与之相关,word-breaking: break all; 超出宽度,不管单词是否结束都换行。 

  三、inline-block元素宽高的确定

  宽度:1、设置width的值,超出宽度部分的处理方式和div一样,多个inline-block元素处于一行中时和inline元素的效果一样,可以用white-space控制是否换行;2、内容决定宽度。

以上是关于块级元素和内联元素的宽高是如何确定的的主要内容,如果未能解决你的问题,请参考以下文章

09-块级元素和行内元素

CSS中的块级元素内联元素(行内元素)

css 子块级元素会继承父块级元素的宽高吗

css 子块级元素会继承父块级元素的宽高吗?

CSS内联元素可以设置宽度和高度?请解释下内联元素和块级元素的区别吧!!

BFC块格式化上下文 (Block Formatting Context)