复习css基础从头开始认清自己认真做一遍抵上简单看一遍

1.盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet" type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box1{
            /*position: relative;*/
            /*top: 50px;*/
            /*left: 300px;*/
            width: 400px;
            height: 400px;
            background-color: #d8f5f0;
            margin: 200px;
            padding-top: 60px;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: 60px;
            padding: 40px;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </div>
</body>
</html>

2.overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet" type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box1{
            width: 200px;
            height: 200px;
            margin: 200px;
            background-color: #d8f5f0;
            /*超出部分隐藏*/
            /*overflow: hidden;*/
            /*如果有超出部分显示滚动条*/
            /*overflow: auto;*/
            /*一直显示滚动条*/
            /*overflow: scroll;*/
        }


    </style>
</head>
<body>
    <div class="box1">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
</body>
</html>

（1）默认---超出情况下直接会超出盒子范围（等同于overflow：visible）

（2）overflow: hidden---超出部分隐藏

(3) overflow: auto---如果有超出部分显示滚动条沒有超出则不显示滚动条

（4）overflow: scroll---一直显示滚动条不管内容有没有超出

3.border边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #border1{
            width: 200px;
            height:200px;
            background-color:red;
            border-width: 4px;
            border-color: black;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div id="border1"></div>
</body>
</html>

border有3个属性：width粗细、color颜色、style样式

其中style可以是 solid 实线、 dashed虚线、double双线、dotted点状线。。。。。

写法1：

写法2：

也可以单独控制一边：

4.margin 外边距

margin属性和padding属性可以取值的单位有：px和%（外层盒子的高度和宽度），上右下左四个取值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 20px 15px 50px 40px;
            border: 1px solid red;
        }

        #box3{
            width: 400px;
            height: 400px;
            margin: 100px 400px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div id="box3">
        <div class="box" id="box1">box1</div>
        <div class="box" id="box2">box2</div>
    </div>
</body>
</html>