网页使用div+css排版的一些小技巧

现在网站技术已经非常成熟了，基本上90%的网页已经完全抛弃了table排版布局，但一些新手使用div+css还可能存在这样那样的问题，我们以下介绍一些div+css的使用小方法。

第一：网页版块水平居中
css中使用*{padding:0px;margin:0px;｝定义整体居中，然后在标签的属性中使用 style="margin:auto;"。

第二：内容居中：设置标签的style属性，text-align:left内容靠左对齐，text-align:right右对齐，text-align:center居中对齐。

第三：设置边框需要注意
一般在设置一个区域块四边线为1时，如果你的div块宽度设置的是500,那你加上border: 1px solid #CBDDE1;这个宽度以后会根据浏览器不同而出现两种情况，一种是还是500，另一种是502，这样的话就可能造成你的总体宽度不够导致版块错位，这也是一些网页经常会在不同浏览器显示的效果不同的原因，正确的做法是做一个div宽度设置成500,然后在其中嵌套一个div，把这个加上加上border: 1px solid #CBDDE1;，代码如下：

【div style="width:500px;border: 1px solid #CBDDE1;"】 内容  【/div】
改成
【div style="width:500px;"】

【div style="border: 1px solid #CBDDE1;"】
 内容区
【/div】

【/div】

注：复制测试的时候请把【】换成<和>

第四：div使用float:left浮动属性会出现他的父div内容块大小不会自动改变，这种情况只要在使用float以后加上clear:both就可以解决。

第五：单行内容在div垂直居中，设置一个div高度为50,那只需要再设置一个行高50就可以，例： style="height:50px; line-height:50px;"

第六：设置整体的布局浮动块的时候不同浏览器也有可能会造成错位，一般在网页上需要划分左右列的时候可以在使用float:left属性中加上display:inline;。

.......

一般使用div+css排版的时候会出现各种问题，只要制作人员心平去和的去思考总会解决的，有解决不了的可以联系我们技术人员寻求帮助。

网站标题：网页使用div+css排版的一些小技巧
本文链接：https://www.cdcxhl.com/news/115235.html

成都网站建设公司_创新互联，为您提供电子商务、企业建站、动态网站、网站改版、网站收录、定制网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联