前端应用_css_盒子模型01

最新推荐文章于 2022-12-15 19:45:00 发布

上海_彭彭

最新推荐文章于 2022-12-15 19:45:00 发布

阅读量120

点赞数

分类专栏： css 文章标签： css 盒子模型

本文链接：https://blog.csdn.net/qq_34979346/article/details/97402350

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

先理解这张图：
在这里插入图片描述
把元素叫做盒子，设置对应的样式分别是：盒子的边框（border），盒子内容和边框之间的间距（padding），
盒子与盒子之间的间距（margin）。

页面的布局就是用盒子与盒子拼揍起来的。

在学习的过程中，我们发现表格也可以做页面布局，为什么还要盒子做布局呢？

答：打个比喻，我们想装饰一个花园，表格布局是什么样呢，他是把花每一个都插入里面，然后拼揍，也能组装一个漂亮的花园，
用盒子呢，盒子就像一个花瓶，直接把花插入里面，如果想装饰就拿不同的花进行拼凑。显然盒子灵活性比较高。
以后我们页面布局都是用盒子和盒子之间进行拼凑。

下边我先画一个盒子，根据上边的图片的属性进行画

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格制作样式讲解</title>
    <style type="text/css">

        .box{
        background-color:gold;
        margin-left:100px;
        width:500px;
        height:300px;
        border-top:10px solid blue;
        padding-left:50px;
        border-left:10px dashed green;
        padding-top:50px;
        border-right:10px dotted red;
        padding-top:50px;


        }


    </style>
</head>
<body>
<div class="box">
    我是box

</div>
</body>
</html>

效果图如下：

在这里插入图片描述

上海_彭彭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端应用_css_盒子模型01

先理解这张图：把元素叫做盒子，设置对应的样式分别是：盒子的边框（border），盒子内容和边框之间的间距（padding），盒子与盒子之间的间距（margin）。页面的布局就是用盒子与盒子拼揍起来的。在学习的过程中，我们发现表格也可以做页面布局，为什么还要盒子做布局呢？答：打个比喻，我们想装饰一个花园，表格布局是什么样呢，他是把花每一个都插入里面，然后拼揍，也能组...
复制链接

扫一扫