学习div容器

来源：互联网发布：淘宝包邮券怎么设置编辑：程序博客网时间：2024/06/01 23:04

1.什么是<div>标签

div标签可以理解为一个装载其他元素的容器。<div> 是一个块级元素，它的内容自动地开始一个新行， <span style="display:block">（不管该行是否能容纳下内容都自动换行显示另一个块级元素）。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

块级元素对应的是行内元素inline-block;若容器为行内元素，那么在容器中的所有内容在一行中排列，当一行不能完全容纳下内容是自动转到第二行排列。

div标签是成对出现的

    <div>            </div>

2.div 没有属性控制时，显示在页面上是看不见的，我们可以通过控制div的边框来显示div容器，设置容器的宽度width高度height

10px表示边宽，solid表示实线，#ff0000表示颜色;div 的宽度和高度计算的是内边距

3.div的margin属性

margin属性是控制div的外边距，即容器与容器之间的距离。margin有四个方向：margin_top(顶部)、margin_bottom(底部)、margin_left(左边)、margin_right(右边)。margin属性是在div容器向外圈出一片地区，已有的大小不改变。

当两个div设置的margin区域重叠时，显示效果为margin值大的覆盖margin值小的。

css控制的div样式代码：

   <style type="text/css">        .outer{            border: 10px solid #ff0000;            width: 500px;            height: 300px;            padding: 10px;            box-sizing: border-box;            padding-top: 20px;        }        .inner1{           text-align: center;            border: 10px solid #634eff;            padding-top: 20px;            margin-top: 20px;            margin-bottom: 20px;              }        .inner2{            text-align: center;            border: 10px solid #634eff;            margin-top: 10px;        }    </style>

div代码：

<body ><div class="outer">    <div class="inner1">北京欢迎你！ </div>    <div class="inner2">北京欢迎你！ </div></div></body>

结果图

4.div的padding属性

padding属性是容器边框与内容之间的距离。paddding有四个方向：paddding_top(顶部)、paddding_bottom(底部)、paddding_left (左边)、paddding_right(右边)。

没有padding属性的CSS样式

<style type="text/css">        .outer{            border: 10px solid #ff0000;            width: 500px;            height: 300px;        }        .inner1{            border: 10px solid #634eff;        }    </style>

div代码：

<div class="outer">    <div class="inner1">北京欢迎你！ </div>  </div>

显示结果图：

在.outer中添加 padding_top:20px;后显示效果如图:

padding在自己内部画出一片区域，并改变自己的大小。

5.div的box-sizing属性

box-sizing属性中包括border-box和content-box两个属性内容。

box-sizing: border-box;是容器div自身的大小不改变。容器的宽度和高度的计算公式为：height/width=border+padding+content；

box-sizing: content-box;改变容器自身的大小，不变的是内容的大小。容器宽度和高度的计算公式为：height/width=content。