HTML元素的默认样式
为什么需要默认样式？
在html发展初期，还没有css文件，另外，css文件可能不能加载，所以这里默认样式就是必要的。
默认样式带来的问题，会影响我们写css，需要我们覆盖默认样式。还有一些默认样式是很难覆盖的，比如下拉框的默认样式，是很难去覆盖的。
DEMO2-7.html
<!DOCTYPE html>
<!-- html元素是block元素，是有默认样式的，display=block,并且默认width是100%，height随着内容变化 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 浏览器默认给body元素添加了margin=8px，并且body元素也是block元素 -->
<body>
<div>DIV元素</div>
<!-- ul元素默认有个padding=40px，所以没有和div元素左对齐 -->
<ul>
<!-- li元素默认带有一个小圆点，这是通过display：list-item来设置的，默认小圆点的位置是在li的外部，这是通过list-style-position的默认值outside设置的 -->
<li>LI元素</li>
<li>LI元素</li>
</ul>
<!-- padding为0时，小圆点就被覆盖了 -->
<ul style="padding: 0;">
<li>LI元素</li>
<li>LI元素</li>
</ul>
<!-- padding为0时，左边距没有了 -->
<ul style="padding: 0;">
<!-- 把list-style-position的值由没有值outside修改为inside， -->
<li style="list-style-position: inside;">LI元素</li>
<li style="list-style-position: inside;">LI元素</li>
</ul>
</body>
</html>既然元素默认样式有这么多问题，我们通常会进行CSS Reset（实践总结）。
https://meyerweb.com/eric/tools/css/reset/ 比如把ol, ul { list-style: none; }
https://yuilibrary.com/yui/docs/cssreset/ 大同小异
还有一个经常使用的。直接把所有margin和padding为0
<style>
* {
margin: 0;
padding: 0;
}
</style>CSS Reset的思路是把一些带来麻烦的默认样式干掉，麻烦包括默认样式不好看，还有浏览器对于默认样式不统一。
关于浏览器对于html元素的默认样式不统一的解决方案，css reset是直接清0，直接干掉。
还有另外一种思路，把不统一的样式换成统一的，只是Normalize.css这个css库干的事。
相关推荐
today0 2020-09-22
89520292 2020-09-18
周公周金桥 2020-09-06
bigname 2020-08-25
灵均兰草 2020-08-20
hannuotayouxi 2020-08-20
ChinaWin 2020-08-13
大象从不倒下 2020-07-31
好好学习天天 2020-07-28
powrexly 2020-07-20
AlisaClass 2020-07-19
88530091 2020-07-14
骆驼的自白 2020-06-26
lanzhusiyu 2020-06-21
Phoebe的学习天地 2020-06-21
诗蕊 2020-06-14
jiedinghui 2020-05-30
kangtingting0 2020-05-20