CSSCSS从位置上分类：嵌入式样式表、内部样式表、外部样式表 (就近原则) CSS盒子模型： border:边框 ma


<!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>
       /* style: 风格样式标签 type="text/css" : 表示一对标签内部的环境是css环境 被style标签包围的范围是CSS环境。可以写CSS代码 */

        /* 标签样式表(标签选择器) */
        span {
            width: 50px;
            height: 100px;
            color: red;
        }

        span p {
            width: 50px;
            height: 100px;
            color: blue;
        }

        /* 组合选择器 */
        div p {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        /* 类样式（类选择器）*/
        .p1 {
            width: 100px;
            height: 100px;
            background-color: grey;
            font-size: 30px;
        }

        .p2 {
            width: 100px;
            height: 100px;
            background-color: gold;
            font-size: 30px;
            font-style: italic;
            font-family: "华文彩云";
        }
        /*ID选择器（id应尽量保持唯一）*/
        #hong {
            width: 50px;
            height: 50px;
            background-color: red;
            font-weight: bolder;
        }
    </style>
    
    <link rel="stylesheet" href="css/font.css">
</head>

<body>
    <span>哒哒哒哒哒</span>
    <span>
        <p>哒哒哒哒哒</p>
    </span>
    <div>
        <p class="p1">段落1</p>
        <p class="p2">段落2</p>
        <p>段落3</p>
        <p>段落4</p>
    </div>

    <div id="hong" style="color : yello">
        红
    </div>

</body>

</html>

CSS从位置上分类：嵌入式样式表、内部样式表、外部样式表 (就近原则)

内部样式表：<style> ..... </style>
嵌入式样式表：<div style="font-size : 30px">xxx</div>
外部样式表： <link rel="stylesheet" href="css/font.css">

CSS盒子模型：
border:边框
margin:间距
padding:填充

8像素问题：
body{
    margin: 0;
    padding: 0;
}

CSS布局:

position : relative; 相对定位

position : absolute; 绝对定位

float