css div教程（div+css如何布局方块，如图，求一份简单明了的教程来总结display,float,position,clear的用法）

本文目录

• div+css如何布局方块，如图，求一份简单明了的教程来总结display,float,position,clear的用法
• 如何系统的学习css配合div

div+css如何布局方块，如图，求一份简单明了的教程来总结display,float,position,clear的用法

可以教你一个不算最好，但是最简单的办法，首先你既然已经确认了布局，但是不知道怎么用css写出来，那么你可以想想一下这就是一些框，小框只能放进大框里面。那么整个布局最外面的是一个无颜色的大框《div style=“width: 200px; height: 300px;“》.....《/div》而在这个大框里面又有6个100x100的小框《div style=“width: 100px; height: 100px“》.....《/div》以此类推，先做好外层的大框，然后在里面放进小框，你只要计算好每个框的大小就能够很轻松的弄出你想要的布局。至于中间的间距我想应该很轻松吧。用的是div的话display一般是用不到的，div用到display一般是用来隐藏或者显示。而position对与你当前的布局也用不到，那是用来定位用的，可以理解为让div脱离其他布局的影响独立出来，所以可能会盖住你原来的布局。float是用在同一层级的排版，比如最外面大框框住的六个小框属于同一层级，但是不同框里面的div是不属于同一层级的，只有同一div里面的同层级div才会在float的影响下对齐排列。所以其实你按照我上面说的计算好宽高的话，float也是可以用不到的。clear也是可以不用。相信你多写一些css以后会理解这些东西的用法的。
《div style=“width: 200px; height: 300px;“》
《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px; background:red;“》《/div》
《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;“》
《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;“》《/div》
《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;“》《/div》
《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;“》《/div》

《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px ; background:yellow;“》《/div》
《/div》
《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;background:orange;“》《/div》
《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px; background:green;“》《/div》
《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;“》
....
《/div》
《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;“》
....
《/div》
《/div》

如何系统的学习css配合div

你会不会HTML？不会要先看懂HTML代码。
如果你是写程序的HTML代码应该很容易懂的吧。

如果你会HTML代码，那么你只要理解了DIV的盒子模型，可以从简单的布局开始做，CSS是在练习中才能学到东西。多写就是了。

最难的是模块布局，浮动，浏览器兼容这些问题。当然，接触到大项目的时候，要考虑的是代码的精简，CSS的重用效率及易读性。
归结到最后是思路的高低决定写的程序的好与不好。

你的那张图中的效果，如果不用圆角的效果，是很简单的，首先分成两个部分
大块就是一个DIV背景为绿底色：
《div style=“background-color:#D6EFCE;“》《/div》
然后在这个DIV里分成两个部分，一个是“回答”这一行，一个是白底的问题内容部分：

《div style=“background-color:#D6EFCE;width:300px;“》
《div style=“width:300px;height:20px;“》《/div》《!--回答--》
《div style=“width:300px;height:100px;background-color:#fff;“》《/div》《!--白底区块--》
《/div》

然后定义其模块中的其它元素：
《div style=“background-color:#D6EFCE;width:300px;border:1px solid #ccc;“》
《div style=“width:300px;height:20px;“》《b》回答《/b》 共1条《/div》《!--回答--》
《div style=“width:300px;height:100px;background-color:#fff;margin:2px;“》
《p》问题内容《/p》
《p》提问者 相关信息《/p》
《p》采纳按钮《/p》
《/div》《!--白底区块--》
《/div》
基本的形式就出来了

接下来将CSS整理出来与DIV模块进行分离，如下代码:

-------------此行不算------------------
《style type=“text/css“》

/* BODY区定义 */
body{
margin:20px; /* 定义外边距 */
padding:0; /* 定义内边距 */
}

/* 大模块 */
.all {
background-color:#D6EFCE; /* 定义背景色 */
width:300px; /* 宽度300px */
border:1px solid #cccccc; /* 表示边框为1PX 实线 #cccccc色 */
padding:2px; /* 定义DIV的内边距margin值 */
}

/* 问题 */
.wengti {
height:20px; /* 定义高度 */
line-height:28px; /* 定义文字行高 */
margin-left:10px; /* 定义左外边距 */
}

/* 白底内容区 */
.neirong {
height:100px; /* 定义高度 */
background-color:#ffffff; /* 定义背景色白色 */
margin:2px; /* 定义DIV外边距margin值 */
}

/* 白底内容区P标签属性 */
.neirong p {
margin-left:10px; /* 定义左外边距 */
margin-right:10px; /* 定义左外边距 */
}

《/style》
《div class=“all“》
《div class=“wengti“》《b》回答《/b》 共1条《/div》《!--回答--》
《div class=“neirong“》
《p》问题内容《/p》
《p》提问者 相关信息《/p》
《p》采纳按钮《/p》
《/div》《!--白底区块--》
《/div》
---------此行不算------------

可以将以上代码保存为.htm格式的网页文件看效果
或者在这个页