文档章节

CSS 基础之如何正确使用width height 布局

learn_more
 learn_more
发布于 2014/09/20 20:28
字数 1065
阅读 70
收藏 1

图片大小的控制与百分比

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>

© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
前端学习书籍

前端学习书籍 Css 1、CSS时尚编程百例 【内容介绍】 CSS时尚编程百例》超级不错的一本学习CSS的书籍,全部以实例为主讲解如何使用CSS语法、滤镜、高级功能等,百例主要包括最常用的CSS菜单特...

MyDear宸
2017/05/11
0
0
Vue学习曲线

vue如今已是前端最火热的框架技术之一了,如何从0到掌握vue技术,在此介绍一下学习曲线和途径。 前端入门 以下是前端基础语言推荐的学习链接(过完一片后可以作为参考手册使用) html css js 另...

iceuncle
2017/11/28
0
0
CSS 终极之战:Grid VS Flexbox

简评:近些年 CSS Flexbox 在前端开发者中变得非常流行。其实并不奇怪,它能让我们更容易创建出动态布局,以及在容器中对其内容。然而城里新来了个小伙叫 CSS Grid,它有许多弹性盒的能力,有...

极小光
2017/12/14
0
0
CSS 布局:40个教程、技巧、例子和最佳实践

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www....

望志东
2012/05/03
244
0
CSS 布局:40个教程、技巧、例子和最佳实践

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www....

aoniao
2012/03/19
12.8K
7

没有更多内容

加载失败,请刷新页面

加载更多

Java中垃圾回收的方法有哪些?

引数计数法 应用于:微软的COM/ActionScrip3/Python等 对象没有被引用就会被回收,缺点是需要维护一个引用计算器 复制算法 年轻代中使用的Minor GC。 a.效率高,缺点:需要内存容量大,比较耗...

DustinChan
36分钟前
4
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
38分钟前
6
0
初识Java

Java语言的优势: 1、跨平台(所谓跨平台性,是指java语言编写的程序,一次编译后,可以在多个系统平台上运行。主要是由jvm所决定) 2.、面向对象(用老师的一句话“一切皆对象”后面会用详细...

Carina_猪
昨天
5
0
Java描述设计模式(09):装饰模式

本文源码:GitHub·点这里 || GitEE·点这里 一、生活场景 1、场景描述 孙悟空有七十二般变化,他的每一种变化都给他带来一种附加的本领。他变成鱼儿时,就可以到水里游泳;他变成鸟儿时,就...

知了一笑
昨天
4
0
聊聊nacos的HttpHealthCheckProcessor

序 本文主要研究一下nacos的HttpHealthCheckProcessor HealthCheckProcessor nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/healthcheck/HealthCheckProcessor.java public in......

go4it
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部