css新手请问上面的例子如何理解
日期：2014-05-17 浏览次数：20685 次
css新手请教下面的例子怎么理解？
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:2px solid black;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>显示效果如下：
这是w3school的css例子，有两点不明白，一是为什么要把ul 元素和 a 元素都设为浮动，只设ul为浮动不可以吗？都设和只设ul为浮动为什么会有差别？二是ul的宽度是 100%，是什么意思，相对谁的100%?还有一个和这个例子无关的问题，图片的宽度设为100%是不是占满整个屏幕？求大侠指点
------解决方案--------------------
保持对w3school权威性尊重的情况下有时候也得报怀疑的态度。
1. 按我的经验来看这里边ul可以不浮动，浮动最大的坏处就是会影响后续的兄弟元素，必须要clear:both;或overflow:hidden;来清除浮动。浮动最大的作用是把块元素当内联元素使用，对内呈现块元素特征，对外呈现内联元素特征，跟display:inline-block;是一样的功能。只不过display:inline-blockie6下有问题，float会影响子元素。
2. 这里边的width:100%;按照现代浏览器，准确的说非ie6浏览器来说，完全没有必要，因为块元素，默认是占据一行，如果有值，是百分比是相比于父级元素，如果没有父级元素，则是body。但是由于ie6的haslayout bug或者其它不知名的bug，所以这个百分比得写上。
3. 找一本合适的准确的书看，系统而全面的了解css知识。当然推荐：
css那些事，精通css第二版。
------解决方案--------------------
有的时候设置float是为了设置元素的宽度，如果a不设置为float，那么width:7em;也就没有用了。
------解决方案--------------------
100%，这个百分比依赖于父级元素的宽度，如果是body，如果没给body宽度，那肯定是撑满的了。
------解决方案--------------------
那是因为 body 默认有边距，设置 body{margin:0;} 就可以了
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:2px solid black;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>显示效果如下：
这是w3school的css例子，有两点不明白，一是为什么要把ul 元素和 a 元素都设为浮动，只设ul为浮动不可以吗？都设和只设ul为浮动为什么会有差别？二是ul的宽度是 100%，是什么意思，相对谁的100%?还有一个和这个例子无关的问题，图片的宽度设为100%是不是占满整个屏幕？求大侠指点
------解决方案--------------------
保持对w3school权威性尊重的情况下有时候也得报怀疑的态度。
1. 按我的经验来看这里边ul可以不浮动，浮动最大的坏处就是会影响后续的兄弟元素，必须要clear:both;或overflow:hidden;来清除浮动。浮动最大的作用是把块元素当内联元素使用，对内呈现块元素特征，对外呈现内联元素特征，跟display:inline-block;是一样的功能。只不过display:inline-blockie6下有问题，float会影响子元素。
2. 这里边的width:100%;按照现代浏览器，准确的说非ie6浏览器来说，完全没有必要，因为块元素，默认是占据一行，如果有值，是百分比是相比于父级元素，如果没有父级元素，则是body。但是由于ie6的haslayout bug或者其它不知名的bug，所以这个百分比得写上。
3. 找一本合适的准确的书看，系统而全面的了解css知识。当然推荐：
css那些事，精通css第二版。
------解决方案--------------------
有的时候设置float是为了设置元素的宽度，如果a不设置为float，那么width:7em;也就没有用了。
------解决方案--------------------
100%，这个百分比依赖于父级元素的宽度，如果是body，如果没给body宽度，那肯定是撑满的了。
------解决方案--------------------
那是因为 body 默认有边距，设置 body{margin:0;} 就可以了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
