首页 > 博客列表 > 伪类/盒子模型及单位

博主信息

博文 11

粉丝 0

访问量 10910

专题推荐

更多>

伪类选择器

结构伪类

方法一：

<body>
    <!-- 结构伪类：根据元素位置获取元素 -->
    <ul class="list">
      <li>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 > li:nth-of-type(1) {
        background-color: violet;
      }
      /* 最后一个元素 */
      .list > li:nth-of-type(8) {
        background-color: violet;
      }
      /* 第5个元素 */
      .list > li:nth-of-type(5) {
        background-color: violet;
      }
      /* 选择第5个，相当于倒数第4个元素 */
      .list > li:nth-last-of-type(4) {
        background-color: red;
      }
      /* 第一个和倒数第一个元素可以简写 */
      .list > li:first-of-type {
        color: darkorchid;
      }
      .list > li:last-of-type {
        color: lightblue;
      }
    </style>
  </body>

方法二

<body>
    <ul class="list">
      <li>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>
        /* 实际开发过程中，使用n + b(偏移量)来匹配元素 */
      /* 1. 匹配单个，a=0 */
      .list > :nth-of-type(0n + 3) {
        background-color: lightgreen;
      }
      .list > :nth-of-type(3) {
        background-color: red;
      }
      /* 2. 匹配一组：a=1 */
      .list > :nth-of-type(n) {
        background-color: skyblue;
      }
      /* 匹配第3个子元素后面的所有兄弟元素 */
      .list > :nth-of-type(1n + 3) {
        color: darkred;
      }
      /* a=-1,功能与a=1是一样，但是反向取，取前3个 */
      .list > :nth-of-type(-n + 3) {
        background-color: lightgreen;
      }
      /* 匹配最后3个 */
      .list > :nth-last-of-type(-n + 3) {
        background-color: seagreen;
      }
      /* 2n+0:匹配偶数位元素 even */
      .list > :nth-of-type(2n) {
        background-color: gray;
      }
      /* 2n+1:匹配奇数位元素 odd */
      .list > :nth-of-type(2n + 1) {
        background-color: lightgrey;
      }
      .list > :nth-of-type(even):hover {
        background-color: red;
      }
      .list > :nth-of-type(odd):hover {
        background-color: darkred;
      }
    </style>
  </body>

状态伪类/表单伪类

<body>
    <!-- 表单伪类 -->
    <input type="text" />
    <input type="text" disabled />
    <input type="radio" name="sex" id="m" value="0" /><label>男</label>
    <input type="radio" name="sex" id="f" value="1" /><label>女</label>
    <p>
      <button>提交</button>
    </p>
    <style>
      input:disabled {
        background-color: yellow;
      }
      input:enabled {
        background-color: cyan;
      }
      /* 单选按钮选中后，将它的标签文本前景色设置为红色 */
      input:checked + label {
        color: red;
      }
      button {
        width: 100px;
        height: 30px;
        border: none;
        outline: none;
        background-color: seagreen;
        color: white;
      }
      button:hover {
        background-color: coral;
        cursor: pointer;
      }
    </style>
  </body>

字体图标引入

1、字体图标下载

https://www.iconfont.cn/ 根据需要挑选自己需要的字体图标，并下载至本地项目根目录，根据需要设置字体图标目录名称（本项目设置为：font）。

2、字体使用

Font class方式插入

①引入字体CSS文件

<link rel="stylesheet" href="./font/iconfont.css" />

②字体使用

<body>
    <p><span class="iconfont icon-cart"></span> </p>
    <style>
      .iconfont.icon-cart {
        font-size: 30px;
        color: red;
      }
    </style>
</body>

Symbol 方式插入

①引入字体JS文件

<script src="./font/iconfont.js"></script>

②字体使用

<body>
   <svg class="icon" aria-hidden="true">
     <use xlink:href="#icon-fabulous"></use>
   </svg>
</body>

盒模型的属性

盒子模型总共有5个属性分别为：width/height/border/padding/margin

<body>
    <div class="box">Box</div>
    <style>
      /* 盒子模型的属性 */
      .box {
        width: 200px;
        height: 200px;
        background: violet;
        border: 10px dashed currentColor;
        background-clip: content-box;
        box-sizing: border-box;
        /* 值得顺序；上 右 下 左 */
        padding: 5px 10px 15px 20px;
        /* 三值语法：上 右 下 左 */
        padding: 5px 10px 20px;
        /* 双值：第一个上下，第二个左右 */
        padding: 25px;
        /* 单值：四个方向一样 */
      }
      .box {
        border-top: 20px solid red;
        border: 5px solid green;
      }
      /* 样式重置 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
    </style>
  </body>

em/rem的区别

说明：em和rem都是相对单位，em当前或父级的font-size绑定，而rem是永远和html中的font-size绑定

<body>
    <div class="box"></div>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box {
            /* 1em = 当前或父级的font-size绑定 */
            height: 5em;
            background-color: green;
        }
        /* rem：永远和html中的font-size绑定 */
        html {
            font-size: 10px;
        }
        .box {
            width: 20rem;
            height: 15rem;
            background-color: grey;
        }
    </style>
</body>

批改老师：

PHPz

批改状态：合格

老师批语：坚持就胜利，尽快赶上节奏

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VSCode、Chrome安装及HTML页面结构了解

2021-12-21 22:59:40