利用CSS布局的时候,有些元素是自带样式的,比如说ul,举个简单的例子
HTML代码如下:
<div>
<ul>
<li>alsdfjlsdjfljdsl</li>
<li>sadfsdlfjlsdjfl</li>
<li>sdjflsdjflskdjflasdk</li>
</ul>
</div>
CSS代码如下:
div{
background-color: #3399bb;
float: right;
}
ul{
list-style: none;
}
ul li{
height: 30px;
line-height: 30px;
width: 200px;
float: left;
text-align: center;
background-color: #33aa55;
}
执行后的效果如下:
从图片中我们可以看到,div的高度是 1em(默认16px)+30px = 46px; 并且很明显看到左侧和顶部都有空隙,看调试面板中右下角的 user agent stylesheet,-webkit-margin-before:1em即 类似 于margin-top , -webkit-padding-start即类似于padding-left,那么能不能清除它的默认样式,当然是 no problem 啦,看下面:
关键代码,就是 margin:0;padding:0;
html+css一并贴上:
<style type="text/css">
div {
background-color: #3399bb;
float: right;
}
ul {
list-style: none;
margin:0;
padding: 0;
}
ul li {
height: 30px;
line-height: 30px;
width: 200px;
float: left;
text-align: center;
background-color: #33aa55;
}
</style>
</head>
<body>
<div>
<ul>
<li>我的高度是30</li>
<li>我的高度是30</li>
<li>我的高度是30</li>
</ul>
</div>
</body>
效果如下:
好啦,就写这么多啦,相信大家都明白了吧,希望大家 在布局的时候能够对元素的默认样式引起注意啦,当然要合理使用元素啦,一路向前,继续加油。