伪类选择器、字体图标、盒模型

<!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>

<link rel="stylesheet" href="font_icon/iconfont.css" />
</head>
<body>
<p>伪类选择器</p>
<ul>
<li class="first">itme1</li>
<li>itme2</li>
<li>itme3</li>
<li>itme4</li>
<li>itme5</li>
<li>itme6</li>
<li>itme7</li>
<li>itme8</li>
</ul>
<style>
/
:nth-of-type(an+b)
1. a: 系数, [0,1,2,…]
2. n: [0,1,2,3,….]
3. b: 偏移量, 从0开始
注: 计算出来的索引,必须是有效, 从1开始 /
/ 选中一个元素 /
/ 选中第一个元素 /
li.first:nth-of-type(1) {
background-color: pink-;
}
/ 选中第5个元素 /
li:nth-of-type(5) {
background-color: pink-;
}
/ 选中倒数第1个元素 /
li:nth-last-of-type(1) {
background-color: pink-;
}
/ 选中一组元素 /
/ 从第6个元素开始,选中后面的全部元素 /
li:nth-of-type(n + 6) {
background-color: aquamarine-;
}
/
n: 从0开始取, n+6 匹配的全过程
1. n=0: 0+6=6, 匹配第6个
2. n=1: 1+6=7, 匹配第7个
3. n=2: 2+6=8, 匹配第8个
4. n=3: 3+6=9, 索引越界,匹配失败,结束计算
n+6 => [6,7,8], 匹配到3个 /

/ 从第3个元素开始,选中前面的全部元素 /
/ 2.2 a=-1, 功能与 a=1是一样,但是反向取 /
/ 取前3个 /
li:nth-of-type(-n + 3) {
background-color: blanchedalmond-;
}
/ 选中偶数行元素:2n或者even效果一样 /
li:nth-of-type(2n) {
background-color: aquamarine-;
}
li:nth-of-type(even) {
background-color: aquamarine-;
}
li:nth-of-type(2n):hover {
background-color: burlywood-;
}

/ 选中奇数行元素:2n+1或者2n-1或者odd效果一样 /
li:nth-of-type(2n + 1) {
background-color: aquamarine-;
}
li:nth-of-type(odd) {
background-color: aquamarine-;
}
</style>
<hr />
<p>表单伪类</p>

<input type="text" disabled value="001" /><label for="">编号</label>
<input type="text" /><label for="">用户名</label>
<input type="radio" name="sex" id="m" /><label for="m">男</label>
<input type="radio" name="sex" id="n" /><label for="n">女</label>
<style>
input:disabled {
background-color: antiquewhite;
}
/ :enabled: 有效的,允许提交的默认就是允许被提交的/
input:enabled {
background-color: cyan;
}
/ 当被选中后,将它的标签文本前景色设置为红色 /
input:checked + label {
color: red;
}
</style>
<hr />
<p>引入字体图标的详细步骤</p>

<img src="icon/yonghu.png" alt="" />

<span class="iconfont icon-shanchu"></span>
<style>
img {
width: 50px;
}
span.iconfont {
font-size: 50px;
}
</style>
<hr />
<p>盒模型</p>
<div class="box"></div>

<style>
/ 盒模型常用属性
1. width:宽度
2. height：高度
3. border：边框
4. padding：内边距
5. margin：外边距
6. box-sizing: border-box;此时，width, heigth设置的盒子大小, 就是最终的计算尺寸
7.background-clip: content-box;背景被裁剪到边框盒 /
.box {
width: 300px;
height: 300px;
background-color: bisque;
/ 边框有视觉效果,有宽度, 样式, 颜色，而且可以设置单独一边的边框样式 /
border: 5px solid peru;
padding: 20px;
/ margin 与 padding是一样,只不过它在边框外部, 是外边距, 控制多个盒子之间的间隔; /
margin: 10px;
/ 四值 , 顺时针 /
/ padding: 上右下左 ; /
/ padding: 5px 10px 15px 20px; /

/ 三值 , 中间表示左右/
/ padding: 5px 10px 15px; /

/ 双值: 第1个上下,第2个左右 /
/ padding: 5px 10px; /

/ 单值, 四个方向全一样 /
/ padding: 5px; /
/ padding: 是透明的,只有宽度可以设置 /
/ 当前盒子的总宽度：300+ 202 + 52 =350px /

/ 改变盒子大小的计算方式,使用户设置width,height就是盒子的实际大小,以方便计算与布局 /

box-sizing: border-box;
/ 此时, width, heigth设置的盒子大小, 就是最终的计算尺寸 /
/ 当前盒子总宽度: 250 + 202 + 102 = 300px /
/ 计算出来的300px, 就是width=300px /
}
/ 样式重置的简化通用方案 /
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</body>
</html>

更多相关文章

随机推荐