HTML学习笔记——box

时间：2023-03-10 01:42:28
HTML学习笔记——box

1> HTML写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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">

    #box{

        width: 300px;

        border: 5px solid blue;

        margin: 0 auto;

        /*内边距*/

        /*padding: 0px;*/

        /*padding-top: 20px;

        padding-right: 40px;

        padding-bottom: 30px;

        padding-left: 50px;*/

        /*一个参数代表四个方向*/

        /*两个参数，第一个代表上下，第二个代表左右*/

        /*三个参数，第一个代表上面，第二个代表左右，第三个代表下面*/

        /*四个参数，代表上右下左*/

        padding: 20px 30px 100px;

    }

</style>

</head>

<body>

    <div id="box">

        盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型

    </div>

</body>

</html>

2>CSS写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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">

    *{

        /*内边距/外边距*/

        padding: 0px;

        margin: 0px;

    }

    #title{

        width: 500px;

        height: 200px;

        border: 4px solid blue;

        padding: 100px;

        background: #ccc;

        /*margin-bottom: 50px;*/

        float: left;

        /*margin-right: 100px;*/

    }

    #box{

        /*左右外边距和累加/上下外边距和合并*/

        width: 400px;

        height: 200px;

        border: 4px solid orange;

        background: #ccc;

        /*margin-top: 50px;*/

        float: left;

        /*margin-left: */

    }

</style>

</head>

<body>

    <h1 id="title">今天是星期一    </h1>

    <div id="box"></div>

</body>

</html>

相关文章