css+div布局 div和css的浮动效果
大家好,今天小编来为大家解答以下的问题，关于css+div布局，div和css的浮动效果这个很多人还不知道，现在让我们一起来看看吧！
什么是div+ css布局
1、能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，避免了使用table表格修改部分页面。
2、提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
3、有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
4、浏览器兼容性。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。
5、需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。
DIV+CSS布局的优点
1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
3、搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
DIV+CSS布局常用的属性
用过DIV+CSS的人都知道，虽然这种布局没有用传统的table直观，但用习惯了就会感觉出DIV+CSS的优越。对于seo优化，div+css也有了明显的优势，实际应用中我搜索了DIV+CSS的常用定义项，并对其参数作了归纳和说明，与喜欢DIV+CSS的朋友共享。通用类
overflow:hidden;自动隐藏超出的内容，防止撑开层和表格的范围
!important
指定样式规则的应用优先权：
文字类
color:#FF0000;文字颜色
font-family:"Arial","Helvetica","sans-serif";字体
font-size: 9px;字号
text-align：center;居中(left为居左,right为居右)
line-height：28px；行高(可用150%值)
font-style: italic;斜体(oblique偏斜体)
font-weight: bold;服务粗体(bolder特粗，400粗值)
font-variant: small-caps;小型大写字母
text-transform: capitalize;首字母大写
text-decoration: underline overline line-through blink;下划线，上划线，删除线，闪烁
text-indent: 2em;文字缩进2个字体高(或15px,即15象素)
背景类
background-attachment: fixed;固定位置(scroll滚动)
background:#0066CC;背景色(transparent透明)
background: url(/image/more2.gif);背景图片
background-repeat: repeat;重复(repeat-x横向重复，repeat-y纵向重复)
background-position: center top;水平居中垂直顶部(left center水平居左垂直居中)
background：url(/image/dtbg.gif)#FEFEFE no-repeat right bottom(2px 5px);背景图片、背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)
框架位置类
clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)
float: left;浮动对象位置居左(right,最新列车时刻表位置居右)
position：relative;相对位置，一般在上级框架中设定极品时刻表
position：absolute;绝对位置，配合上级框架的设定对本级框架设定，设置top、left值
top：5px;页面绝对或相对于框架顶端绝对位置
left：10px;页面绝对或相对于框架左边绝对位置
width: 100px;宽100px
height: 200px;高200px(可用auto和100%值)
margin上海火车时刻表：10px 20px 10px 20px；
上右下左页边距(值相同可省写margin:10px)
单独指定用margin-top：10px;(margin-right、margin-bottom、margin-left)
padding：20px 10px 10px 20p；
上右下左内容离边框的距离(值相同可省写padding:10px)
单独指定用padding-top：10px;(padding-right、padding-bottompadding-left)
border：#ccc 1px solid成都列车时刻表；
四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)
单独指定用border-top：#ccc 1px solid；border-right：#ccc 1px solid
等等
项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块)
扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转)
单独设置链接
#bottool a:link{color:#fff};未访问的颜色
#bottool a:visited{color:#fff};已访问的颜色流量软件
#bottool a:hover{color:#ff0};鼠标在链接上
这么多定义项,其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位；设定框架边距：margin；设定容器内框距：padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。
1、取消overflow:hidden是因为经反复实验，该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容，有时反而需要容器高度能随内容的多少而撑开容器高度。
2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系，框架或容器的位置还是用float、position、top、left等精确定位。
3、!important
指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果，我的网站就是想固定显示效果，所以不存在什么优先权。
我对DIV+CSS也还在研究之中，有不当之处请大家跟贴指正，有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站，最重要的是布局思路问题，不同的设计方案，设计的繁简大不一样。我着重框架或容器的通用性，设计出几种容器的样式，就象FS4中的标签样式，然后在需要的地方调用这个样式就行了，以达到通用性而不是专用性。、希望可以帮到你
OK，关于css+div布局和div和css的浮动效果的内容到此结束了，希望对大家有所帮助。