HTML---盒子模型

最新推荐文章于 2023-04-08 21:20:36 发布

机智的frank

最新推荐文章于 2023-04-08 21:20:36 发布

阅读量944

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/jian15093532273/article/details/79767561

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型的结构

<style type="text/css">
    #bigbox{
        height:300px;
        width:400px;
        background-color:#CC9966;
        border:5px solid #FFFF00; /*边框*/
    }
    #samllbox{
        height:100px;
        width:200px;
        background-color:#FF0000;
        border:5px solid #0000FF; /*边框*/
        padding:20px; /*填充,内容到边框的距离*/
        margin:30px; /*外边界,两个边框之间的距离*/
    }

</style>
<body>
    <div id="bigbox">
    大盒子
        <div id="smallbox">小盒子</div>
    </div>
</body>

盒子模型的浮动
浮动可以使列表失去换行
float:none,left,right 浮动
clear :both 清除浮动产生的影响

<style type="text/css">
    /*相当于水中的4块木板*/
    #box1{
        background-color:#33FFFF;
        width:100px;
        height:100px;
        margin-bottom:20px;
        float:
    }
    #box2{
        background-color:#FF3399;
        width:100px;
        height:100px;
        margin-bottom:20px;
    }
    #box3{
        background-color:#CC99FF;
        width:100px;
        height:100px;
        margin-bottom:20px;
    }
    #box4{
        background-color:#00CC99;
        width:100px;
        height:100px;
        margin-bottom:20px;
    }
</style>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
</body>

div+css
盒子居中显示

margin-letf:auto;
margin-right:auto;

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+css完成页面布局</title>

<style type="text/css">
    #topbox{
    width:500px;
    height:150px;
    background-color:#33FF99;
    margin-left:auto;/*居中显示*/
    margin-right:auto;
    text-align:center;
    }
    /*中间大盒子*/
    #middlebox{
    width:500px;
    height:300px;
    background-color:#FFCC99;
    margin-left:auto;
    margin-right:auto;
    }

    /*中间左边的盒子*/
    #middle_left_box{
    width:200px;
    height:300px;
    background-color:#660099;
    float:left;

    }

    /*中间右边的盒子*/
    #middle_right_box{
    width:300px;
    height:300px;
    background-color:#CC33CC;
    float:left;

    }

    #bottombox{
    width:500px;
    height:200px;
    background-color:#33CC66;
    margin-left:auto;
    margin-right:auto;
    }
</style>
</head>

<body>

    <div id="topbox">

        上边的盒子</br>
        <form>

            <p>用户名:<input type="text" size="20"/></p>
            <p>密&nbsp;码:<input type="password" size="20"/></p>
        </form>

    </div>
    <div id="middlebox">
        <div id="middle_left_box">中间左边的盒子</div>
        <div id="middle_right_box">中间右边的盒子</div>
    </div>

    <div id="bottombox">下边的盒子</div>
</body>