CSS易混淆的知识点整理

最新推荐文章于 2025-06-12 09:03:39 发布

原创最新推荐文章于 2025-06-12 09:03:39 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #前端 #几个小问题

CSS 专栏收录该内容

19 篇文章

订阅专栏

这篇博客整理了CSS中一些容易混淆的概念，包括margin负值、父相子绝定位、超链接图片处理、DIV+CSS布局原则以及border-radius、cursor属性的使用。通过实例解析帮助读者深入理解这些知识点。

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

1.margin-left：-5px；左外边距：往父盒子最左端再左移5px（已超出），其他外边距不变。其实就是对先前的margin做些小修改！如果不能理解可以先理解margin-left：5px；即左外边距为5px。

2.margin-left：-50%；左外边距：往父盒子最左端再左移“父盒子宽度*50%”（已超出）。同理，margin-left：50%，即左外边距=“父盒子宽度*50%”；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       #father {
            width:1000px;
       }
       .orign { 
            width: 100px;
            height: 10px;
            background-color: red;
            margin: 10px;
        }
        .second { 
            width: 100px;
            height: 10px;
            background-color: green;
            margin: 10px;
            margin-left:-5px;
            /* margin-left:-50%; */
        }
    </style>
</head>
<body>
<div id="father">
    <div class="orign">1</div>
    <div class="second">2</div>
</div>
</body>
</html>

3.父相子绝：一般涉及图片的制作和放置，图片可以用i标签制作或在css内插入背景图，一般遵从“盒子设置”——“图片设置”——“绝对定位”的顺序；

4.超链接图片：1）大图片：直接把图片作为超链接内容；2）小图标：超链接内容为文字或不写，但在CSS内插入背景图覆盖，设置位置可以用绝对定位；

5.DIV+CSS布局：一般遵从从上到下，从左到右的顺序，div、ul、a、浮动等用得较多。消除浮动、左右浮动、版心、初始边距为0可以写进基本样式；

6.border-radius：设置圆形边框，50%则为圆角矩形，10px 0 0 10px;则为左上边圆角。

7.cursor: pointer; 鼠标悬停时变成小手

8.行内样式：代码写在具体网页中的一个元素内；比如：<div style="color:red"></div>

9.内嵌式：在</head>前面写；比如：<style type="text/css">.div{color:red}</style>

10.外部式：引用外部css文件；比如：<link href="css.css" type="text/css" rel="stylesheet" />