CSS——选择器、PxCook软件、盒子模型

🕗 发布于 2024-11-08 19:52 css 前端 javascript

选择器

结构伪类选择器

作用：根据元素的结构关系查找元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child{
            color: pink;
        }
        ul li:last-child{
            color: green;
        }

        ul li:nth-child(2n){
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
        <li>我是第11个li</li>
    </ul>
</body>
</html>

:nth-child(公式)

作用：根据元素的结构关系查找多个元素。

提示：公式中的n取值从 0 开始。

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

注意点：

必须设置 content: ””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            /* 一个冒号是伪类 两个冒号是伪元素 */
            .box::before{
                content: "我";
                /* 因为是行内元素所以无法设置宽高 */
                display: inline-block;
                width: 30px;
                height: 30px;
                background-color: pink;
            }

            .box::after{
                content: "刘德华";
            }
    </style>
</head>
<body>
    <div class="box">是</div>
</body>
</html>

PxCook

PxCook（像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）

创建项目 → 输入项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿

盒子模型

盒子模型 – 组成

作用：布局网页，摆放盒子和内容。

盒子模型重要组成部分：

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

盒子模型 – 边框线

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

常用线条样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border: solid 3px blue; */
            /* solid 实线 dashed 虚线 dotted 点线 */
            border: 3px dotted red;
        }
        input{
            width: 490px;
            height: 30px;
            border: 2px solid red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <br>
    <input type="text" placeholder="平板">
</body>
</html>

设置单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细线条样式颜色（不区分顺序）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border: solid 3px blue; */
            /* solid 实线 dashed 虚线 dotted 点线 */
            border: 3px dotted blue;
            border-top: 3px dotted red;
        }
        input{
            width: 490px;
            height: 30px;
            border: 2px solid red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <br>
    <input type="text" placeholder="平板">
</body>
</html>

盒子模型 – 内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding / padding-方位名词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 30px;
            /* 内边距 padding: 30px 表示上下左右都是30px */
        }
        input{
            width: 490px;
            height: 30px;
            border: 2px red solid;
            font-size: 14px;
            /* 可以设置单方向 */
            padding-left: 15px;
        }
    </style>
</head>
<body>
    <div class="box">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
    <input type="text" placeholder="平板">
</body>
</html>

盒子模型 – 内边距 – 多值写法

padding 多值写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 一个值 上下左右 */
            /* padding: 10px; */
            /* 两个值 上下10 左右30 */
            /* padding: 10px 30px; */
            /* 三个值 上10 左右30 下50 */
            /* padding: 10px 30px 50px; */
            /* 四个值 顺时针 上下左右 */
            padding: 10px 30px 50px 40px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

盒子模型 – 尺寸计算

默认情况

盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决

手动做减法，减掉 border / padding 的尺寸
內减模式：box-sizing: border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
         /*1. 手动去减 */
         /* width 160px */
         /* height 160px  */
         /* 2.css盒子模型 box-sizing: border-box*/
         width: 200px;
         height: 200px;
         background-color: pink;
         border: 10px solid red;
         padding: 10px;
         box-sizing: border-box;
        }
        
    </style>
</head>
<body>
    <div class="box">qwe</div>
</body>
</html>

盒子模型 – 外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

技巧：版心居中 – 左右 margin 值为 auto（盒子要有宽度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 1000px;
            background-color: pink;
            /* 有宽度的块级元素水平居中 */
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

清除默认样式

清除标签默认的样式，比如：默认的内外边距。

<!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>
  <style>
    * {
      /* 清除内外边距 */
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      margin: 100px;
    }

    li {
      /* 取消li的小圆点 */
      list-style: none;
    }
  </style>
</head>

<body>
  <h1>标题</h1>
  <ul>
    <li>123</li>
    <li>123</li>
  </ul>
</body>

</html>

盒子模型 – 元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值

<!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>
  <style>
    .box {
      /* 超出的部分，隐藏 */
      overflow: hidden;
      /* 超出的部分显示滚动条 */
      /* overflow: scroll; */
      /* auto 如果超出，则显示滚动条，不超出则不显示滚动条 */
      /* overflow: auto; */
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
    我要写很多很多很多的文字
  </div>
</body>

</html>

外边距问题 – 合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

外边距问题 – 塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

取消子级margin，父级设置padding
父级设置 overflow: hidden
父级设置 border-top

<!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>
  <style>
    /* .nav ul li a {} */
    .box1,
    .box2 {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .box1 {
      margin-bottom: 100px;
    }

    .box2 {
      background-color: purple;
      margin-top: 150px;
    }

    /* 结果是 100px， 外边距合并以较大外边距为准 */

    .father {
      /* 防止外边距塌陷 */
      /* 1. 方案1  overflow: hidden; */
      /* 2. 方案2  border-top: 1px solid red; */
      /* transparent 颜色透明 */
      border-top: 1px solid transparent;
      width: 200px;
      height: 200px;
      background: pink;
      /* 3. 方案3  padding-top: 20px; */
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="box1">上</div>
  <div class="box2">下</div>

  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

<!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>
  <style>
    span {
      /* 上下不生效 有问题 给行高可以解决  转换为其他元素  */
      padding: 30px;
      line-height: 60px;
    }
  </style>
</head>

<body>
  <span>我是span</span>
</body>

</html>

盒子模型 – 圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

技巧：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

常见应用 – 正圆形状

给正方形盒子设置圆角属性值为宽高的一半 / 50%

常见应用 – 胶囊形状

给长方形盒子设置圆角属性值为盒子高度的一半

<!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>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 圆角边框 */
      border-radius: 15px;
    }

    /* img {
      border-radius: 50%;
    } */

    .box2 {
      width: 200px;
      height: 40px;
      background-color: pink;
      border-radius: 20px;
    }

    .img1 {
      border-radius: 15px;
    }

    .img2 {
      border: 2px solid red;
      border-radius: 0 50%;
    }

    .img4 {
      border-radius: 15px 50px 80px 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <img src="./images/1.png" alt="">
  <div class="box2"></div>
  <img src="./images/1.png" alt="" class="img1">
  <img src="./images/1.png" alt="" class="img2">
  <img src="./images/1.png" alt="" class="img3">
  <img src="./images/1.png" alt="" class="img4">

</body>

</html>

盒子模型 – 阴影（拓展）

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

<!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>
  <style>
    img {
      border-radius: 50%;
      /* 盒子阴影 */
      /* box-shadow: 3px 5px 4px rgba(0, 0, 0, .4); */
    }

    img:hover {
      box-shadow: 0 15px 30px rgba(0, 0, 0, .3);

    }
  </style>
</head>

<body>
  <img src="./images/1.png" alt="">
</body>

</html>

综合案例1——抖音直播

<!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>
  <style>
    /* 清除样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #f1f1f1;
    }

    .card {
      width: 270px;
      height: 255px;
      background-color: #fff;
      border-radius: 15px;
      /* 让块级盒子水平居中 左右margin是auto就可以了 */
      margin: 100px auto 0;
      /* 让里面的文字和图片水平居中 */
      text-align: center;
      padding-top: 40px;
    }

    .card h4 {
      /* 不加粗 */
      font-weight: 400;
      /* 上 15 下 10  左右不要 */
      margin: 15px 0 10px 0;
    }

    .card p {
      font-size: 14px;
    }

    .card:hover {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>

<body>
  <div class="card">
    <img src="./images/liveSDK.svg" alt="">
    <h4>抖音直播SDK</h4>
    <p>包含抖音直播看播功能</p>
  </div>

</body>

</html>

综合案例2——新闻

<!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>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      /* 取消小点 */
      list-style: none;
    }

    .box {
      width: 360px;
      height: 190px;
      /* background-color: pink; */
      /* 块级盒子水平居中 */
      margin: 100px auto;
    }

    .box-hd {
      height: 34px;
      background-color: #eeeeee;
      border: 1px solid #dbdee1;
      border-left: 0;
    }

    .box-hd a {
      /* 转换为块级元素 */
      display: block;
      width: 50px;
      height: 34px;
      background-color: #fff;
      text-align: center;
      line-height: 31px;
      font-size: 14px;
      color: #333;
      text-decoration: none;
      border-top: 3px solid #ff8400;
      border-right: 1px solid #dbdee1;
      /* margin是负值，则盒子往上走 */
      margin-top: -1px;
    }

    .box-bd {
      margin-top: 3px;
    }

    .box-bd li {
      line-height: 26px;
      background: url(./images/square.png) no-repeat left center;
      padding-left: 15px;
    }

    .box-bd li a {
      font-size: 14px;
      text-decoration: none;
      color: #333;
      background: url(./images/img.gif) no-repeat left center;
      padding-left: 20px;
    }

    .box-bd li a:hover {
      color: #ff8400;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 头部 hd  是 head的缩写 -->
    <div class="box-hd">
      <a href="#">新闻</a>
    </div>

    <!-- 身体部分  bd 是 body的缩写-->
    <ul class="box-bd">
      <li><a href="#">新农村人，温暖的身手</a></li>
      <li><a href="#">新农村人，温暖的身手</a></li>
      <li><a href="#">新农村人，温暖的身手</a></li>
      <li><a href="#">新农村人，温暖的身手</a></li>
      <li><a href="#">新农村人，温暖的身手</a></li>
      <li><a href="#">新农村人，温暖的身手</a></li>
    </ul>
  </div>
</body>

</html>

原文地址：https://blog.csdn.net/zzy985/article/details/143515472

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：PyQt5实战——翻译器的UI页面设计以及代码实现（七）
下一篇：Oracle 23AI创建示例库

完整版Java类型
Java 有 8 种基本数据类型，这些类型直接存储值，占用固定内存，效率较高。它们不属于类，没有方法或属性。
阅读更多2024-11-08
硬件---1电路设计安全要点以及欧姆定律
一直搞的东西都偏软件，硬件也一直在学，元器件、基础电路知识、PCB设计、模电运放都学的马马虎虎，因此决定进行系统性学习，内容基本来源于手里的视频和书本以及自己的感悟。
阅读更多2024-11-08
PHP静默活体识别API接口应用场景与集成方案
翔云静默活体识别接口通过精准的生物特征检测，利用深度学习算法判断用户的活体状态，避免了传统身份验证方式中可能出现的伪造风险，在为个人和企业带来更高安全性的同时，也推动了多个行业的数字化升级。它的广泛应
阅读更多2024-11-08
2024年自学手册网络安全（黑客技术）
网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。走安全行业的工程方向的，技术上面其实有很大的重叠
阅读更多2024-11-08
操作系统-4.2文件系统的层次结构&虚拟文件系统
文件系统的层次结构&虚拟文件系统,物理格式，打开方法等
阅读更多2024-11-08
Maven最佳实践
使用。
阅读更多2024-11-08
Java 中基于优先级执行任务的线程池实现
这种方法的核心在于让任务类（Task）实现Comparable接口，并在compareTo方法中定义优先级的排序逻辑。会根据Comparable的实现来自动对任务进行排序，优先级高的任务会被排在队列的
阅读更多2024-11-08
了解 Open RAN 架构中的 DU 和 CU
3GPP（第三代合作伙伴计划）：这是电信标准协会之间的合作，为制定定义 3GPP 技术的高度成功的报告和规范提供了稳定的环境。O-RAN 联盟中定义的 E2 接口对此进行了扩展和增强，该接口与 O1
阅读更多2024-11-08
FFmpeg存放压缩后的音视频数据的结构体：AVPacket简介，结构体，函数
如下图的解码流程，AVPacket中的位置FFmpeg源码中通过AVPacket存储压缩后的音视频数据。它通常由解复用器（demuxers）输出，然后作为输入传递给解码器。或者从编码器作为输出接收，然
阅读更多2024-11-08
鸿蒙多线程开发——并发模型对比(Actor与内存共享)
并发是指在同一时间段内，能够处理多个任务的能力。为了提升应用的响应速度与帧率，以及防止耗时任务对主线程的干扰，HarmonyOS系统提供了异步并发和多线程并发两种处理策略。指异步代码在执行到一定程度后
阅读更多2024-11-08