定义

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

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

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

<div>相关的更多相关文章

  1. DIV相关的操作总结

    由于有时候需要做网站项目,遇到CSS的问题总是需要百度或者google一下,比较麻烦,索性今天就来总结一下,这里就拿div开刀先. DIV在HTML前端页面布局中,非常重要,我们经常遇到的问题是:DI ...

  2. 一个 div 实现扇形图（锥形渐变）

    需要引用的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min ...

  3. 精通CSS+DIV基础总结(二)

    上一篇我们已经总结了部分CSS+DIV相关知识,这篇我们接着总结,从下边几个方面学习一下: 一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置: 颜色的设置非常 ...

  4. 常见的页面效果，相关的js代码

    1.焦点图 $(document).ready(function(){ var i=0; var autoChange= setInterval(function(){ if(i<$(" ...

  5. HTML&CSS——使用DIV和CSS完成网站首页重构

    1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...

  6. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

  7. 制作宅基腐主页 && 制作个人简历--材料：BootStrap

    宅基腐主页 主页分为四大板块:导航栏,轮播图,主页内容,相关信息. 导航栏:<nav>标签,class="navbar",navbar-inverse为反色,navba ...

  8. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  9. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

随机推荐

  1. Android Training精要（六）如何防止Bitmap对象出现OOM

    1.使用AsyncTask異步加載bitmap圖片避免OOM: class BitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> ...

  2. Learning WCF Chapter1 Creating a New Service from Scratch

    You’re about to be introduced to the WCF service. This lab isn’t your typical “Hello World”—it’s “He ...

  3. 知乎上关于c和c++的一场讨论_看看高手们的想法

    为什么很多开源软件都用 C,而不是 C++ 写成? 余天升 开源社区一直都不怎么待见C++,自由软件基金会创始人Richard Stallman认为C++有语法歧义,这样子没有必要.非常琐碎还会和C不 ...

  4. 非sqlite和nigix的开源c项目

    1.http://code.google.com/p/friso/ 一.friso中文分词器 Friso是使用c语言开发的一款高性能中文分词器,使用流行的mmseg算法实现.完全基于模块化设计和实现, ...

  5. Unity3D之Character Controller(CC)与GameObject的碰撞方法

    先来一部分网上常见的内容(略整理): --------------------分隔线---------------------- Unity3d中参与碰撞的物体分2种类型: 一.发起碰撞的物体. 二. ...

  6. Muduo源码库研究(笔记汇总)

    声明: 本人学习Muduo源码, 有些代码会对其进行精简, 加上本人的一些理解, 所以与作者的代码可能有些不同. 如有理解错误的地方欢指出. Muduo基础库-时间戳类 http://www.cnbl ...

  7. Bash字符串的处理

    # 定义几个变量用于测试目的 FILE_NAME="/usr/local/app/world.txt" TIME_NOW="`date +"%Y%m%d%H%M ...

  8. python yeild使用

    闲的蛋疼又想起之前看到的文章,想想还是拿来复习一遍写进博客里. 原文链接:https://www.ibm.com/developerworks/cn/opensource/os-cn-python-y ...

  9. EF多表查询方式

    5, 连接 可以的连接有Join 和 GroupJoin 方法.GroupJoin组联接等效于左外部联接,它返回第一个(左侧)数据源的每个元素(即使其他数据源中没有关联元素). using (var ...

  10. 日志配置log4j 打印线程号

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 # Set root logger level to WARN and a ...