CSS的盒子模式和漂浮

最新推荐文章于 2023-07-05 22:49:12 发布

xdd_lmd

最新推荐文章于 2023-07-05 22:49:12 发布

阅读量662

点赞数

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

本文链接：https://blog.csdn.net/xdd_lmd/article/details/47485917

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css的盒子模型</title>
<style type="text/css">
    div{
        height: 200px;
        width: 200px;
    }
    #div_1{
        border-bottom:#F60 2px dashed;
        background-color:#F90;
        padding:20px 10px 20px 30px;  /*内边距*/
        margin: 10px;/*外边距*/
    }
    #div_2{
        background-color:#0CF;

    }
    #div_3{
        background-color:red;
    }
</style>
</head>
<body>
    <div id="div_1">
        第一个盒子11第一个盒子11
    </div>
    <div id="div_2">
        第二个盒子22
    </div>
    <div id="div_3">
        第三个盒子33
    </div>
</body>
</html>

这里写图片描述

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

div{
    border:#09F solid 1px;
    height:100px;
    width:200px;/**/
}
#div_1{
    background-color:#F90;
    float:left;/*让下面的div在该div的右边*/
}
#div_2{
    background-color:#0CF;
    float:left;/*让下面的div在该div的右边*/
}
#div_3{
    background-color:#3F0;8
    clear:left;/*禁止div的往左漂浮*/
}
</style>
</head>
<body>
    <div id="div_1">
        第一个盒子11第一个盒子11
    </div>
    <div id="div_2">
        第二个盒子22
    </div>
    <div id="div_3">
        第三个盒子33
    </div>
</body>
</html>

这里写图片描述

xdd_lmd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的盒子模式和漂浮

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>css的盒子模型</title><style type="text/css"> div{ height: 200px; width: 200px; } #div_1{
复制链接

扫一扫