今天小编跟大家讲解下有关网页布局入门教程 如何用CSS进行网页布局 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关网页布局入门教程 如何用CSS进行网页布局 的相关资料，希望小伙伴们看了有所帮助。
一、基础概念
W3C标准：由万维网联盟制定的一系列标准：包括： 结构化标准语言（HTML和XML）； 表现标准语言（CSS）； 行为标准语言（DOM和ECMAscript）。 倡导结构，样式，行为分离。
CSS中的定位机制：
1、标准文档流（Normal flow）：从上到下，从左到右，输出文档内容，由块级元素（从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。常见块级元素：div、lu、li、d、dt、p……）和行级元素(能在同一行内显示，不会改变HTML文档结构。常见行级元素：span、strong、img、input……)组成。2、浮动（Floats)：3、绝对定位（Absolute positioning）：
盒子模型：网页布局的基石，有四部分组成： 边框（border）、外边距（margin）、内边距（padding）、盒子中的内容（content）。如下图：
盒子的尺寸=边框+外边距+内边距+盒子中的内容尺寸
注：块级元素和行级元素都是盒子模型。
盒子3D模型：
常见页面布局及解决方案：
二、自动居中一列布局
关键词：标准文档流，块级元素，margin属性
自动居中一列布局需要设置margin左右值为auto，而且一定要设置宽度为一个定值。
auto会根据浏览器的宽度自动地设置两边的外边距
如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动和绝对定位属性
代码示例：
一列布局固定：
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>一列布局</title> <style> body{margin:0;padding:0;font-size:30px} div{text-align:center;font-weight:bold} .head,.main,.footer{width:960px;margin:0auto} .head{height:100px;background:#ccc} .main{height:600px;background:#FCC} .footer{height:50px;background:#9CF} </style> </head> <body> <divclass="head">head</div> <divclass="main">main</div> <divclass="footer">footer</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yilieguding.html
一列布局自适应：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>一列布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .head,.main,.footer{width:80%;margin:0auto} .head{height:100px;background:#ccc} .main{height:600px;background:#FCC} .footer{height:50px;background:#9CF} </style> </head> <body> <divclass="head">head</div> <divclass="main">main</div> <divclass="footer">footer</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yiliezishiying.html
三、横向两列布局
浮动布局：CSS中规定的第二种定位机制；能够实现横向多列布局；通过设置float属性实现。
float属性：left | right | none
特点：元素会左移，或右移，直至触碰到容器为止。
注：设置了浮动的元素，仍旧处于文档流中。当元素没用设置宽度值。若设置了浮动属性，元素的宽度随内容的变化而变化。当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指相邻后面的元素。
清除浮动的方法：
clear属性——常用clear：both;clear:left;或者clear:right；同时设置width：100%（或固定宽度）+overflow：hidden；
横向两列布局是网页布局最常见的方式之一
主要应用技能：
float属性——使纵向排列的块级元素，横向排列 margin属性——设置两列之间的间距
注：（1）当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。 （2）div块的高度一般不需要设置。
代码示例
两列居中固定
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>二列布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .left{width:20%;height:600px;background:#ccc;float:left} .right{width:80%;height:600px;background:#FCC;float:right} </style> </head> <body> <divclass="left">left</div> <divclass="right">right</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code//Blog_demo/Codes2/liangliejuzhingguding.html
两列居中自适应：**
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>二列布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .main{width:80%;height:600px;margin:0auto} .left{width:20%;height:600px;background:#ccc;float:left} .right{width:80%;height:600px;background:#FCC;float:right} </style> </head> <body> <divclass="main"> <divclass="left">left</div> <divclass="right">right</div> </div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/liangliejuzhongzishiyin.html
四、绝对定位布局
position属性：
拥有三种定位方式：1、静态定位 2、相对定位 3、绝对定位
可设置4个属性值：
static（静态定位）
relative（相对定位）——特点：相对于自身原有为止进行偏移；仍处于标准文档流中；随即拥有偏移属性和Z-index属性
absolute（绝对定位）——特点：建立以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和Z-index属性
( 1）未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置；脱离了标准文档流
（2）设置偏移量
偏移参考基准：无已定位祖先元素，以<html>为偏移参考基准 有已定位祖先元素，以距离其最近的已定位祖先元素为偏移参照基准
注：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节 fixed（固定定位）
使用absolute实现横向两列布局——常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能： relative——父元素相对定位 absolute——自适应宽度元素绝对定位 注意：固定宽度列的高度>自适应宽度的列
代码举例：
三列自适应：
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>三列布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .left{width:20%;height:600px;background:#ccc;position:absolute;left:0;top:0} .main{height:600px;margin:020%;background:#9CF} .right{height:600px;width:20%;position:absolute;top:0;right:0;background:#FCC;} </style> </head> <body> <divclass="left">left</div> <divclass="main">main</div> <divclass="right">right</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezishiyin.html
三列左右固定：
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>三列布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .left{width:240px;height:600px;background:#ccc;position:absolute;left:0;top:0} .main{height:600px;margin:0240px;background:#9CF} .right{height:600px;width:240px;position:absolute;top:0;right:0;background:#FCC;} </style> </head> <body> <divclass="left">left</div> <divclass="main">main</div> <divclass="right">right</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezuoyouguding.html
五、混合布局及结构与表现原则
混合布局01
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>混合布局01</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .head{height:100px;background:#9CF} .left{width:20%;height:600px;background:#ccc;float:left} .right{width:80%;height:600px;background:#FCC;float:right} </style> </head> <body> <divclass="head">head</div> <divclass="left">left</div> <divclass="right">right</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju01.html
混合布局02
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>混合布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .head,.main,.footer{width:960px;margin:0auto} .head{height:100px;background:#9CF} .left{width:240px;height:600px;background:#ccc;float:left} .right{width:720px;height:600px;background:#FCC;float:right} .footer{height:50px;background:#9F9;clear:both} </style> </head> <body> <divclass="head">head</div> <divclass="main"> <divclass="left">left</div> <divclass="right">right</div> </div> <divclass="footer">footer</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju02.html
混合布局03
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>混合布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .head,.main,.footer{width:960px;margin:0auto} .head{height:100px;background:#9CF} .left{width:220px;height:600px;background:#ccc;float:left} .right{width:740px;height:600px;background:#FCC;float:right} .r_sub_left{width:540px;height:600px;background:#9C3;float:left} .r_sub_right{width:200px;height:600px;background:#9FC;float:right} .footer{height:50px;background:#9F9;clear:both} </style> </head> <body> <divclass="head">head</div> <divclass="main"> <divclass="left">left</div> <divclass="right"> <divclass="r_sub_left">sub_left </div> <divclass="r_sub_right">sub_right </div> </div> </div> <divclass="footer">footer</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju03.html
混合布局04
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>混合布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .main{width:960px;margin:0auto} .head{height:100px;background:#9CF} .left{width:220px;height:600px;background:#ccc;float:left} .right{width:740px;height:600px;background:#FCC;float:right} .r_sub_left{width:540px;height:600px;background:#9C3;float:left} .r_sub_right{width:200px;height:600px;background:#9FC;float:right} .footer{height:50px;background:#9F9;clear:both} </style> </head> <body> <divclass="head">head</div> <divclass="main"> <divclass="left">left</div> <divclass="right"> <divclass="r_sub_left">sub_left </div> <divclass="r_sub_right">sub_right </div> </div> </div> <divclass="footer">footer</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju04.html
混合布局05（自适应）
XML/HTML Code复制内容到剪贴板 <html"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>混合布局</title> <style> body{margin:0;padding:0;font-size:30px;font-weight:bold} div{text-align:center;line-height:50px} .head{height:100px;background:#9CF} .left{width:20%;height:600px;background:#ccc;float:left} .main{margin:030%;height:600px;background:#9CC} .right{width:20%;height:600px;background:#FCC;float:right} .footer{height:50px;background:#9F9;clear:both} </style> </head> <body> <divclass="head">head</div> <divclass="left">left</div> <divclass="right">right</div> <divclass="main">main</div> <divclass="footer">footer</div> </body> </html>DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju05.html
在网页制作中，面对设计图，网页制作人员一般要遵循的原则是：先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和变现形式。 倡导结构，样式，行为分离。举例：网页换肤——相同HTML结构，不同CSS样式。
来源：爱蒂网
