【笔记-前端】div+css排版基础，以及错误记录_html/css_WEB-ITnose

程序员文章站 2022-03-29 09:12:25

...

现在的网站对于前端的排版已经逐渐不使用，而是使用div+css。

使用这种方法的最大好处就在于在维护页面时，可以只维护css而不去改动html。

可是这种方式对于初学者来说可能不好理解，所以简单描述一下使用div+css排版基础。

下图是一个使用div+css排版的示例：

html和css：

body{font-size:20px;font-weight:bold;color:white;}

.back{background-color:gray;width:1000px;height:500px;}

.top{background-color:orange;width:500px;height:100px;margin:1% auto;}

.middle{background-color:yellow;width:500px;height:100px;margin:0 auto;}

.middle_a{background-color:red;width:30%;height:100%;margin:0 auto;float:left;}

.middle_b{background-color:green;width:38%;height:100%;margin:0 1%;float:left;}

.middle_c{background-color:blue;width:30%;height:100%;margin:0 auto;float:left;}

.bottom{background-color:purple;width:500px;height:100px;margin:1% auto;}

class="back">

class="top">TOP

class="middle">

class="middle_a">MIDDLE-A

class="middle_b">MIDDLE-B

class="middle_c">MIDDLE-C

class="bottom">BOTTOM

灰色的为背景层；

然后是处在最上方的TOP橙色块；

中间的黄色块，黄色块上又有三块不同颜色的MIDDLE块；

最下是紫色块。

排版的要素主要在于div的嵌套和css的使用。

在div的嵌套上没有太多特点。

因为TOP、MIDDLE、BOTTOM都是放置在背景中的，所以背景div中包含它们所有。

在TOP、MIDDLE、BOTTOM三个平行的div只需顺序写下即可。

因为div是块级元素，所以会自动独占一行。

而中间的middle_a、middle_b、middle_c并没有独占一行是因为在css中使用了float使其成为了浮动元素，浮动元素在他的父元素中自动排列开，排列不下会自动转到下一行。

错误1：块div和浮动div的混合使用

同时，在平行的div中，应避免块div和浮动div的混合使用，否则容易造成显示混乱。

下图为取消绿色块float:left效果后的效果。

错误2：width相加100%时，排列错误

此处我们使用了背景色区分块，但如果使用边框线区分块，则可能会遇到该问题。

middle_a、middle_b、middle_c的width值均使用百分比时，相加正好为100%时，middle中摆放不下而自动把第三块换到了下一行。

主要原因是因为边框线也有宽度，所以会因为超出边框线部分的宽度而认为

中宽度超出。

【笔记-前端】div+css排版基础，以及错误记录_html/css_WEB-ITnose

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐

独孤九贱-php全栈开发教程
全栈 170W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
玉女心经-web前端开发教程
入门 80W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门
天龙八部-实战开发教程
实战 120W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

最新文章
热门排行

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

：公益在线php培训，帮助PHP学习者快速成长！

相关标签：【笔记-前端】div+css排版基础，以及错误记录

上一篇：新手菜鸟必读:session与cookie的区别_PHP教程

下一篇： javascript基于prototype实现类似OOP继承的方法_javascript技巧