百分比布局时,我们有时候会遇到高度 height 设置百分比后无效的情况,例如给div设置height=50%,往往没能看到效果。
这里我们就来说一说关于百分比布局时的一些坑~
为了方便描述,我在这里写了一个简单的例子,html结构如下:
现在我们想要得到的效果是 .son1 的宽度为整个屏幕宽度的100%,高度为整个屏幕高度的20%(html的margin,padding暂且不计)
如果我的css代码是下面这样的,我们看到底行不行:
但是,浏览器渲染得出的效果却是这样子的: lol~
现在我们来修改一下我们的 css 代码:
我们会惊奇的发现,现在得到的结果正是我们想要的:HHH~
正当我们高兴的时候,小明同学突然问道:那把外边那一层 .wrap 注释掉呢,还会一样吗?(你可以暂时别管小明是谁)
就这样,我们又回到了最初的起点,子元素的高度依然没有体现出来,得到的效果如下:
===================== 下面我们就来分析一波 ====================
其实,。。。。。
(1). 百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。
(2). 对于宽度来说,其父级元素无须确定宽度就能设置百分比; 但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height=XX%的样式!!!
(3).
- 在html中, 一个块级元素, 不给宽, 他就是浏览器的宽, 不给高, 他就是子元素的高. 所以块级元素的高是有子元素撑开的.
- 如果你非要给他百分数的高, 他就是父盒子的百分比高. 前提是他的父盒子得有高.
- 其实不建议你用百分数了. 如果非用不可, 那就从html, body开始, 都把高设置成百分之百;
css 样式如下:(div是快元素,默认宽度为屏幕的100%,所以可以省略)
这样就最终得到了我们想要的效果,如下: