web前端 html5+css3相关知识点（跟着黑马学）6_黑马前端html5+css3笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44725351/article/details/137952463

1. 盒子模型

1.1 外边距折叠现象

（1）合并现象

场景：垂直布局的块级元素，上下的margin会合并。

结果：最终两者距离为margin的最大值

解决方法：避免就好。只给其中一个盒子设置margin

（2）塌陷现象

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

a：给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

b：给父元素设置overflow：hidden

c：转换成行内块元素

d：设置浮动

1.2 行内元素的内外边距的问题

如果需要通过margin或padding改变行内标签的垂直位置，无法生效

行内标签的margin-top和bottom 不生效

行内标签的padding-top或bottom 不生效

2. 结构伪类选择器

作用与优势：

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

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

选择器	说明
E:first-child()	匹配父元素中第一个子元素，并且是E元素
E:last-child()	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

n的注意点：

（1）n为：0，1，2，3，4，5，6......

（2）通过n可以组成常见公式

功能	公式
偶数	2n，even
奇数	2n+1，2n-1，odd
找前五个	-n+5
找到从第5个往后	n+5

<!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: pink;
        }
    </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>
    </ul>
</body>
</html>

输出：

3. 伪元素

伪元素：一般页面中的非主体内容可以使用伪元素。

区别：

（1）元素：HTML 设置的标签

（2）伪元素：由CSS模拟出的标签效果。

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素。
::after	在父元素内容的最后面添加一个伪元素。

注意：必须设置content属性才能生效；伪元素默认是行内元素。

<!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>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before {
            /* 内容 */
            content: '老鼠';
        }
        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <div class="father">
        爱
    </div>
</body>
</html>

输出：