css盒子

最新推荐文章于 2025-01-28 08:03:01 发布

原创最新推荐文章于 2025-01-28 08:03:01 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

本文详细介绍了CSS盒模型的基本概念，包括边框宽度、样式和颜色的设定，并通过示例展示了如何利用边框创建三角形和梯形效果。此外，还讨论了外边距塌陷问题及其解决方案，涉及兄弟和父子元素的布局调整。

css盒模型

一.边框

边框的宽度:border-width

边框的线型:border-style

1.solid  单实线
2.double  双实线
3.dashed  条状虚线
4.dotted  点状
5.none  无边框

边框的颜色: border-color

复合写法:border:宽度线型颜色

利用边框实现三角形

<!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>
    <style>
        .box{
            width: 0px;
            height:0px;
            /* background-color: beige; */
        }
        .box1{
           border: 100px solid ;
           border-color: transparent transparent red transparent;
         }
         .box2{
            border: 100px solid;
           border-color: transparent transparent transparent pink;
         }
         .box3{
            border: 100px solid;
           border-color: transparent red transparent transparent;
         }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>
</html>

利用边框实现梯形

<!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>
    <style>
        .box1{
            border: 100px solid;
            border-color: pink red yellow green;
            width: 50px;
            height: 50px;
        }

        .box2{
            width: 100px;
            /* height: 400px; */
            border: 100px solid ;
            border-color: transparent transparent yellow transparent;
        }

        .box3{
            width: 400px;
            height: 100px;
            border: 100px solid ;
            border-color: transparent transparent  transparent pink;
        }
    </style>
</head>
<body>
   <div class="box1"></div> 
   <div class="box2"></div>
   <div class="box3"></div>
</body>
</html>

外边距问题及解决方法

1.兄弟关系外边距塌陷问题

现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象

原因:并列关系的两个元素共用了一个外间距区域

解决办法:分别给这两个元素套一个父元素,并为父元素设置overflow:hidden

<!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .box,
        .box2{
            width: 200px;
            height: 200px;
             background-color: aqua;
        }

        .box{
            margin-bottom: 50px; 
        }

        .box2{
            background-color: blue;
            margin-top: 50px;
            
        }
        .father{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="father">
   <div class="box">box1</div>
   </div>
   <div class="father">
   <div class="box2">box2</div>
    </div>
</body>
</html>

2.父子关系外边距塌陷问题

现象:

1.元素嵌套关系,子元素的margin-top值会叠加给父元素

2.如果父元素也有margin-top值,会与子元素margin-top值合并,取两者较大值

原因:父元素和子元素共用一个上边距区域

解决方法:

1.为父元素设置上边距或上填充

2.为父元素设置overflow:hidden

3.转换思路:巧用padding

<!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>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: aqua;
            overflow: hidden;
            padding-top: 1px solid transrarent;
           margin-top: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: salmon;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>