Day1_0412 盒模型

最新推荐文章于 2022-09-08 21:31:33 发布

阿拉灯神丁吖

最新推荐文章于 2022-09-08 21:31:33 发布

阅读量155

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_52335062/article/details/124135291

版权

1、什么是盒模型

每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成。

2、盒模型的组成

盒模型由内而外包括：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

●内边距（padding）：

1、padding属性是用来定义内边距的，四个边的padding值的长度可以各不相同；

2、内边距的值是顺时针进行赋值的，从上开始，即上右下左（如下图所示）；

3、padding的值可以增加盒模型的面积（如上图，给padding赋值后，div面积随之改变了）。

●边框（border）：

1、复合属性：边框宽度（border-width）、边框样式（border-style）【solid 实线、dashed 虚线、dotted 点线】、边框颜色（border-color）【transparent 透明色】；

2、设置边框的宽度后，同样可以增加盒模型的面积；

3、圆角：border-radius （当赋值50%时，是圆形）；

4、三角形的实现及实例

●外边距（margin）：

1、margin属性是用来定义外边距的，四个边的padding值的长度可以各不相同；

2、外边距的值和内边距的符指一样，都是顺时针进行赋值的，从上开始，即上右下左；

3、叠压现象：常态下，兄弟标签的上下间距以大值为准；

4、塌陷问题：

（1）原因：常态下，父级的第一个子级标签是个块标签，并且使用了margin或者margin-top

（2）解决方案：<1>在父级使用border；<2>不使用margin-top,在父级使用padding-top；<3>在父级使用overflow:hidden；

3、五环案例实现

●代码段：

<!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>五环实例</title>
    <style>
        div{
            width: 80px;
            height: 80px;
            border: 10px solid black;
            border-radius: 50%;
        }
        .d1{
            border-color: black;
        }
        .d2{
            border-color: tomato;
            margin-left: 100px;
            margin-top: -100px;
        }
        .d3{
            border-color: deepskyblue;
            margin-left: 200px;
            margin-top: -100px;
        }
        .d4{
            border-color: greenyellow;
            margin-left: 50px;
            margin-top: -50px;
        }
        .d5{
            border-color: gold;
            margin-left: 150px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
</body>
</html>

●效果图：