效果为代码中用到的:nth-of-type(5)就是伪类选择器,用来选择list类里第五个子元素
<!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>
</head>
<body>
<ul class="list">
<li class="first">Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
<style>
.list > :nth-of-type(5) {
background-color: blue;
}
</style>
</body>
</html>
字体图标来源有不少,如阿里巴巴矢量图标库、Bootstrap图标库和awesome图标库等
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
`npm i bootstrap-icons
width(宽度),heigh(高度),border边框,padding(内边框,内边距),margin(外边框,外边距)演示如下
<!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>
</head>
<body>
<div class="box"></div>
<style>
.box {
width: 200px;
height: 200px;
background-color: violet;
border: 10px dashed currentColor;
background-clip: content-box;
padding: 20px;
}
</style>
</body>
</html>
我们可以看到设置高度200px与宽度200px是里面粉色部分的宽高,实际宽高是200+20*2+10*2=260px,这不利于我们设计页面时的计算
<!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>
</head>
<body>
<div class="box"></div>
<style>
.box {
width: 200px;
height: 200px;
background-color: violet;
border: 10px dashed currentColor;
background-clip: content-box;
padding: 20px;
box-sizing: border-box;
}
</style>
</body>
</html>
该属性会自动压缩内容部分的宽高,来保证整体宽高是准确的
相关推荐
© 2020 asciim码
人生就是一场修行