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

技术拾荒者

已于 2024-09-09 12:05:25 修改

阅读量333

点赞数 2

文章标签： css 前端 javascript

于 2024-09-09 11:10:55 首次发布

本文链接：https://blog.csdn.net/weixin_53720617/article/details/142053348

版权

选择器

结构伪类选择器

<!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>
      /* 偶数 */
      /* li:nth-child(2n){
        background-color: green;
      } */

      /* 奇数 */
      /* li:nth-child(2n+1){
        background-color: blueviolet;
      } */

      /* 倍数 */
        /* li:nth-child(5n){
            background-color: blueviolet;
        } */

        /* n 从0 开始 */
        /* 第五个以后的标签 */
        /* li:nth-child(n+5)
        {
            background-color: gold;
        } */

        /* 第五个之前的标签 */
        li:nth-child(-n+5)
        {
            background-color: gold;
        } 


    </style>
</head>
<body>
   <ul>
    <li>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>
   </ul>
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>为元素选择器</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

        div::before{
            content: "老鼠";
            width: 50px;
            height: 50px;
            background-color: brown;
            display: inline-block;
        }

        /* 必须设置 content 属性，没有content,伪元素选择器不生效 */
        div::after{
            content: "大米";
            height: 50px;
            width: 50px;
            background-color: #fff;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div>
        爱
    </div>
</body>
</html>

PxCook

盒子模型

盒子模型 – 组成

盒子模型 – 边框线

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: blanchedalmond;

            border-top: 2px solid salmon;
            border-left: 2px dashed salmon;
            border-right: 2px dotted seagreen;
            border-bottom: 2px solid black;
        }
    </style>
</head>
<body>
    <div>盒子模型</div>
</body>
</html>

盒子模型 – 内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-内边距</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;

            /* 内边距的写法！四个方位。 */
            /* padding: 20px; */

            /* 内边距上部 */
            /* padding-top: 5px; */

            /* 内边距左边 */
            /* padding-left: 5px; */

            /* 内边距底部 */
            /* padding-bottom: 5px; */

            /* 内边距的右边 */
            /* padding-right: 5px; */

            /* 内边距的上下都是5px,下边据是10px */
            /* padding: 5px 10px; */

            /* 三个值得时候,上内边距都是5px ,右边据是10px,左边距是10px,下边距是15px */
            padding: 5px 10px 15px;

        }
    </style>
</head>
<body>
    <div>盒子内边距</div>

</body>
</html>

盒子模型 – 尺寸计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型-尺寸模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
           
            padding: 20px;
            border: 5px solid salmon;

             /* 盒子内减模式. */
             box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        div 标签
    </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>版心居中</title>
    <style>
        div{
        width: 200px;
        height: 200px;   
        background-color: aqua; 
        /* 四个方向都有边距 */
        /* margin: 50px; */

        /* 设置左边距 */
        /* margin-left: 20px; */

        /* 两个值的时候,表示上下一样,左右一样 */
        /* margin-left: 20px 50px; */

        /* 但是三个值得时候,上外边据是10px,下边距是30px,左右外边距20px */
        /* margin: 10px 20px 30px; */

        /* 这版心居中 */
        margin: auto;

        }
    </style>
</head>
<body>
    <div>版心居中</div>
</body>
</html>

清除默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚默认样式</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        /* 清楚列表的项目符号 */
        ul>li
        {
            list-style: none;
        }

    </style>
</head>
<body>

    <h1>标题</h1>

    <p>ppp</p>

    <ul>
        <li>li</li>
    </ul>

</body>
</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>
        div{
            
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 添加滚动条 */
            /* overflow: auto; */

            /* 超出隐藏 */
            /* overflow:hidden; */

            /* 是否超出都显示滚动条. */
            overflow: scroll;

        }
    </style>
</head>
<body>
    <div>在璀璨的娱乐圈中，甘婷婷的名字曾如星辰般闪耀，然而她的职业生涯却因一个角色而陷入了深渊。她是新版《水浒传》中那位被众人热议的“潘金莲”，一夜成名的背后，却隐藏着无尽的代价与牺牲。这个故事不仅是关于成名与荣耀的传奇，更是关于成长、坚持与自我救赎的深刻反思。甘婷婷的经历，犹如一面镜子，映射出娱乐圈的光鲜与阴暗，也让我们看到了一个女人在风雨中不屈的灵魂。</div>
</body>
</html>

外边距问题 – 合并现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: rgb(10, 171, 13);
            margin-bottom: 20px;
        }

        .two{
            width: 200px;
            height: 200px;
            background-color: brown;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <!-- 垂直排列的兄弟元素,上下margin 会合并 -->
     <!-- 取两个margin 中的较大值生效 -->
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

外边距问题 – 塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距塌陷问题</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: aqua;

            /* 第一种处理的办法 */
            /* padding-top: 50px;
            box-sizing: border-box; */
            


            /* 第二种方法, */
            /* 溢出隐藏 */
            /* overflow: hidden; */


            /* 第三种方法 */
            /* 第二种和第三种方法都是让父级正确的找到自己的位置. */
            border-top: 1px solid orange;

        }

        .son{
            width: 200px;
            height: 200px;
            background-color: brown;

            /* 塌陷的问题 */
            margin-top: 50px;

        }
    </style>
</head>
<body>
    <!-- 场景:父字级的标签,子级的添加上外边距会产生塌陷问题. -->
    <!-- 导致父级一起向下移动. -->
    <!-- 解决的问题的办法是 -->
    <!-- 1:取消自己margin,父级设置padding -->
    <!-- 父级设置overflow:hidden -->
    <!-- 父级设置border-top -->

    <div class="father">

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

行内元素 – 内外边距问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的垂直内外边框</title>
    <style>
        span{
            margin: 50px;
            padding: 20px;
            line-height: 50px; 
        }
    </style>
</head>
<body>
    <span>span标签</span>
    <span>span标签</span>
</body>
</html>

盒子模型 – 圆角

盒子模型 – 阴影（拓展）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子的阴影</title>
    <style>
        div{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: orange;
            box-shadow: 4px 3px 10px 1px rgba(0,0,0,0.5);

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>