学习笔记 --css基础-流、元素与基本尺寸一
1、父元素没有设置height时,子元素height:100%无效,而width是有效的,但当子元素是绝对定位时,父元素没有设置,子元素设置为100%,是有效的。
例:父width不设置,子设置100%的结果:
最终父元素的宽度为图片展开宽度加上文字宽度,而span继承父元素100%,它的元素宽度为和父元素一致,这是因为浏览器渲染时是自上而下,自外而内的,所以渲染父元素时,子元素的100%还未生效,这时父元素就是子元素自然占用的宽度,而父元素渲染完,子元素渲染,按照父元素的宽度设置100%。
<div class="box">
<img src="1.jpg">
<span class="text">红色背景是父级</span>
</div>
.box {
display: inline-block;
white-space: nowrap;
background-color: #cd0000;
}
.text {
display: inline-block;
width: 100%;
background-color: #34538b;
color: #fff;
}
2、请看这个需求:页面某个模块的文字内容是动态的,可能是几个字,也可能是一句话。然后,希望文字少的时候居中显示,文字超过一行的时候居左显示。该如何实现?核心CSS代码如下:
.box { text-align: center; }
.content { display: inline-block; text-align: left; }
3、首选最小宽度
首选最小宽度的意思就是元素一定有一个最小宽度,即使父元素宽度设置的是width:auto,它的本身的宽度很小,但是子元素还是会展示容纳它自己的最小宽度:如
<span class="ao"></span>
<span class="tu"></span>
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
color: #fff;
}
.ao:before,
.tu:before {
outline: 2px solid #cd0000;
font-family: Consolas, Monaco, monospace;
}
.ao:before {
content: "love你love";
}
.tu {
direction: rtl;
}
.tu:before {
content: "我love你";
}
4、box-sizing:border-box,默认是content-box;border-box包括padding和border,不包括margin,元素尺寸是包括border,padding的。子元素的width:100%,继承的是父元素的content-box。前面说到父元素设置高度不设置,子元素height设置100%无效,但在绝对定位中有效,但计算规则与正常元素不一致,绝对定位的宽高百分比计算是相对于padding box的,也就是说会把padding大小值计算在内。