想做好前端切图，你需要知道这几点

本文就“想做好前端切图，你需要知道这几点”展开讨论，作者切版网，发布于2017年06月14日全文共3081个字，预计阅读时长10分16秒。

做完设计，找切版网
2017年06月14日 • 切版网（2013~2023）

DIV+CSS切图注意事项:

1. *确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

2. *利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

3. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

4. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

5. float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)
程序代码
[codesyntax lang=”div”]

<div id=”floatA” ></div> 
<div id=”floatB” ></div> 
<div id=”NOTfloatC” ></div>

[/codesyntax]
这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在程序代码
[codesyntax lang=”div”]

<div class=”floatB”></div> 
<div class=”NOTfloatC”></div>

[/codesyntax]
之间加上程序代码
[codesyntax lang=”div”]

<#div class=”clear”></#div>

[/codesyntax]
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：
程序代码
[codesyntax lang=”css”]

.clear{ clear:both;}

[/codesyntax]

6. 为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
程序代码
[codesyntax lang=”css”]

.colwrapper{ 
overflow:hidden; 
zoom:1; 
margin:5px auto;

}

[/codesyntax]

7. margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<div id=”imfloat”></div>
相应的css为程序代码

[codesyntax lang=”css”]

#IamFloat{ 
  float:left; 
  margin:5px;/*IE下理解为10px*/ 
  display:inline;/*IE下再理解为5px*/

}

[/codesyntax]

8. 关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
常见兼容问题：

图片垂直水平居中

[codesyntax lang=”div”]

<!DOCTYPE  HTML>

<html lang="zh-cn">

<head>

<title>页面标题</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet" type="text/css"  href="css/common.css" media="all" />

</head>

<body>

    <div class="picture">

        <img src="img01.png" />

    </div>

</body>

</html>

[/codesyntax]

[codesyntax lang=”css”]

.picture{

       display: table-cell;

       width:240px;

       height:240px;

       text-align:center;

       vertical-align:middle;

       border: 1px solid #ccc;

}

[/codesyntax]

注意：图片垂直水平居中display: table-cell;元素会作为一个表格单元格显示（类似 <td> 和 <th>）

vertical-align:middle;text-align:center;三个属性缺一不可

child的用法

first-child: 选择第一个子元素（这个伪类在CSS2里就有）

last-child: 选择最后一个子元素

nth-child(2n) 定义偶数li的样式

nth-child(2n+1) 选择奇数行

nth-child(odd) 同上

nth-child(2n) 选择偶数行

nth-child(even) 同上

内容不够长底部不居底

[codesyntax lang=”div”]

<style type="text/css">

html,body {margin: 0;padding:0; height: 100%;}

#container {min-height:100%;height: auto !important;height: 100%; /*IE6不识别min-height*/position: relative;}

#header {background: #ff0;padding: 10px;}

#page {width: 960px;margin: 0 auto;padding-bottom: 120px;/*等于footer的高度*/}

#footer {position: absolute;bottom: 0;width: 100%;height: 60px;/*脚部的高度*/ background: #6cf;clear:both;}

/*=======主体内容部分=======*/

#left {width: 220px;float: left;margin-right: 20px;background: lime;}

#content {background: orange;float: left;width: 480px;margin-right: 20px;}

#right{background: green;float: right;width: 220px;}

</style>

<div id="container">

<div id="header">Header Section</div>

<div id="page" class="clearfix">

<div id="left">Left Sidebar</div>

<div id="content">Main content</div>

<div id="right">Right sidebar</div>

</div>

<div id="footer">Footer Section</div>

</div>

[/codesyntax]

注意书写格式的问题：
一定要注意缩进。对齐。要有良好的编程习惯。

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。

想做好前端切图，你需要知道这几点

更多相关文章

网站切版的优化有哪些方法？

微信小程序切图echarts层级太高解决方案

解决移动端 click 事件延迟300ms插件fastclick.js

跨屏是一种趋势，企业顺势才能赢得未来

什么是跨屏版网站？它和电脑版网站有什么不同？

为什么网站需要跨屏？

查看更多

想做好前端切图，你需要知道这几点

更多相关文章

网站切版的优化有哪些方法？

微信小程序切图echarts层级太高解决方案

解决移动端 click 事件延迟300ms插件fastclick.js

跨屏是一种趋势，企业顺势才能赢得未来

什么是跨屏版网站？它和电脑版网站有什么不同？

为什么网站需要跨屏？

查看更多

关注抖音

拨打电话