<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
box-sizing: border-box;
/* box-sizing是css3的一种样式，
border-box意味着：
高度或宽度=内容+内边距+边框的高度或宽度
*/
}
/*
1.响应式网站：一个网站同时适配pad，web和phone
2.手机页面：宽度百分比，高度自适应。一般上下留白固定尺寸，左右留白百分比
3.web页面
*/
div {
margin: 10px;
width: 300px;
height: 300px;
padding: 20px;
border: 5px solid lime;
background: pink;
}
ul {
width: 100%;
padding: 5px 20px;
}
ul li{
float: left;
width: 16%;
height: 0px;
padding-bottom: 16%;
margin-right: 5%;
margin-bottom: 5px;
background: lime;
}
/* css3的一种选择器：
选择索引为5的倍数的li元素 */
ul li:nth-of-type(5n){
margin-right: 0px;
}
ol{
width: 100%;
}
ol li{
float: left;
width: 12%;
height: 0px;/* border-box前提需要有宽高 */
padding-bottom: 12%;
/* padding-bottom和padding-top设置百分比，参照物是父级的宽度 */
margin-left: 4%;
margin-right: 4%;
margin-bottom: 5px;
background: seagreen;
}
</style>
</head>
<body>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
1.
box-sizing是css3的一种样式，
border-box意味着：
高度或宽度=内容+内边距+边框的高度或宽度
（1）响应式网站：一个网站同时适配pad，web和phone
（2）手机页面：宽度百分比，高度自适应。一般上下留白固定尺寸，左右留白百分比
（3）web页面
3.
:nth-of-type(5n)
css3的一种选择器，选择索引为5的倍数的元素
原文：https://www.cnblogs.com/lqh0904/p/15207618.html