相关

时间：2023-03-08 19:12:52

定义

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

用法

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

结构

<div>相关【盗用张图】

<div>相关
  • 从图中可以看出，<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>在页面放缩时始终居中：
    • 若<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>

      aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZcAAACdCAIAAAD36KKIAAADs0lEQVR4nO3bzWkeMQBF0SlxSko5LiLbr6BUYG/zY56zylyR8zgFCAQXtND144+9Xq93M7NDdqmYmR09FTOzs3fd961iZnburvu+fwuZipnZQfOiNLOzp2JmdvZUzMzOnoqZ2dlTMTM7eypmZmdPxczs7KmYmZ09FTOzs/d5xa5vFxD0dDGKUzE4ydPFKE7F4CRPF6M4FYOTPF2M4r6u2PsFPEnF9lQM6lRsT8WgTsX2VAzqVGxPxaBOxfZUDOpUbE/FoE7F9lQM6lRsT8WgTsX2VAzqVGzvL34gPX+Jn3j+BPCvqNieikGdiu2pGNSp2J6KQZ2K7akY1KnYnopBnYrtqRjUqdieikGdiu2pGNSp2J6KQZ2K7akY1KnYnopBnYrtqRjUqdieikGdiu2pGNSp2J6KQZ2K7akY1KnYnopBnYrtqRjUqdieikGdiu2pGNSp2J6KQZ2K7akY1KnYnopBnYrtqRjUqdieikGdiu2pGNSp2J6KQZ2K7akY1KnYnopBnYrtqRjUqdieikGdiu2pGNSp2J6KQZ2K7akY1KnYnopBnYrtqRjUqdieikGdiu2pGNSp2J6KQZ2K7V1vv07FoEbF9q7vP03FIEjF9lQM6lRsT8WgTsX2VAzqVGxPxaBOxfZUDOpUbE/FoE7F9lQM6lRsT8WgTsX2vq7Y41cI/zkV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV21MxqFOxPRWDOhXbUzGoU7E9FYM6FdtTMahTsT0VgzoV2/sAwb57iuMMEbwAAAAASUVORK5CYII=" alt="" />

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

      aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAACJCAIAAABYTe90AAACjElEQVR4nO3UQW0EAQwEweOP5IgcoEWQPIPAyahTrQJg+TGv53me5/l8Pl+SdNDLykg6zcpIus3KSLrNyki6zcpIus3KSLrNyki6zcpIus3KSLrNyki6zcpIus3KSLrNyki6zcpIus3KSLrt9X6/rYyku6yMpNusjKTbflbm9foa9PcXwK+JZmVgRjQrAzOiWRmYEc3KwIxoVgZmRLMyMCOalYEZ0awMzIhmZWBGNCsDM6JZGZgRzcrAjGhWBmZEszIwI5qVgRnRrAzMiGZlYEY0KwMzolkZmBHNysCMaFYGZkSzMjAjmpWBGdGsDMyIZmVgRjQrAzOiWRmYEc3KwIxoVgZmRLMyMCOalYEZ0awMzIhmZWBGNCsDM6JZGZgRzcrAjGhWBmZEszIwI5qVgRnRrAzMiGZlYEY0KwMzolkZmBHNysCMaFYGZkSzMjAjmpWBGdGsDMyIZmVgRrSflfn7F8M/F83KwIxoVgZmRLMyMCOalYEZ0awMzIhmZWBGNCsDM6JZGZgRzcrAjGhWBmZEszIwI5qVgRnRrAzMiGZlYEY0KwMzolkZmBHNysCMaFYGZkSzMjAjmpWBGdGsDMyIZmVgRjQrAzOiWRmYEc3KwIxoVgZmRLMyMCOalYEZ0awMzIhmZWBGNCsDM6JZGZgRzcrAjGhWBmZEszIwI5qVgRnRrAzMiGZlYEY0KwMzolkZmBHNysCMaFYGZkSzMjAjmpWBGdGsDMyIZmVgRjQrAzOiWRmYEc3KwIxoVgZmRLMyMCOalYEZ0awMzIhmZWBGNCsDM6JZGZgRzcrAjGhWBmZEszIwI5qVgRnRrAzMiGZlYEY0KwMzolkZmBHNysCMaFYGZkSzMjAj2jfzaljcB5MmBwAAAABJRU5ErkJggg==" alt="" />

  • 空元素，有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

相关文章