盒子模型基础

最新推荐文章于 2022-07-18 20:55:08 发布

迪卢克的现任

最新推荐文章于 2022-07-18 20:55:08 发布

阅读量353

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/m0_53644435/article/details/120747792

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、盒子模型

盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。把所有的网页元素都看成一个盒子，它具有：
content（内容）；
padding（内边距，也叫填充距离,内容和边框之间的距离）；
border（边框）
margin（外边距，盒子与其他元素之间的距离）；
四个属性，这就是盒子模型。

二、盒子特性

1.外边距(margin)

盒子与其他元素之间的距离

属性	描述
margin-top	上外边距
margin-left	左外边距
margin-right	右外边距
margin-bottom	下外边距

margin：上右下左

2.内边距(padding）

也称为填充距离,内容和边框之间的距离

            padding-top: 上边距
           padding-right:右边距
           padding-bottom:下边距
           padding-let:左边距
           padding: 上右下左

3.边框(border):

盒子的边框。

边框线样式：border-style: 上边 [右边下边左边]
边框线宽度：border-width: 上边 [右边下边左边]
边框线颜色：border-color: 上边,[右边,下边,左边]
综合设置： border:四边宽度四边样式四边颜色;
圆角边框：border-radius: 水平半径参数/垂直半径参数;
图片边框： border-images：图片路径裁切方式/边框宽度/边框扩展距离重复方式;

4.背景（background）

盒子的背景属性

背景颜色：background-color
背景图像： background-image
背景图像的平铺属性： background-repeat
背景图像的位置属性： background-position
背景图像的固定属性： background-attachment
综合设置：background:背景色 url("图像") 平铺定位固定;

5.阴影属性

box-shadow:水平阴影位置垂直阴影位置模糊距离阴影尺寸颜色 outset/inset

代码示例：

<!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>
</head>
<style>
    #d1{
        width: 300px;
        height: 150px;
        border-style: solid dashed dotted outset;
        border-width: 15px;
        border-color:red yellow blue orange;
    }
    #d2{
        width: 300px;
        height: 150px;
        border: 4px solid orange;
      border-radius: 10px;
      /* border-image: url('../images/1.gif'); */
      background-image: url(../images/cd_img.jpg);
      background-repeat: no-repeat;/*表示背景图片不平铺*/
      background-position: 100%;
      box-shadow: 3px 5px 3px rgb(170, 111, 2);

    }
    #d3{
        width: 300px;
        height: 150px;
        border: 4px solid orange;
        margin-top: 20%;
        margin-left: 40px;
        padding-top: 30%;
        padding-left: 20%;
        background-color: rgb(245, 245, 137);

    }


</style>
<body>
    <div id="d1"></div>
    <br>
    <br>
    <div id="d2"></div>
    <br>
    <br>
    <div id="d3">是猪猪诶</div>
</body>
</html>

显示效果

附录：参考文章：

原文链接：https://blog.csdn.net/qq_44872688/article/details/120680572

迪卢克的现任

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型基础

一、盒子模型盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。把所有的网页元素都看成一个盒子，它具有：content（内容）；padding（内边距，也叫填充距离,内容和边框之间的距离）；border（边框）margin（外边距，盒子与其他元素之间的距离）；
复制链接

扫一扫