<div>相关

定义

  • <div>是一个块级元素【会自动换行】

用法

  • <div>可用于划分独立的一个块状区域，其内部内容显示在<div>的content部分内

结构

【盗用张图】

  • 从图中可以看出，<div>结构上依次分为 content【内部内容】，padding【内边距】，border【边界】，margin【外边距】
  • 注意点：
    • 缩略写法：   
                    padding:10px;                   —— 上下左右内边距均为10px                   
                    padding:5px 10px;             ——上下为5px，左右为10px                       
                    padding:1px 2px 3px 4px;  ——上为1px，右为2px，下为3px，左为4px 【顺时针】
                    padding:5px 10px 7px;       ——上为5px，左右为10px，下为7px
    • border写法：
      • 如：border:5px solid red; 依次为 border-width，border-style，border-color
    • <div>大小问题：
      • 若设定<div>width,height那么这个区域是包含content，padding，border，margin中的哪几个部分呢?
      • —— <div>width,height 区域单指 content区域

 

<style type="text/css">
.out{
background:red;
width:100px;
height:50px;
padding:10px;
border:5px solid black;
}
.in{
background:yellow;
width:100px;
height:50px;
}
</style>
<div class="out">
    <div class="in">
    
     </div>
</div>

结果：

                    


此外

  • 让一个页面中固定大小的<div>在页面放缩时始终居中：
    • 若<div style="margin-left:300px"> 
    • —— 则在放缩过程中margin-left会放缩，同时<div>区域大小等比例放缩，右边距被拉大，导致整体向左放缩
  • 正确方式：<div style="margin-left:auto;margin-right:auto;"> 
    • —— 使得该<div>区域始终居中显示
    • —— 若单<div style="margin-left:auto;">或单 <div style="margin-right:auto;"> 则区域向左上角/右上角放缩
  • 外边框会合并
    • 垂直的两个<div>之间的外边距，会合并。以最大外边距的那个值为共同的外边距
    • 包含的两个<div>,外面的<div>如无border，padding，只有margin，则外边距和外部的相合并，以外部的为准 
      <style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
  border:4px solid green;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;

}

</style>
</head>

<div id="outer">
  <div id="inner">
  </div>
</div>

    • <style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;

}

</style>
</head>

<body>

<div id="outer">
  <div id="inner">
  </div>
</div>

 

  • 空元素，有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
posted @ 2015-08-13 13:52  LWay  阅读(348)  评论(0)    收藏  举报