css盒子

最新推荐文章于 2024-08-31 21:39:38 发布

向可爱低头～卍

最新推荐文章于 2024-08-31 21:39:38 发布

阅读量79

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_73310187/article/details/126840407

版权

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>

overflow详解

溢出元素

取值

overflow:visible 溢出显示,默认值

overflow:hidden 溢出隐藏

overflow:scroll 溢出显示滚动条,横向和纵向滚动条都显示

overflow:auto 自动,内容溢出时自动显示滚动条

overflow-x 水平方向

overflow-y 垂直方向

css背景

1.背景颜色 background-color

1.red

2.#000000

3.rgb

4.rgba

2.背景图像 background-image

url(路径)

默认值:背景图片位于元素左上角,在水平与垂直方向平铺

注:

背景图片与背景颜色的占位区域: content+padding+border

3.背景图像如何重复 background-repeat

repeat:重复

no-repeat:不重复

repeat-x:在水平方向上重复

repeat-y:在垂直方向上冲服

4.背景图像的起始位置 background-position

background-position:x,y

background-position:水平,垂直

background-position百分比

5.background简写

颜色背景图片如何重复起始位置

向可爱低头～卍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子

边框的宽度:border-width边框的线型:border-style1.solid 单实线2.double 双实线3.dashed 条状虚线4.dotted 点状5.none 无边框边框的颜色: border-color复合写法:border:宽度线型颜色。
复制链接

扫一扫