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

阳光开朗大男孩 =￣ω￣=2024-11-08 14:50

选择器

结构伪类选择器

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

html 复制代码 
<!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: ""属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同
html 复制代码 
<!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）

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

常用线条样式

html 复制代码 
<!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）

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

html 复制代码 
<!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-方位名词

html 复制代码 
<!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 多值写法

html 复制代码 
<!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
html 复制代码 
<!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（盒子要有宽度）

html 复制代码 
<!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>

清除默认样式

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

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

属性值

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>
    .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
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>
    /* .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 可以改变垂直位置

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

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

</html>

盒子模型 -- 圆角

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

属性名：border-radius

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

提示：属性值是圆角半径

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

常见应用 -- 正圆形状

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

常见应用 -- 胶囊形状

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

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>
    .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
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>
    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------抖音直播

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;
    }

    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------新闻

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;
    }

    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>
相关推荐
Fetters0431 分钟前
一篇快速上手 Axios，一个基于 Promise 的网络请求库（涉及原理实现）
前端·ajax·axios·promise
蒟蒻的贤34 分钟前
vue11.22
开发语言·前端·javascript
爱上语文37 分钟前
Axios案例练习
前端·javascript·css·html
河畔一角37 分钟前
升级react@18.3.1后，把我坑惨了
前端·react.js·低代码
天天进步201539 分钟前
Vue 3 + Vite:构建闪电般快速的开发环境
前端·javascript·vue.js
Dragon Wu1 小时前
前端框架 Redux tool RTK 总结
前端·javascript·前端框架
yqcoder1 小时前
reactflow 中 useStoreApi 模块作用
前端·javascript
williamdsy1 小时前
【vue】关于异步函数使用不当导致的template内容完全无法渲染的问题
前端·javascript·vue.js
2402_839708051 小时前
第十章：作业
开发语言·前端·javascript
诗水人间1 小时前
前后端分离，解决vue+axios跨域和proxyTable不生效等问题
前端·javascript·vue.js·springboot·springsecurity·跨域·cros
热门推荐
01Docker 夺命连环 15 问02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04RAG 实践- Ollama+RagFlow 部署本地知识库05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07抖音的互联网架构08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型