DIV+CSS自适应布局_html/css_WEB-ITnose
效果图如下:高度自适应——宽度自适应
1,高度自适应布局
原理就是把每个模块设置为绝对定位,然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高,然后中间模块的高度就自适应了。代码如下:
html代码:
120px自适应120px
css代码:
.top{ width: 100%; height: 120px; position: absolute; background-color: greenyellow; }.main{ position: absolute; width: 100%; top: 120px; bottom: 120px; background-color: azure; height: auto;}.bottom{ position: absolute; bottom: 0;//别漏了 width: 100%; height: 120px; background-color:greenyellow ;}
2,宽度自适应,有三种方法,分别是用绝对定位;利用margin,中间模块先渲染;自身浮动。
a,用绝对定位来设置宽度自适应布局,原理:针对自适应模块使用绝对定位,在把left和right设置为左右两列的宽,其实原理和高度自适应一样,另外左右两列分别左右浮动。
html代码:
200px自适应200px
css代码:
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.left,.right { width: 200px; display: inline; height: 100%; background-color: greenyellow;}.left { float: left;}.right { float: right;}.main { position: absolute; left: 200px; right: 200px; height: 100%; background-color: azure; display: inline;}
b,中间一列优先渲染的自适应三列布局,优先渲染(加载)的关键:内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div,left和right模块都向左浮动,然后对自适应的div(就是父div里的子div)设置margin:0 200px,然后对left的margin-left的属性值设置为100%的负数,就是margin-left:-100%;对right的margin-left的属性值设置为自身宽度的负数,就是margin-left:-200px。
注意:自适应的div必须放在left和right前面且包含在一个父div里。
html代码:
自适应200px200px
css代码:
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.main { width: 100%; height: 100%; float: left;}.main .content { margin: 0 200px; background-color: azure; height: 100%;}.left,.right { width: 200px; height: 100%; float: left; background-color: greenyellow;}.left { margin-left: -100%; //important}.right { margin-left: -200px; //important}
c,自身浮动,原理:中间列设置margin属性,就是把左右列分别左右浮动。注意:使用这个方法布局自适应的话,必须把自适应的那一列在html中放在left和right后面。
html代码:
200px200px自适应
css代码:
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.main { margin: 0 200px; height: 100%; background-color: azure;}.left,.right { width: 200px; height: 100%; background-color: greenyellow;}.left { float: left;}.right { float: right;}
上一篇: CSS网页布局入门教程3:一列固定宽度居中_基础教程
下一篇: php检查代理ip有效性的代码