2023 【黑马程序员】CSS 第三天

最新推荐文章于 2024-06-13 09:45:33 发布
最新推荐文章于 2024-06-13 09:45:33 发布
阅读量81 收藏 1
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abeijixingdeye/article/details/135039270
版权

目录

一、选择器

1. 结构伪类选择器

２.:nth-child(公式) 

3. 伪元素选择

二、PxCook

三、 盒子模型

1. 盒子模型 – 组成

 2. 盒子模型 – 边框线

3. 盒子模型 – 内边距

4. 盒子模型 – 尺寸计算 

5. 盒子模型 – 外边距

6. 清除默认样式

7. 盒子模型 – 元素溢出

8. 外边距问题 – 合并现象

9. 外边距问题 – 塌陷问题

10. 行内元素 – 内外边距问题

11. 盒子模型 – 圆角

12. 盒子模型 – 阴影（拓展）

四、综合案例

1. 卡片

2. 新闻列表

一、选择器

1. 结构伪类选择器

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

使用方法：

li:first-child {
    background-color: green;
}
选择器说明
E:first-child查找第一个E元素
E:last-child查找最后一个E元素
E:nth-child(N)查找第N个E元素（第一个元素N值为１）

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-child {
            background-color: red;
        }

        li:last-child {
            background-color: green;
        }

        li:nth-child(3) {
            background-color: yellowgreen;
        }
    </style>

</head>

<body>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
    <li>第五</li>
    <li>第六</li>
</body>

</html>

网页运行结果：

２.:nth-child(公式) 

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

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

功能公式
偶数标签2n
奇数标签2n+1
找到5的倍数标签5n
找到5以后的标签n+5
找到5以前的标签-n+5

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:nth-child(2n) {
            background-color: red;
        }

        li:nth-child(2n+1) {
            background-color: green;
        }
    </style>

</head>

<body>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
    <li>第五</li>
    <li>第六</li>
</body>

</html>

网页运行结果：

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:nth-child(n+3) {
            background-color: red;
        }

        li:nth-child(-n+3) {
            background-color: greenyellow;
        }
    </style>

</head>

<body>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
    <li>第五</li>
    <li>第六</li>
</body>

</html>

网页运行结果：

3. 伪元素选择

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

选择器说明
E::before在E元素里面最前面添加一个伪元素
E::after在E元素里面最后面添加一个伪元素

注意点：

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

使用方法：

div::before {
    content: "before 伪元素";
}
div::after {
    content: "after 伪元素";
}

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before {
            content: "dog1,";
            width: 100px;
            height: 100px;
            background-color: red;

            display: inline-block;
        }

        div::after {
            content: ",dog2";
            width: 100px;
            height: 100px;
            background-color: greenyellow;

            display: block;
        }
    </style>

</head>

<body>
    <div>
        I am a cat,
    </div>
</body>

</html>

网页运行结果：

二、PxCook

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

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

以后学项目再回来，自学暂时用不到，跳过~ 

三、 盒子模型

1. 盒子模型 – 组成

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

盒子模型重要组成部分：

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

使用方法：

        div {
            margin: 50px;
            border: 5px solid brown;
            padding: 20px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 2px solid black;
            margin: 5px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div>
        I am a cat
    </div>
</body>

</html>

网页运行结果：

 2. 盒子模型 – 边框线

属性名：border（bd）

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

常用线条样式
属性值线条样式
solid实线
dashed虚线
dotted点线

 使用方法：

div {
    border: 5px solid brown;
    width: 200px;
    height: 200px;
    background-color: pink;
}

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* border: 1px dashed red; */
            /* border: 2px solid black; */
            border: 3px dotted greenyellow;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div>
        I am a cat
    </div>
</body>

</html>

网页运行结果：

设置单方向边框线

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

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

使用方法：

        div {
            border-top: 2px solid red;
            border-right: 3px dashed green;
            border-bottom: 4px dotted blue;
            border-left: 5px solid orange;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-top: 1px solid red;
            border-right: 5px dashed yellow;
            border-left: 10px dotted green;
            border-bottom: 15px solid orange;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div>
        I am a cat
    </div>
</body>

</html>

网页运行结果：

3. 盒子模型 – 内边距

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

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

使用方法：

        div {
            /* 四个方向 内边距相同 */
            padding: 30px;
            /* 单独设置一个方向内边距 */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 40px;
            padding-left: 80px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding-top: 5px;
            padding-right: 7px;
            padding-bottom: 11px;
            padding-left: 13px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div>
        I am a cat
    </div>
</body>

</html>

网页运行结果：

padding 多值写法
取值个数示例含义
一个值padding: 10px四个方向内边距均为10px
四个值padding: 10px 20px 30px 40px上：10px 右：20px 下：30px 左：40px
三个值padding: 10px 20px 30px上：10px 左右：20px 下：30px
两个值padding: 10px 20px上下：10px 左右：20px

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

4. 盒子模型 – 尺寸计算 

默认情况：盒子尺寸 = 内容尺寸 + 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=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 170px;
            height: 170px;
            padding: 40px;
            background-color: pink;

            box-sizing: border-box;
        }
    </style>

</head>

<body>
    <div>
        I am a cat
    </div>
</body>

</html>

网页运行结果：

（未加）

 

（加了 box-sizing)

 

5. 盒子模型 – 外边距

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

属性名：margin（和 padding 写法类似）

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

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

使用方法：

        div {
            margin: 0 auto;
            width: 1000px;
            height: 200px;
            background-color: pink;
        }

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 170px;
            height: 170px;
            background-color: pink;

            margin: auto;
        }
    </style>

</head>

<body>
    <div>
        I am a cat
    </div>
</body>

</html>

网页运行结果：

6. 清除默认样式

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

使用方法：

        /* 清除默认内外边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 清除列表项目符号 */
        li {
            list-style: none;
        }

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>

</head>

<body>
    <div>
        I am a cat
    </div>
    <h1>小困犬</h1>
    <li>巡回犬</li>
</body>

</html>

网页运行结果：

（未改前）

（修改样式后）

7. 盒子模型 – 元素溢出

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

属性名：overflow 

属性值效果
hidden溢出隐藏
scroll溢出滚动（无论是否溢出都显示滚动条位置）
auto溢出滚动（溢出才显示滚动条位置）

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* overflow: hidden; */
            /* overflow: scroll; */
            overflow: auto;
        }
    </style>

</head>

<body>
    <div>
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
        小犬犬，大犬犬，犬犬国王，巡回犬，ac犬，文豪野犬，
    </div>
</body>

</html>

网页运行结果：

8. 外边距问题 – 合并现象

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

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

 使用方法：

        .one {
            margin-bottom: 50px;
        }

        .two {
            margin-top: 20px;
        }

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cat {
            width: 100px;
            height: 100px;
            background-color: greenyellow;

            margin-bottom: 20px;
        }

        .dog {
            width: 100px;
            height: 100px;
            background-color: rgb(19, 162, 223);

            margin-top: 40px;
        }
    </style>

</head>

<body>
    <div class="cat">猫猫</div>
    <div class="dog">犬犬</div>
</body>

</html>

网页运行结果：

（只加第一个下边距）

（加了上边距）

 

9. 外边距问题 – 塌陷问题

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

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

使用方法：

        .son {
            margin-top: 50px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

解决方法：

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

问题例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dog {
            width: 100px;
            height: 100px;
            background-color: rgb(19, 162, 223);

        }

        .cat {
            width: 40px;
            height: 40px;
            background-color: greenyellow;

            margin-top: 50px;
        }
    </style>

</head>

<body>
    <div class="dog">
        <div class="cat">猫猫</div>
    </div>
</body>

</html>

问题网页运行效果：

 解决例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dog {
            width: 100px;
            height: 100px;
            background-color: rgb(19, 162, 223);

            /* padding-top: 20px;
            box-sizing: border-box; */

            /* overflow: hidden; */

            border-top: 1px solid black;

        }

        .cat {
            width: 40px;
            height: 40px;
            background-color: greenyellow;

            margin-top: 20px;
        }
    </style>

</head>

<body>
    <div class="dog">
        <div class="cat">猫猫</div>
    </div>
</body>

</html>

网页运行结果：

10. 行内元素 – 内外边距问题

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

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

使用方法：

        span {
            /* margin 和 padding 属性，无法改变垂直位置 */
            margin: 50px;
            padding: 20px;
            /* 行高可以改变垂直位置 */
            line-height: 100px;
        }

 问题例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            margin: 20px;
            padding: 100px;
        }
    </style>

</head>

<body>
    <span>我是猫猫</span>
    <span>我是犬犬</span>
</body>

</html>

问题网页运行效果：

 解决例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            margin: 20px;
            padding: 100px;
            line-height: 100px;
        }
    </style>

</head>

<body>
    <span>我是猫猫</span>
    <span>我是犬犬</span>
</body>

</html>

网页运行结果：

11. 盒子模型 – 圆角

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

属性名：border-radius

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

提示：属性值是圆角半径，多值写法参考内边距

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

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 100px auto;

            border-radius: 40px;
        }
    </style>

</head>

<body>
    <div></div>
</body>

</html>

网页运行结果：

常见应用：

  • 正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%
  • 胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半

12. 盒子模型 – 阴影（拓展）

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

属性名：box-shadow

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

注意：

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

使用方法：

        div {
            width: 200px;
            height: 80px;
            background-color: orange;
            box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
        }

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 80px;
            margin: 100px auto;
            background-color: orange;
            box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5);
        }
    </style>

</head>

<body>
    <div></div>
</body>

</html>

网页运行效果：

四、综合案例

1. 卡片

 

代码：

<!-- 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>
        /* 清除标签默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f4f5f9;
        }

        .box {
            /* 1、宽高 */
            width: 228px;
            height: 430px;
            /* 2、背景颜色 */
            background-color: white;
            margin: 100px auto;
            border-radius: 10px;
            /* font-weight: 700; */
        }

        .box .product {
            /* width: 228px; */
            width: 100%;
            border-radius: 10px;
        }

        .box h3 {
            height: 52px;
            padding-left: 20px;
            padding-right: 20px;
            margin-top: 25px;
            font-size: 20px;
        }

        .box p {
            margin-left: 24px;
            font-size: 12px;
            color: brown;
        }

        .box p span {
            color: rgb(251, 9, 9);
        }
    </style>
</head>

<body>
    <!-- 布局流程：从上往下、从外往内 -->
    <div class="box">
        <img src="./tu.jpg" class="product">
        <h3>•犬犬的奇幻历险记</h3>
        <p><span>剧情片</span>/复仇之路</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和padding */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 去除行高带来的默认间隙，完成精准布局 */
            line-height: 1;
        }

        .box {
            width: 430px;
            height: 300px;
            /* background-color: pink; */
            border: 1px solid #ccc;
            padding: 37px 30px 0;
            margin: 100px auto;
            /* 自动内减 */
            box-sizing: border-box;
        }

        .box h2 {
            height: 37px;
            /* background-color: pink; */
            border-bottom: 1px solid #ccc;
            /* 自动内减 */
            box-sizing: border-box;
            font-size: 30px;
        }

        .box ul li {
            height: 37px;
            padding-left: 7px;
            border-bottom: 2px solid #ccc;
            line-height: 50px;
        }

        .box li a {
            text-decoration: none;
            font-size: 18px;
            color: hsl(0, 0%, 40%);
        }

        .box li a:hover {
            color: brown;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>猫狗帝国狗仔队最新报道</h2>
        <ul>
            <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>
一只北极星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS
index.html黑马程序员云道官网代码html；
06-19
黑马程序员云道官网代码html；
2023 【黑马程序员】 CSS 第八天
abeijixingdeye的博客
12-31 830
小兔鲜儿首页（下）
2023 【黑马程序员】CSS 第七天
abeijixingdeye的博客
12-30 925
SEO、Favicon、小兔鲜儿首页制作（上）
2023 【黑马程序员】 CSS 第六天
abeijixingdeye的博客
12-29 888
定位、CSS 高级技巧、修饰属性
2023 【黑马程序员】CSS 第一天
abeijixingdeye的博客
12-15 74
/* 选择器 { } */p {/* CSS 属性 */color: red;体验 CSS
2023 【黑马程序员】 CSS 第二天
abeijixingdeye的博客
12-16 70
复合选择器，CSS 特性，Emmet 写法，背景属性，显示模式
2023 【黑马程序员】CSS 第四天
abeijixingdeye的博客
12-20 71
标准流、浮动、清除浮动、Flex 布局
黑马程序员前端基础笔记：CSS篇
wc2356772894的博客
06-20 1848
CSS使用
2023【黑马程序员】移动 Web 第二天
abeijixingdeye的博客
01-03 885
空间转换、动画
黑马程序员web前端零基础html5 +css3
欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探
02-21 568
一：网站基础认识： 1.网页由哪些部分组成？？ 答：文字，图片，音频，视频，超链接 2.程序员写的代码是通过什么软件转换成网页的？ 答：浏览器（是网页显示，运行的平台） 常见五大浏览器（推荐谷歌！！！） 代码用Web标准来写 二：网页初体验 把扩展名后缀txt改成html, Win11找不到文件扩展名在设置里面改 或者在文件--查看--显示--扩展名 HTML文档右击---打开方式--记事本 记事本：Ctrl+S保存 <strong&g
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-15 2785
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
Pinyougou_html_css_黑马程序员_
09-29
品优购项目实例 黑马程序员 适合新手 静态网页
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
晚上加班的程序员CSS3特效.zip
10-10
非常实用好看的特效代码，可以完美运行，可以二次修改！
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 339
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 232
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
HOW - CSS 常见效果实现
weixin_58540586的博客
06-11 886
常见 CSS 效果实现总结。
px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
最新发布
x_XDGS的博客
06-13 426
浏览器缩放自适应，px转rem，postcss-plugin-px2rem插件
黑马程序员css笔记
08-18
黑马程序员的CSS笔记涵盖了一些关于CSS的内容。在CSS中，可以使用和标签或CSS来实现字体倾斜效果，并可以使用和标签或CSS来实现字体加粗效果。值得注意的是，CSS本身是没有语义的，它只是一种样式定义语言。要想将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值