html - CSS中单位PX的大小好像不一样？
本文介绍了html - CSS中单位PX的大小好像不一样？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是w3school上的一个例子，代码如下：
<html>
<head>
<style type = "text/css">
div.container {
float: left;
width: 100%;
margin: 0px;
border: 1px solid gray;
line-height: 150%;
}
div.header, div.footer {
padding: 0.5em;
color: white;
background-color: gray;
clear: both;
}
h1.header {
padding: 0;
margin: 0;
}
div.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
}
div.content {
margin-left:190px;
padding: 1em;
}
</style>
</head>
<body>
<div class = "container">
<div class = "header"><h1 class = "header">W3school.com</h1></div>
<div class = "left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything."William of Ockham(1285-1349)</p></div>
<div class = "content">
<h2>Free WebBuilding Tutorials</h2>
<p>At W3school.com.cn you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
<div class = "footer">Copyright 2008 by YingKe Investment.</div>
</div>
</body>
</html>
其中div.left的宽度是160px,而div.content的左边距是190px，但是视觉上div.left的宽度要比div.content的左边距宽很多啊。如下图：
请问这是为什么？
解决方案
由于你设置了浮动所以元素都脱离了文档流，这种简单的排列并不推荐设置浮动，对页面其他元素有很大的影响。
关于浮动相对定位和绝对定位，参见如下：http://blog.sina.com.cn/s/blo...
https://segmentfault.com/q/10...
可以看看控制台就很清楚
这篇关于html - CSS中单位PX的大小好像不一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
