目录
1.1：浏览器为所有列表提供了上下外间距与左侧内边距，记得提前设置样式重置
引：为什么要提前进行样式设置 ？ 不同浏览器展现的效果不同
一：列表项的提前样式设置
列表项是具有外边距和内边距的 所以需要提前设置样式
1.1：浏览器为所有列表提供了上下外间距与左侧内边距，记得提前设置样式重置
ul,ol { margin:0; padding:0;}
1.2：让那个列表项的标识符消失
ul { list-style:none; }
二：外轮廓线
2.1 外轮廓线介绍
outline(外轮廓线):outline用于设置元素边框外围的轮廓线，是一个综合性的属性，可以设置边框线的颜色、样式和粗细问？
为什么我已经去掉边框了，在点击输入框时还会显示边框？注意那个不是边框，而是外轮廓线
表单输入元素(例如：输入框)在获得焦点后，边框外还有一圈“外轮廓线(outline)”
轮廓线在不同浏览器展现的效果不同。当元素获取焦点时，表单元素的轮廓线会被激活显示
一般情况下，可以在初始化样式或样式重置中去掉或改写。
outline:none; 去掉外轮廓线
三：实例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
margin:0;
padding: 0;
/* 去列表标识符 */
list-style: none;
}
/* 实现点击展现 border */
input{
border:2px solid red;
/* 不要边框 点击输入框只显示外轮廓线 */
border:none;
/* 取消外轮廓线 不论是否点击 边框与外轮廓线都没有 */
/* ouline:none; */
}
</style>
</head>
<body>
<ul>
<li class="a">道路千万条</li>
<li class="b">安全第一条</li>
<li class="c">行车不规范</li>
<li class="d">亲人两行泪</li>
</ul>
用户名<input type="text"/>
</body>
</html>
图示：
分析：
1：前四局标语 本来有一定的 padding margin 在提前设置后为 0 所以跟html 根元素 左边重合
2：列表标识项消失了 可以发现
3：光标点击表单时， 表单的轮廓线出现。没有点击时 ，无border边框 无轮廓线
2992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
