层_div_布局_不变形_新手.docVIP

层_div_布局_不变形_新手 间隔可用margin去间开，不一定ul+li+float 关于层div width:不指定层div的width。div默认的宽度等于相对于他的容器剩余的可用的宽100%，即他父标签剩余宽度=div默认宽度 div style=height:20;border:2px yellow solid;width:30px;float:left;这里指定了width为30px;/div div style=height:20;border:2px yellow solid;默认为层所在容器剩余的宽,这里没有指定width，值为父标签的宽-30px-border的width/div height:不指定为内容高度，没内容0，如3行文本高，图片的高 应用: 外层div:position:relative;width+magin-left:auto;margin-right:auto;(这样就已经不变形了) 里层div:float:left|right;margin-left|right:?px; 作用:排版不变形 这样浏览器的大小改变时width属性会保持div的大小不变（如果div里有float，也不会变形了，因为width已固定好，不会因为浏览器大小变化导致变形,从防止文档流受影响），margin会使div左右两边的边距根据浏览器变化。 常用属性： position: relative;相对位置 margin-left:auto|0px; margin-right:auto|0px; width: height: word-wrap:break-word;越界文本自动换行 background-color:transparent; over-float:hidden;越界隐藏; 以下代码， 表头的w3c标准也要拷贝 =================================参考迅雷看看网页学习==================================== !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=utf-8 title相对层/title style type=text/css body,div,span,lable,ul,li,ol,table,tr,td,form,a,img{ padding:0px; margin:0px; border:0px; text-align:left; zoom:1; } div{ border: 0px; padding: 0px; margin:0px; text-align:left; overflow: hidden; position: relative; --层布局，越界时要隐藏，所有就不要越界换行了.但是层里面一行的最后是英文时，英文不会自动换行，就该用这属性 background-color: transparent; } .side{ width: 970px; border: 1px red solid; dheight: 256px; margin-left: auto; margin-right: auto;充当容器的外层一定要使用margin-left|right:auto } .in_left_1{ border: 2px green solid; width: 300px; height: 250px; margin-left: 6px; float: left; } .in_left_2{ border: 2px black solid; width: 250px; height: 250px; float: left; } .in_right{ border: 2px blue solid; width: 330px; height: 250px; float: right; margin-left: auto; margin-right: 10px; } .eg{ border: 2px blue solid; width: 330px; margin-left: 10%; } /style /head body div style=height:20;bord