CSS布局奇伎淫巧

作者: 前端技术  发布:2019-11-15

CSS布局奇伎淫巧:中度自适应

2016/11/03 · CSS · 自适应

原稿出处: 无双   

何为中度自适应?

可观自适应正是莫斯中国科学技术大学学能跟随浏览器窗口的尺寸改动而改换,标准的利用在黄金时代部分后台分界面中下边大器晚成栏中度牢固用作菜单栏或导航栏,下边风流倜傥栏中度自适应用于体现内容。中度自适应不像宽度自适应那样简单,在分外浏览器方面也可以有一点复杂一些。

布局思路

在IE7+及chrome、firefox等浏览器中,中度自适应能够利用相对定位来减轻。但一个因素是纯属定位时,若无给它设定高度或宽度,则它的的冲天和宽窄是由它的top、right、bottom、left属性决定的,但那后生可畏法规在IE6中并不适用,由此在IE6中还得别出新裁。在IE6中给html设定padding,并不会撑大html成分的尺码,那多亏大家要运用的地点。

在IE7+ 和 W3C浏览器中的方案

看下代码:

图片 1

再看下效果:

图片 2

在IE6中的方案

好呢,不想再对IE6调侃,只想不久消除它。

在IE6中的思路是,把html和body成分的莫斯中国科学技术大学学设定为百分百,即浏览器窗口的惊人,然后使用padding-top在html元素上挤出一些空中来,因为相对定位的参天参照物是参照html成分的,所以能够把顶栏相对定位在html的padding-top那块空间上。当时body的中度便是html的中度(也是浏览器窗口的莫斯中国科学技术大学学卡塔 尔(阿拉伯语:قطر‎减去html的padding-top的值,那也是ie6特别想拿到的二个天性,因为根据w3c盒模型来讲,增添了html成分的padding-top,则html成分的冲天也会相应加多,这时候浏览器窗口应当会忍俊不禁垂直滚动条了。但IE6不会,html的加码了padding-top后,整个html成分的莫斯中国科学技术大学学还是维持不改变,即浏览器窗口的惊人,变化的是body的可观减小了,用来平衡html的padding-top.

可能先看看代码吧:

图片 3

再看下效果:

图片 4

末尾的极其代码

XHTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>中度自适应布局</title> <style> html,body{ height:百分之百;} body,div{ margin:0; padding:0; color:#F00;} * html{ padding-top:100px;}/*for ie6*/ .top{ background:#36C; height:100px;} * html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/ .main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;} * html .main{ background:#F90; position:static; height:100%;}/*for ie6*/ </style> </head> <body> <div class="top">小编是top,固定高度</div> <div class="main">小编是main,中度随浏览器大小变化而变化<p style="height:500px;"></p></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
html,body{ height:100%;}
body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100px;}/*for ie6*/
.top{ background:#36C; height:100px;}
* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
</style>
</head>
<body>
<div class="top">我是top,固定高度</div>
<div class="main">我是main,高度随浏览器大小变化而变化<p style="height:500px;"></p></div>
</body>
</html>

效果图:

非ie6

图片 5

ie6

图片 6

推广

这种方式也适用于顶栏与底栏中度稳固,中间那栏中度自适应的三栏布局

3 赞 3 收藏 评论

图片 7

生机勃勃、自适应两栏布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自适应两栏布局</title>
<style>
body {
width: 300px;
position: relative;
}

.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
overflow:auto;
<!--当触发main生成BFC后(overflow值可为auto或然hidden,只要不是visible)那一个新的BFC不会与变化的aside重叠。由此会依照饱含块的上升的幅度,和aside的上升的幅度,自动变窄。-->
}
</style>
</head>
<body>
<div class="aside">1</div>
<div class="main">2</div>
</body>
</html>

但是,如果是两个图片,而不是两个div,那么如果对图片设置float,在绝大多数浏览器里会认为它左对齐且与相邻元素在同一行显示,所以图片2会和它在同一行内出现,而不会钻到图片1的下面。

二、消除内部浮动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>解除内部浮动</title>
<style>
.par {
border: 5px solid red;
width: 300px;
overflow:auto;<!--因为里面浮动,就退出了par,当没有加多那个规格时,par若无安装高度,就不会被撑开。为实现湮灭内部浮动,大家得以触发par生成BFC(overflow:auto可能hidden卡塔尔,那么par在寻思中度时,par内部的浮动成分child也会加入计算。-->
}
.child {
border: 5px solid green;
width:100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>

三、防止margin重叠

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>防止margin重叠</title>
<style>
p {
color:#000;
background:blue;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
.wrap{
overflow:auto;<!-- 原来五个p之间的离开为100px,即margin重叠,当大家在p外面包裹大器晚成层容器,并触发该容器生成二个BFC(overflow:auto;或许hidden卡塔尔。那么三个P便不归于同叁个BFC,就不会时有发生margin重叠了。-->
}
</style>
</head>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>

</body>
</html>

本文由金沙澳门官网送注册58发布于前端技术,转载请注明出处:CSS布局奇伎淫巧

关键词: