CSS易混淆的知识点整理

本是古典何须时尚 2021-12-15 05:23 293阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][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" />

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web