上中下结构DIVCSS布局的方法

这篇文章主要讲解了“上中下结构DIV CSS布局的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“上中下结构DIV CSS布局的方法”吧！

十多年的达日网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整达日建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“达日网站设计”,“达日网站推广”以来，每个客户项目都认真落实执行。

一、主要思惟

岂论若干好多个高下结构或单一结构，通常主体形式凡是居中的，这个应用就必要运用css margin格式（让构造居中兼容各大涉猎器），同时通常网页都会静止宽度，也等于要运用css width设置装备摆设好每个DIV层宽度。

这里三个上中下结构的DIV盒子现实上即是同级相干，从上到下三个DIV层，只不外居中。

二、组织实例思维

1、布局要运用到技俩
margin:0 auto ：CSS布局居中从命
width 配置宽度
border边框名目为本案例便于观测而参预CSS格局，实践项目布局按照需求增减
height 配置高度 也是本案例便于察看每一个DIV层而设置的高度样式，一样平常结构结构不需求配置高度，因为通常构造假设形式几许不能注定就不设置高度。

2、具体技俩值
margin:0 auto(DIV居中违抗)
width:400px(设置宽度为400px)
border:1px solid #F00; border:1px solid #FF0; border:1px solid #00F(设置设置3个分袂为红黄蓝的边框)
height:100px;height:200px;height:100px 配置三个CSS高度值

三、实例残缺代码

CSS5完成案例测试或打造，一样平常做初始化模板基本上进行，省得照成分歧阅读器兼容不佳。这里做CSS5供应CSS5初始化模板根基上继续进行。

上中下定名离别为header、content、footer，由于结构组织，以是要养成通常大结构运用id，以是CSS定名时候抉择标识表记标帜为”#”。

1、案例对应CSS代码

#header,#content,#footer{margin:0 auto;width:400px; height:100px} /* 以上代码设置装备摆设三个共用款式 */ #header{border:1px solid #F00} #content{ border:1px solid #FF0; height:200px} #footer{border:1px solid #00F}

代码阐明：以上CSS代码第一排，代表三者共用居中、宽度、高度款式，负面三个别离设置上（header）红色边框、中（content）黄色边框、下（footer）蓝边框。

2、案例对应HTML代码