选择器、pxcook软件、盒子模型

最新推荐文章于 2024-05-22 10:27:27 发布

青青草原羊村懒大王

最新推荐文章于 2024-05-22 10:27:27 发布

阅读量362

点赞数 5

分类专栏： HTML 文章标签：前端

本文链接：https://blog.csdn.net/lan_da_wang/article/details/138312095

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

结构伪类选择器

定义：根据结构的元素关系来查找元素。

 <title>Document</title>
    <style>
        li:first-child{
            color:aqua ;
        }
        li:last-child{
            color: aqua;
        }
        li:nth-child(3){
            color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>85</li>
        <li>8</li>
        <li>32</li>
        <li>23</li>
        <li>34</li>
        <li>56</li>
    </ul>
    
</body>

nth-child（公式）

默认n是从0开始的。

 li:nth-child(2n){
            color: brown;
        }
        li:nth-child(2n+1){
            color: aqua;
        }
        li:nth-child(5n){
            color: black;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>85</li>
        <li>8</li>
        <li>32</li>
        <li>23</li>
        <li>34</li>
        <li>56</li>
    </ul>
    
</body>

伪元素选择器

必须加content!

    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        div::before{
            content: "老鼠";
        }
        div::after{
            content: "大米";
        }
    </style>
</head>
<body>
    <div>
        爱
    </div>
</body>

盒子模型

width、height、

padding、内边距

border、边框线：solid: 边框的样式，这里是实线。

magin外边距：出现在盒子外面，拉开两个盒子之间的距离。

padding、border：内容与盒子边缘之间。

盒子边框线：bd

    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* border: dashed;
             */
             border: dotted;

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

单边框线

  border-top: 4px solid #111;
             border-bottom: 4px dashed #777;
             border-left: 4px dotted #456789;
             border-right: 4px solid #599898;

盒子模型：内边距padding（多值属性）

盒子模型：尺寸计算

   <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            /* 内减模式 ，加padding和border也不会增大盒子面积*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        jhdjkasd
    </div>
</body>

盒子模型外边距

版心居中

要求：必须设定盒子的宽度，如果没有宽度做不了自动算法。

  <style>
        div{
            width: 1000px;
            height: 200px;
            background-color: pink;
            margin: auto;
        }
    </style>
</head>
<body>
    <div>版新内容</div>

清除标签默认样式

清楚li标签前面的圆点

在最开始会设置自动算法。

盒子模型——内容溢出

overflow: hidden：内容隐藏

overflow: auto：框框有滚动条，右下都有

overflow: scroll：框框有滚动条，右边才有

  <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* overflow: hidden;
             */
             /* overflow: auto; */
             overflow: scroll;
        }
    </style>
</head>

外边距问题：合并和塌陷。

外边距合并现象

外边距塌陷问题

行内元素，内外边距

margin：边缘。

没有办法改变垂直方向的距离，如果非要改变加行高： line-height

 <style>
        span{
            margin: 50px;
            padding: 20px;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <span>标签</span>
    <span>标签</span>

盒子模型-圆角

radius：半径。

盒子有四个角，border-radius: 后面可以跟四个值。

  <title>Document</title>
    <style>
        div{
            background-color: pink;
            height: 200px;
            width: 200px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div>
        sdas
    </div>
</body>

圆角取值：最大50%。超过50%就没有效果了。

盒子模型的阴影

  div{
            height: 200px;
            width: 200px;
            margin: 20px auto;
            background-color: pink;
            box-shadow: 20px 10px 5px 1px rgb(0, 0, 0.8) inset;
        }