博客列表 >CSS之伪类选择器和简单盒子简单案例

CSS之伪类选择器和简单盒子简单案例

P粉933302309
P粉933302309原创
2022年07月08日 13:07:03391浏览

1.伪类选择器

什么是伪类?

伪类用于定义元素的特殊状态。
例如,它可以用于:

获取列表前三行

  1. .list > li:nth-of-type(-n + 3) {
  2. background-color: blue;
  3. }

效果图如下:

获取最后三个

  1. .list > li:nth-last-of-type(-n + 3) {
  2. background-color: red;
  3. }

效果图如下:

获取偶数可以用2n或者even

  1. .list > li:nth-of-type(2n) {
  2. background-color: rgb(208, 255, 0);
  3. }

效果图如下:

获取奇数可以用2n+1/2n-1/odd

  1. .list > li:nth-of-type(2n-1) {
  2. background-color: rgb(255, 0, 149);
  3. }

效果图如下:

比如获取鼠焦点

  1. <style>
  2. /* 鼠标选中状态变化 */
  3. button:hover {
  4. cursor: pointer;
  5. background-color: coral;
  6. }
  7. /* 获取焦点时变化 */
  8. input:focus {
  9. background-color: aquamarine;
  10. }
  11. </style>

效果图如下:
![

获取焦点之后的样式
![
以上是伪类的简单使用案例,下面我们讲讲盒模型常用属性

2.盒模型常用属性

我们先看下盒子的结构

如图演示

下面我们实际演示一下

我们先给盒子加个边框,设置高度和宽度!

  1. <body>
  2. <div>
  3. <p>我是一个盒子</p>
  4. </div>
  5. </body>
  6. <style>
  7. div {
  8. height: 100px;
  9. width: 200px;
  10. border: 5px solid;
  11. }
  12. </style>

效果图

下面我们先看看怎么设置外边框(我们给他设置50像素)

  1. margin: 50px;

看是不是有一个间隔了。嘿嘿

下面我们把背景裁切,只覆盖到内容区,不包括padding,方便演示一下内边框

  1. background-clip: content-box;

我们给padding一个20像素

  1. padding: 20px;

效果图如下:

以上我们就简单介绍了盒子的外边框和内边框的使用

说明:
padding:内边距,内容区和边框之间的填充物
margin: 外边距,控制盒子与其他元素之间的距离
padding和margin是不可见属性,样式,颜色是看不见的!

最后我们简单说一下还原到w3c默认标准盒子

我们直接用box-sizing:就可以还原到w3c默认标准盒子了

  1. box-sizing: content-box;

人生没有白走的路,每一步都算数!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议