css常用布局方式和技巧

参加工作了感触就特别多了无论是心态和情感上还是学习和工作上感触多且深刻。每次在技术总结完以后我基本都会写一篇生活中学习和工作给自己心态的变化的记录（类似于日记）。发现最近特别想学习了，真的当你了解的东西多了，想进一步深入研究的时候就会发现自己会的东西真的好少，原本计划每个月写2篇技术总结的（没2周一篇），但这个星期接触了一些新的东西，急切的想记录和与人分享，所以即使占用周末的时间我也想写一下。

首先还是总结一些本周遇到的的问题和解决的方法吧：

漂浮：

漂浮：让一个div（就以div为例）漂浮在领一个div上，位置自选（例如左边，右边），

实现方法：首先在布局上被漂浮的div应该嵌套在主要的div里面，让外面（主要）的div定位方式为，对象不可叠加（我个人称为浮动定位即position: relative;），然后里面（被浮起来）的div相对于外面的（住div绝对定位即position: absolute;），

设置：外面（主要）的div（也就是下面的div）的 z-index: 0;设置浮动（也就是上面的）div的 z-index: 1;再设置对呀div的宽度和高度，然后通过left、top设置左边距，上边距，（不能用左浮动或右浮动，因为绝对定位脱离文档流，不存在定位方式），让其达到想要的效果

具体方法：

<divclass="right2_2"><divclass="right2_absolute1"></div></div>

.right2_2 {

   float: left;

   width: 160px;

   height: 102px;

   position: relative;

   z-index: 0;

   border:1px solid #000;

}

.right2_absolute1 {

   position: absolute;

   z-index: 1;

   width: 61px;

   height: 60px;

   top: 0px;

   left: 100px;

   background: url(./../../images//140611/show_30.png) left top  no-repeat;

}

关于一些常用的技术和经典的解决方法如果在上次总结中出现过，这这里就不在啰嗦了。

发现：

原来div在不浮动的情况下是处于一种类似于自由的状态下，所以自动的高度及通过样式设置div的高度为自动(height:aoto)是没有用的，所有在布局的时候默认div左浮动比较好，让它在布局的时候通过宽度自动塌陷来达到想要的效果，这样的div处于浮动的状态，div的高度会随着里面的内容（控件和文字）来自动增长，而不会因为里面的内容的高度大于div自身的高度而出现溢出的现象，如果有需求当然也可以手动清除浮动。当然自己的一些小总结。

疑点：

今天（2014/6/16）发现了一个特别有趣的现象：IE居然和火狐谷歌的颜色有差距。就是一浅绿色图片为背景的div，然后在大的div里面放以蓝色为主体浅绿色为边框的（蓝色和浅绿色交错）的的图片为背景的div，在谷歌和火狐下看见的是一块很顺眼的浅绿色里面嵌套一个蓝色的场景，结果到IE下看见的却是那一个浅绿色的类似边框的地方变成了蓝色。

切图

还有一点差点忘了，不是与前端布局相关的，但我想说一些，就是图片透明的问题，以及切图过程的一些细节问题，在此谈一些工作经历。刚开始切图的时候以为只有把图片切下来就可以了，大小（几个像素）不重要，在布局中也可以通过几个补丁就可以达到想要的效果。的确在一些要求不是很严格的（特别是页面宽度固定的页面）这样做的确一点问题都没有。但我最近做响应式设计的时候发现这是一个很严重的问题（有时候一个像素也能让你的整个页面布局乱成一团）我是切身体验过了的，还有就是切图的时候最好吧不需要的（例如不规则的图片多余的：一个正方形的图片，只有其中的一半（一个三角形），那另一半（三角形）就设置为透明），吧所以的图片切好以后再把所有的背景和图层         全部去掉（隐藏）         这样切出来的图片多余的部分全部透明。

总结：切图的时候确保像素精确（精确到1个像素），也许刚开始你不会觉得，但当你做网页一段时间后你会发觉这样能给你带来很大的帮助，不要切多余的（比如你要吧切的图片党做背景，控件（或容器）高度为30px；而这个图自身大小为18x18上下各有6个像素的空白，此时千万不要切成18x30,应该就切成18x18）

评价：也许当你切成18x30的时候觉得这样很合适，的确这样和合适 ，但当控件大小发生变化的时候呢，特别是响应式设计里面要是只有5到10个像素的变化（特别是只有高度）就没必要重新做一直图片了，在背景图片设置的时候垂直居中，就会自动居中，要是高度为30就会看见上面有6个像素的空白，而主要的部分会有6个像素看不见，切图精确，不切多余的，有利于拓展，而且这样切的时候也不纠结。再次强调一点要精确不能多一个像素。也许在一般的布局中不会体验的这点，只有经历过响应式设计的人才能体会。    

今天主要是想说一下响应式设计的：

关于响应式设计最重要的一点（两点吧），就是设置最大宽度和最小宽度（max-width: 720px;min-width:320px;）对于手机页面我们基本不管头部和底部，主要管主体部分的最大和最小宽度 具体：

.main{

         height:auto;

         max-width:720px;

         min-width:320px;

         margin:0pxauto;

}                

一般的手机的屏幕最小不会小于320 ，所有这里吧主体部分控制在320到720之间，要是屏幕小于320的时候就按照320的宽度计算（此时可以左右滑动），当大于720的时候左右两边多出的部分会成空白，主体居中。

 

最常用的的控件圆角div和圆角按钮（此时不是button而是a标签）如果是div（圆角div），只需要对div设置（border-radius: 10px; border:1px solid #ccc;）属性border-radius的值表示控件（div）圆角的程度。border-radius属性是不允许使用负值的，当其中一个为0时，则该值对应的角为矩形，否则为圆角。border:1px solid表示给原件div加一个边框，如果不加边框圆角就（貌似看不见效果，当然也可以设置背景颜色），不过最多的嘴经典的不是给div设置圆角，而是给a标签设置圆角，在手机端就类似于按钮，首先吧a标签变为块状，然后设置宽度，此时的a标签就像div一样可以设置各种样式包括浮动，补丁背景颜色，背景图片，而且还可以点击链接到想要的页面

.main2 a {

         display:block;

         text-decoration:none;

         width:49%;

         text-align:center;

   font-size:26px;

         border-radius:10px;

         border:1px solid #c6c3c3;

}

经验总结：对于响应式设计最难的不是布局，而是调试，适应多种屏幕的宽度，这里说一些最常见的例子：

屏幕宽度变化：字体大小肯定会变，宽度不要用具体的像素（基本不能用具体宽度，除了一些小的补丁外。比如5个像素的外补丁，可以用具体的数字外，），图片大仙肯定要变的，最好吧图片设置为背景，这样即使控件变小也不会导致布局乱，最多看到的图片（背景图片）不完整，所有对图片的大小（即使是1像素）要求比较高，还有基本每张图片要做三张，大小为（一最小的图片为1）一张为1，一张为1.5，一张为2（例如：18x18、24x24、36x36），

然后来适应不同的屏幕宽度，从720到320中途设置2个节点（基本是320-430,430-580,580-720，我是这样设置的）字体最后同意设置，让后统一改变，

body {

   font-size: 18px;

   color: #909090;

   background-color: #f7f7f7;

}

@media screen and (max-width:580px) {

body {

       font-size: 14px;

    }

}

@media screen and (max-width:430px) {

body {

       font-size: 12px;

    }

 

}

除了字体外其余的耶可以这样更改，比如外补丁：第一个阶段（最多的时候）为15个px，第二个阶段只需要该表里面的值为10，最小的阶段该为5；

.ml_15{

         margin-left:15px;

}

.ml_15{

         margin-left:10px;

}

 

.ml_152

         margin-left:1px;

}

总结改善：如果把握的好补丁最好也设置为百分百（我尝试过，发现很不好把握，当然一些简单的比例还是可以的）比如2个div并列，中间一点缝隙，设置2个div的跨度为48%，然后设置左右补丁为1%，正好就是100%；48*2+2*2=100；呵呵，或者31*3+3*2=97，此时每个div与div之间的距离就2%的间隙；而且不会坍塌。当然这是一些简单的布局，有时候需要左浮动，右浮动，或则div里面嵌套div的时候就需要很复杂的去算，而且算了还很容易算错，只有慢慢的调试。

最麻烦的就是图片的处理：

基本每个按钮（圆角a标签）都会加上至少一个图片，让后再加上几个文字，然后库点击，如果是图片当屏幕改变的时候图片大小肯定要改变的，这个处理起来都不是很麻烦。还有一种肯坑爹的就是把一张图片设置为一个按钮（圆角a标签）背景，此时就不是该图片那么简单了，因为图片是背景，如果按钮（圆角a标签）的宽度和高度变小，而图片不变，很难看的，所以基本的方法（也是唯一的方法，当然不考虑脚本的情况下）就是换背景图片

.selectChang {

   background: url(../images/icon/icon_select75x75.png) center centerno-repeat;

   width: 75px;

   height: 74px;

}

@media screen and (max-width:580px) {

.selectChang {

       background: url(../images/icon/icon_select53x53.png) center centerno-repeat;

       width: 53px;

       height: 53px;

}

}

@media screen and (max-width:430px) {

   .selectChang {

       background: url(../images/icon/icon_select33x33.png) center centerno-repeat;

       width: 33px;

       height: 33px;

    }

}

补充一点，如果是手机端的圆角是border-radius属性就可以随意实现圆角效果。

但如果是pc端的圆角还考虑浏览器的兼容问题

Chrome浏览器需要写成-webkit-border-radius;Firefox浏览器则要写成-moz-border-radius;兼容的示例代码如下：

.div{

Border-radius:10px;

/*firefox浏览器*/

-moz-border-radius:10px;

/*webkit内核浏览器*/

-webkit-border-radius:10px

} 

。