CSS布局宽高自适应 求代码怎么写

html-css06

CSS布局宽高自适应 求代码怎么写,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>CSS布局：自适应高度的CSS布局-懒人图库</title>

<STYLE type="text/css">

*{margin:0padding:0}

html, body{height:100%text-align:centerfont:12px/1.4 Verdana,sans-serif}

#wrapper{width:1160pxmin-height:100%background: #EEEmargin: autotext-align:center}

*html #wrapper{height:100%}

</STYLE>

</head>

<body>

<DIV id="wrapper">

<br /><br />

<h1>CSS布局：自适应高度的CSS布局</h1>

<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p><br />

<script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script>

</DIV>

</body>

</html>

是通过百分比来控制宽度；

width:100%通过百分比自适应宽度。注意；此百分比是相对于父级元素宽度。父级元素宽度1000px；子元素设置百分比；是父级元素的百分比；

2.可以通过块状元素自动占满父级的宽度的特性来实现

div默认display:block；不对div设置宽度。div默认占满父级元素的宽度。

3.flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。