首页 > > 网页制作 > css >

【2020Python修炼记】前端开发之 CSS基础布局

2020-05-13 16:00:15来源：博客园阅读 ()

【目录】

一、布局相关的标签

二、盒子模型

三、浮动

（有个即刻偷师学艺的方法——

在浏览器里，打开一个设计很棒的网页，鼠标点击右键，选择“检查”，即可查看网页的HTML+CSS代码和相对应的布局位置）

一、布局相关的标签

二、盒子模型

1、什么是盒子模型

# 就以快递盒为例

        快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)

        盒子的厚度(标签的边框 border)

        盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)

        物体的大小(内容 content)

# 如果你想要调整标签与标签之间的距离你就可以调整margin

# 浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    </style>
</head>
<body>
<!--    <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!--    <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!--    <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->

<p>ppp</p>



</body>
</html>

代码例子

三、浮动——float

    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
    </style>