前端应用_css_盒子模型02

最新推荐文章于 2023-05-06 16:53:04 发布

上海_彭彭

最新推荐文章于 2023-05-06 16:53:04 发布

阅读量112

点赞数

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

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

上一节用的，border-left ， border-top ，这样的写法感觉好丑，最常见的用法，就是用 border 属性就行了
他是直接设置上下左右的边框。这样对齐比较好看，如下：

<!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:100px;
        width:500px;
        height:300px;
        border:10px solid green;
        padding-left:40px;
        padding-top:80px;
        padding-bttom:100px;
        padding-right:20px;
        <!--border-top:10px solid blue;-->
        <!--border-left:10px dashed green;-->
        <!--border-right:10px dotted red;-->
        }
    </style>
</head>
<body>
<div class="box">
    我是box
</div>
</body>
</html>

效果图如下：
在这里插入图片描述
总结： border-left ，border-right，border-bottom， border-top 可以用 border 同时设置边框。如何有特殊要求就要拆开设置。

下边用介绍 padding

padding 同样也有四个拆分， padding-left， padding-right， padding-top， padding-bottom，
但是padding 可以合起来分别设置，例如 padding：10px，20px，30px，40px ，顺序为顺时针进行设置，上为开头，
顺序为：上右下左进行设置。
如何设置三个呢，并代表什么意思呢？
例子： padding：10px，20px，30px 意思就是上10px ，左右为20px ，下边为30px
如何设置两个呢，并代表什么意思呢？

例子 padding ：10px ，20px 意思是上下为10px ，左右为20px

同理推出如果只有一个就是 padding：10px ，代表左右上下都是 10px。

我们举例四个的吧，

 .box{
        background-color:gold;
        margin:100px;
        width:500px;
        height:300px;
        border:10px solid green;
        padding:80px 100px 40px 20px;
        <!--下边的四个可以合为一个 如下：-->
        <!--padding-left:40px;-->
        <!--padding-top:80px;-->
        <!--padding-bttom:100px;-->
        <!--padding-right:20px;-->
        }

效果还一样的，三个的我们也看下：

<!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:100px;
        width:500px;
        height:300px;
        border:10px solid green;
        padding:80px 200px 40px ;
        <!--下边的四个可以合为一个 如下：-->
        <!--padding-left:40px;-->
        <!--padding-top:80px;-->
        <!--padding-bttom:100px;-->
        <!--padding-right:20px;-->
        }
    </style>
</head>
<body>
<div class="box">
    所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
</div>
</body>
</html>

效果图显示左右是一样的。
在这里插入图片描述

上海_彭彭

关注

0
点赞
踩
0

收藏

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

上一节用的，border-left ， border-top ，这样的写法感觉好丑，最常见的用法，就是用 border 属性就行了他是直接设置上下左右的边框。这样对齐比较好看，如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫