【前端】网页开发精讲与实战 CSS Day 3

令夏二十三

已于 2023-07-15 21:36:03 修改

阅读量476

点赞数 1

文章标签：前端 css

于 2023-07-12 22:50:09 首次发布

本文链接：https://blog.csdn.net/Summerison/article/details/131691515

版权

本文介绍了前端开发的基础知识，包括选择器的结构伪类如:nth-child()，伪元素选择器如::before和::after的使用，以及PxCook软件在设计和切图中的应用。详细讲解了盒子模型的组成，如边框、内边距、外边距及其常见问题，并讨论了元素溢出的处理方法。

摘要由CSDN通过智能技术生成

🚀Write In Front🚀
📝个人主页：令夏二十三
🎁欢迎各位→点赞👍 + 收藏⭐️ + 留言📝
📣系列专栏：前端
💬总结：希望你看完之后，能对你有所帮助，不足请指正！共同学习交流 🖊

文章目录

前言

今天是学习网页开发的第三天，将要学习的内容是选择器、PxCook软件和盒子模型。学会了它们，可以做出更上得了台面的网页模块效果。

一、选择器

1. 结构伪类选择器

作用：根据元素的结构关系（位置）查找元素

选择器	说明
E:first-child	查找第一个E标签
E:last-child	查找最后一个E标签
E:nth-child(N)	查找第N个E标签

<!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>结构伪类选择器</title>
    <style>
        li:first-child{
            background-color: green;
        }
        li:last-child{
            background-color: blue;
        }
        li:nth-child(3){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <dl>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
        <li>li 5</li>
    </dl>
</body>
</html>

:nth-child（公式）

作用：根据标签的顺序查找多个标签。

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

2. 伪元素选择器

作用：创建虚拟标签，用来摆放装饰性的内容。

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

注意点：

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

<!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>伪元素选择器</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        div::before{
            content: "老鼠";
            width: 100px;
            height: 100px;
            background-color: brown;
            display: block;
        }
        div::after{
            content:"大米";
            width: 100px;
            height: 100px;
            background-color: orange;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>爱</div>
</body>
</html>

二、PxCook 像素大厨

PxCook是一款切图设计软件。支持PSD文件的文字、颜色、距离自动智能识别。

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

原则是，能用开发模式就用开发模式。

三、盒子模型

1. 组成

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

模型的重要组成部分：

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

2. 边框线

属性名：border（bd）

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

常用线条样式：

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

<!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>盒子模型</title>
    <style>
        .first{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding:20px;
            border: 1px solid #000;
            margin: 20px;

        }
        .second{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            padding: 20px;
            margin: 20px;
            border: 1px dashed #000;
        }
        .third{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            padding: 20px;
            margin: 20px;
            border: 1px dotted #000;
        }
    </style>
</head>
<body>
    <div class="first">div 标签1</div>
    <div class="second">div 标签2</div>
    <div class="third">div 标签3</div>
</body>
</html>

设置单方向边框线

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

属性值：和普通边框线一样

3. 内边距

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

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

padding多值写法：

取值个数	示例	含义
一个值	padding: 10px;	四个方向内边距都是10px
两个值	padding: 10px 80px;	上右下左
三个值	padding: 10px 40px 80px;	上左右下
四个值	padding:10px 20px 40px 80px;	上下左右

4. 外边距

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

属性名：margin

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

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

要清除默认样式，就将属性值设置为0。

5. 元素溢出

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

属性名：overflow

属性值：

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

6. 外边距问题 - 合并现象

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

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

7. 外边距问题 - 塌陷问题

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

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

解决方法：

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

8. 行内元素 - 内外边距问题

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

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

9. 盒子模型 - 圆角

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

属性名：border-radius

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

提示：属性值是圆角半径

多值写法：

取值个数	示例	含义
一个值	border-radius: 10px;	四个角均为10px
四个值	border-radius: 10px 20px 40px 80px	左上右上右下左下
三个值	border-radius: 10px 40px 80px	左上右上+左下右下
两个值	border-radius: 10px 80px	左上+右上右下+左下