本文共 850 字，大约阅读时间需要 2 分钟。

块级元素和内联(行内)元素的默认宽高

内联元素，是从左到右排列的，当宽度不够时换行；

块级元素，是从上到下排列的，每一个元素都另起一行，单独成一行。

一、内联元素宽高的确定

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

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

二、块级元素宽高的确定

宽度： 　　1、可以自行设置width的值； 　　2、不设置宽度时的值为auto，默认宽度是父元素的宽度-自身的border-自身的margin。（例：一个div,不设宽高，在浏览器中的展示为，height为 0, width为浏览器的宽度） 　　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、内容决定宽度。

https://www.cnblogs.com/CCCLARITY/p/8270234.html

转载地址：https://blog.csdn.net/weixin_43799793/article/details/104115364 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！