div、盒子

最新推荐文章于 2025-05-31 14:06:44 发布

云纹铜禁

最新推荐文章于 2025-05-31 14:06:44 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40907938/article/details/88960897

本文详细介绍了HTML中的div布局及CSS样式设置，包括如何使用div元素进行页面布局、设置文字颜色、背景图片等。同时讲解了CSS盒子模型的组成部分如margin、border、padding及其对布局的影响，并展示了float属性在布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML的div布局在body中：

<body>
    <div id="container" style ="width:950px;">
        <div id="heading"style="width :400px;color :aqua; background :url(one.jpg)">
        <h1><b><i>第一节标题</i></b></h1>   
        </div>
        <div id="ending"style="width:300px;color:blue;background :url(one.jpg)">
           <h2>第二级标题~</h2>
        </div>
    </div>
</body>

盒子的布局：盒子是css，所以注重的是style，在head中。<style type="text/css">。
body{}里面的设定是全局的。也可以用{}在style中设定h1\h2\p的一些属性。（比如 color、font-family字体、line-height行间距…）
盒子包括的元素是：
1\ margin(含有 top\left\right\bottom)
2\ border(width\color\style…)
3\padding(top\left\right\bottom)
4\content

可以改变元素的值来是盒子的位置发生改变。
float可以使div class 按照要求排列整齐。float:left/right。

body 
    {
      
        font-family:Verdana ;
        line-height :1.6em;
        margin:0px;
    }

 h1{
        color:darkred;
    }

 .vs {
    width:30%;
    height:500px;
    border-width :1px;
    border-color:aqua;
    border-style :dotted;
    padding :5px;
    margin:0px;
    float :left;
    }