CSS布局之元素默认样式

最新推荐文章于 2023-09-19 13:58:50 发布

MapVillage

最新推荐文章于 2023-09-19 13:58:50 发布

阅读量1.1k

点赞数 1

分类专栏： css 布局文章标签： css 布局

本文链接：https://blog.csdn.net/gggg5643/article/details/55669225

版权

css 布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用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>

效果如下：

好啦，就写这么多啦，相信大家都明白了吧，希望大家在布局的时候能够对元素的默认样式引起注意啦，当然要合理使用元素啦，一路向前，继续加油。

MapVillage

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局之元素默认样式

利用CSS布局的时候，有些元素是自带样式的，比如说ul，举个简单的例子HTML代码如下：alsdfjlsdjfljdslsadfsdlfjlsdjflsdjflsdjflskdjflasdkCSS代码如下：div{background-color: #3399bb;float: right;}ul{list-style: none;}ul li{heig
复制链接

扫一扫