要弄清楚height,width,先要明白指定元素是行内还是块级。
两者的特性:
包含块简单理解为父元素(不完全是,比如绝对定位的包含块是层级最接近的相对定位)
1、内外盒子
每个元素都是分为两层,
inline-block外层是inline故宽度随内容且不换行,内层是block故可以设置height,
同理block => block-block ; inline => inline-inline
2、width:auto
该属性是元素默认宽度,且体现在元素盒子的特性上,块级元素随包含块填满(width:100%),行内以内容的宽度为准
3、元素包裹性和自适应性对width的影响
包裹性:包含块确定width,指定元素的内容在大于包含块的width时会自动换行,不超出(指定元素设置width大于包含块时是会超出的)
自适性:包含块不确定width,width随子元素width改变
应用:利用包裹性实现字数少时居中,字数多时靠左
4、包含块height,width为auto时指定元素设置100%的差异
包含块heigth为auto,指定元素百分比不可获得,由于包含块height:auto随指定元素height改变,指定元素height根据包含块height*百分比,故不能实现
包含块width为auto,指定元素百分比可以获得,这里有一个机制影响,在渲染包含块时不在意指定元素的width而在意指定元素中的内容,却能算出确切的值,指定元素能计算出百分比
<!-- 百分比计算问题 -->
<div class="f_box">
<span class="box_a">我是A元素</span>
<span class="box_b">我是B元素我是B元素</span>
</div>
<style>
.f_box {
display: inline-block;
height: 100px;
background: blue;
white-space: nowrap;
}
.box_a {
width: 50%;
background: red;
display: inline-block;
}
.box_b {
width: 50%;
background: green;
display: inline-block;
}
</style>
5、height:100%在绝对定位元素和非绝对定位元素表现的不同点
绝对定位元素:content-height + padding-height
非绝对定位元素:content-height