如何正确使用width height 进行合理布局
2014-09-20 20:47
330 查看
两个问题引题
1）width，height设置为百分比
2）max-width , max-height 到底是什么意思
0、max-width，max-height 一帮情况使用在图形元素当中，原因是怕图片超出了父容器的大小，那么控制图片最大就是这个值，超过了则按这个值显示，如果没有超过则按 width height进行布局。
1、针对所有HTML元素都具有width 与 height ，而且 HTML标签属性与CSS属性在width和height中都是同样的作用。
2、关于width使用百分比问题，width 与 height都是指在父容器的width 与 height 基础上计算宽与高，虽然用百分数，但不是真正意义上的占有多少，父容器的width与height只是一个计算的参考值，虽然子元素被父元素包含，但是在宽度与高度计算上没有包含关系。另外，width height可以设置200%就不足为奇了，以父元素为基础计算宽高而已了。
3、虽然说盒子模型中有margin border padding ， 但是，如果我们使用百分比，你就会发现无论是margin还是padding他们都是以父容器的宽度为基础值计算的，然而没有与高度扯上关系，那么padding-top，padding-bottom，margin-top，margin-bottom都是按父容器的宽度来计算的，高度已经不在计算范围内。然而，border是不能使用百分比的，可以试试，绝对无效。这些给我们一个启发： 实际开发过程中对于width我们一般采用百分比进行屏幕适应，但不会对高度进行百分比控制。一般容器的高度都是让他自适应的，然而调整相邻容器间的距离则是采用margin
或 padding ，采用这两个我们也是使用绝对像素为单位进行调整，换句话说，调整间隙一般都是固定的。当然对于一些要求固定高的组件我们的确是用绝对像素单位进行确定，但是对于容器的大小是自适应最好的。采用margin是为了没有背景色，采用padding是为了填充背景色。
总结起来：
1）所有宽度采用百分比
2）容器高度，自适应
3）具体组件高度采用em px 确定
4）调整容器间隙采用 padding margin border 都只用em px
5）特殊固定位置的采用 js动态控制而对于那些要有固定位置的，自然我们采用的是js动态控制，
犹如：某些时候我们想要把公司信息放在浏览器底部，但是前面公司要展现的内容我们是不确定的，所以需要动态获取高度来确定后面元素的位置。如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>div三列布局及div始终定位浏览器底部</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
position:relative;
top: 30px;
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top: 30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#divContent {
position:relative;
width:100%;
}
#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
.divBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:relative;
width:100%;
margin-top:20px;
}
.divShortBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:absolute;
bottom:0;
width:100%;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function sameHeight() {
var documentBodyHeight;
if((typeof windows)!='undefined') {
//Non-IE
alert('Non-IE');
documentBodyHeight = windows.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
alert('IE 6+');
documentBodyHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
alert('IE 4');
documentBodyHeight = document.body.clientHeight;
}
//alert(documentBodyHeight);
if (document.getElementById('left').clientHeight >documentBodyHeight)
{ //alert('ok');
document.getElementById('divContent').style.height =document.getElementById('left').clientHeight +document.getElementById('left').offsetTop+ "px";
document.getElementById('divBottom').className = 'divBottom';
} else {
//alert('not ok');
document.getElementById('divBottom').className = 'divShortBottom';
}
}
</SCRIPT>
</head>
<body onload="sameHeight()">
<div id="header">
<p>The Header</p>
</div>
<div id="divContent">
<div id="left">
<p>The Body Left</p>
</div>
<div>
<p>The body Center</p>
</div>
<div id="right">
<p>The body Right</p>
</div>
</div>
<div id="divBottom">The Bottom</div>
</body>
</html>
1）width，height设置为百分比
2）max-width , max-height 到底是什么意思
0、max-width，max-height 一帮情况使用在图形元素当中，原因是怕图片超出了父容器的大小，那么控制图片最大就是这个值，超过了则按这个值显示，如果没有超过则按 width height进行布局。
1、针对所有HTML元素都具有width 与 height ，而且 HTML标签属性与CSS属性在width和height中都是同样的作用。
2、关于width使用百分比问题，width 与 height都是指在父容器的width 与 height 基础上计算宽与高，虽然用百分数，但不是真正意义上的占有多少，父容器的width与height只是一个计算的参考值，虽然子元素被父元素包含，但是在宽度与高度计算上没有包含关系。另外，width height可以设置200%就不足为奇了，以父元素为基础计算宽高而已了。
3、虽然说盒子模型中有margin border padding ， 但是，如果我们使用百分比，你就会发现无论是margin还是padding他们都是以父容器的宽度为基础值计算的，然而没有与高度扯上关系，那么padding-top，padding-bottom，margin-top，margin-bottom都是按父容器的宽度来计算的，高度已经不在计算范围内。然而，border是不能使用百分比的，可以试试，绝对无效。这些给我们一个启发： 实际开发过程中对于width我们一般采用百分比进行屏幕适应，但不会对高度进行百分比控制。一般容器的高度都是让他自适应的，然而调整相邻容器间的距离则是采用margin
或 padding ，采用这两个我们也是使用绝对像素为单位进行调整，换句话说，调整间隙一般都是固定的。当然对于一些要求固定高的组件我们的确是用绝对像素单位进行确定，但是对于容器的大小是自适应最好的。采用margin是为了没有背景色，采用padding是为了填充背景色。
总结起来：
1）所有宽度采用百分比
2）容器高度，自适应
3）具体组件高度采用em px 确定
4）调整容器间隙采用 padding margin border 都只用em px
5）特殊固定位置的采用 js动态控制而对于那些要有固定位置的，自然我们采用的是js动态控制，
犹如：某些时候我们想要把公司信息放在浏览器底部，但是前面公司要展现的内容我们是不确定的，所以需要动态获取高度来确定后面元素的位置。如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>div三列布局及div始终定位浏览器底部</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
position:relative;
top: 30px;
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top: 30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#divContent {
position:relative;
width:100%;
}
#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
.divBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:relative;
width:100%;
margin-top:20px;
}
.divShortBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:absolute;
bottom:0;
width:100%;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function sameHeight() {
var documentBodyHeight;
if((typeof windows)!='undefined') {
//Non-IE
alert('Non-IE');
documentBodyHeight = windows.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
alert('IE 6+');
documentBodyHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
alert('IE 4');
documentBodyHeight = document.body.clientHeight;
}
//alert(documentBodyHeight);
if (document.getElementById('left').clientHeight >documentBodyHeight)
{ //alert('ok');
document.getElementById('divContent').style.height =document.getElementById('left').clientHeight +document.getElementById('left').offsetTop+ "px";
document.getElementById('divBottom').className = 'divBottom';
} else {
//alert('not ok');
document.getElementById('divBottom').className = 'divShortBottom';
}
}
</SCRIPT>
</head>
<body onload="sameHeight()">
<div id="header">
<p>The Header</p>
</div>
<div id="divContent">
<div id="left">
<p>The Body Left</p>
</div>
<div>
<p>The body Center</p>
</div>
<div id="right">
<p>The body Right</p>
</div>
</div>
<div id="divBottom">The Bottom</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用PS切片工具进行切片生成div布局的页面的方法以及如何确定图片中某个点在图片中的位置
- Android 如何使用layoutopt检验布局文件是否合理
- Elasticsearch：如何使用正确的姿势进行搜索
- 技术文章 | 如何对网站关键词进行合理布局？
- DIV布局如何正确的使用 id 和 class
- 如何使用AutoLayout对两个以及两个以上的平行或者相互依赖的view进行布局
- xib中使用Autolayout进行布局，在代码里面如何进行修改布局
- 如何在viewDidAppear之前使用view的frame正确布局
- 【Python环境】如何使用正确的姿势进行高效Python函数式编程？
- 【layoutopt】Android 如何使用layoutopt检验布局文件是否合理
- DIV布局如何正确的使用 id 和 class
- 如何正确使用javascript 来进行我们的程序开发
- BeJavaGod - 如何正确使用数据字典进行分类统一操作（一）
- 如何在日语键盘布局上使用正确的按键顺序
- DDD 领域驱动设计－Value Object（值对象）如何使用 EF 进行正确映射
- [生产库实战] 如何合理的使用logmnr进行日志挖掘，并对生产库影响最小化
- 如何正确使用SendMessage进行发送消息
- 如何正确使用Toast进行用户提醒
- BeJavaGod - 如何正确使用数据字典进行分类统一操作（一）
- 如何使用CSS进行网页布局（HTML/CSS）