一、定宽居中
在很多的电商网页中导航条和内容都是居中对齐的，比如华为的商城，此时我们就可以用到定宽居中来实现这种效果。
1. 原理
将元素固定宽度，通过为元素添加样式 margin-left | margin-right：auto，利用自身的外边距实现元素对于父容器中的左右居中
2. Tips
- 首先应该先定宽，将自身宽度固定才能实现居中效果。块级元素如果不设置自身的宽度就会默认为100%父元素的宽度，从而无法实现居中效果。行元素无法使用定宽居中。
没有设置宽度的块元素：
<div style=" background-color: pink;">1</div>
- 块元素宽度在没有设置的情况下，不由内容宽度决定而是等于父元素的宽度，高度由内容决定。行元素宽高由内容撑起来，其中行内块具有块元素的属性，可以设置宽高 和margin padding值。行元素宽高只能由自身内容决定。当我们在写一些组件的基础样式时可以利用行元素宽高的性质，加个padding值使其只由自身内容撑开。
基本单位
- px 表示屏幕上的一个像素点 所以px最小为1px;
- em 1em = 父元素字体（fontsize）大小
- rem 1rem = html 字体（fontsize）大小 html默认字体大小为16px 移动端不同的屏幕大小默认的字体大小也不同
- vm 100vm=可视窗口的宽度 不是body，html的宽度
- vh 100vh=可视窗口的高度
将body宽度设置成120%，nav宽度位100vw,那么nav的宽度为100%body宽度而不是120%（当可视窗口为100%body大小时）
<style>
*{
margin: 0;
}
body{
width: 120%;
background-color: black;
}
</style>
</head>
<body>
<nav style="width: 100vw;background-color: red;">
<ul >
<li>item01</li>
<li>item02</li>
<!-- <section>section2</section> -->
<li>item03</li>
<li>item04</li>
<li>item05</li>
</ul>
<div>
<span>你好</span>
</div>
</nav>
</body>
6734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
