1.CSS伪类选择器
结构伪类选择器:
结构伪类选择器的公式:nth-of-type(an+b)
正向取值演示:
![正向取值演示](https://img.php.cn/upload/image/454/373/324/1657251347151187.jpg)
* A的值是0,0乘以任何数都等于0,所以B的值就填写1,取第一行数据.
* 当前也可也取一组数据.
![正向取值演示](https://img.php.cn/upload/image/298/360/738/1657251798256463.jpg)
* 反向取值演示:
![反向取值演示](https://img.php.cn/upload/image/308/785/560/1657252040258269.jpg)
* 获取倒数一组数据演示:
![倒数一组数据演示](https://img.php.cn/upload/image/618/603/866/1657253585625511.jpg)
* 取奇偶数:
![取偶数](https://img.php.cn/upload/image/124/521/652/1657253168988805.jpg)
* 取偶数的快捷方式::nth-of-type(even)
![取奇数](https://img.php.cn/upload/image/100/100/268/1657253270743600.jpg)
* 取奇数的快捷方式::nth-of-type(odd)
* 语法糖总结:first-of-type=取第一个值 | last-of-type=取最后一个值
状态伪类选择器:
* 获取有状态的元素方法:input:状态.这段代码指的是获取一个input标签,这个标签有一个状态.比如禁用状态就是:input:disabled
- 状态伪类选择器的总结:
- 鼠标悬停:hover
- 获取焦点:focus
2.盒模型常用属性
![DIV盒模型](https://img.php.cn/upload/image/558/999/846/1657256614912361.jpg)
- margin[外边距-控制当前盒子与其他盒子的距离]
- border[边框]
- padding[内边距-内容区与边框之间的填充区块]
- content[内容区]
- 且要注意的是,margin和padding属于不可见属性,只能设置宽度,除此之外不能设置任何属性.在页面中看不到.
![盒模型尺寸](https://img.php.cn/upload/image/994/344/540/1657258136657387.jpg)
- 需要注意的是,尽管我们在CSS中设置的是200像素的宽度和100像素的高度,但是在浏览器中我们看到的却是250像素的宽度和150像素的高度,这是因为浏览器自动把padding和boder的四条边的值也算进去了.这点需要注意!!!
- 而如果必须要设置成CSS中设置的像素,也是有办法的.我们要用到一个属性:box-sizing
- box-sizing这个属性需要注意的点是,你设置的宽高度,其实是包括了边框的.
![box-sizing](https://img.php.cn/upload/image/842/637/246/1657258707883136.jpg)
- 还原尺寸也很简单,用到的属性是:box-sizing: content-box;
- 对border边框进行设置可以用到如下属性:比如对上边框进行设置:border-top
- border-top属性参数:宽度 样式 前景色
![上边框设置](https://img.php.cn/upload/image/900/562/504/1657262423811851.jpg)
- 那么左右下边框一样的道理:border-left、border-right、border-bottom
- 当然也有简化写法:
- 当四条边都一样时,只写border:宽度 样式 前景色,即可.
![](https://img.php.cn/upload/image/774/776/146/1657263592302570.png)
- 当四条边都不一样时,可以用如下方法:
- padding: 10px 15px 20px 25px;他的顺序是上、右、下、左
![四条边都不一样](https://img.php.cn/upload/image/992/307/761/1657263787981158.png)
- 当上下值不一样,左右值一样时,我们可以用如下方法:padding:10px 15px 20px;
![](https://img.php.cn/upload/image/442/789/304/1657263925790659.png)
- 我们通过对比可以发现,第一个值对应的是上边,第三个值对应的是下边,第二个值对应的是左右两边.
- 当上下值一样,左右值一样时,我们可以用如下方法:padding:10px 15px;
![](https://img.php.cn/upload/image/116/988/412/1657264098199658.png)
- 我们通过对比可以发现,第一个值对应的是上下两条边,第二个值对应的是左右两条边.
- 三值和二值的记忆方法为:第二个值永远表示左右.
- 当四个方向全部一样时,我们设置一个单值即可:padding:10px;
![](https://img.php.cn/upload/image/461/454/517/1657264283159037.png)
- 盒模型中:最重要的属性为:width、height、padding(不可视属性)、border(可视化属性)、margin(不可视属性)!