在刚接触 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,内容决定宽度.
来源: http://www.bubuko.com/infodetail-2457709.html