定义

  • <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区域
  1. <style type="text/css">
  2. .out{
  3. background:red;
  4. width:100px;
  5. height:50px;
  6. padding:10px;
  7. border:5px solid black;
  8. }
  9. .in{
  10. background:yellow;
  11. width:100px;
  12. height:50px;
  13. }
  14. </style>
  15. <div class="out">
  16.     <div class="in">
  17.  
  18.      </div>
  19. </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，则外边距和外部的相合并，以外部的为准 
      1. <style type="text/css">
      2. * {
      3.   margin:0;
      4.   padding:0;
      5.   border:0;
      6. }
      7.  
      8. #outer {
      9.   width:300px;
      10.   height:300px;
      11.   background-color:red;
      12.   margin-top:20px;
      13.   border:4px solid green;
      14. }
      15.  
      16. #inner {
      17.   width:50px;
      18.   height:50px;
      19.   background-color:blue;
      20.   margin-top:10px;
      21.  
      22. }
      23.  
      24. </style>
      25. </head>
      26.  
      27. <div id="outer">
      28.   <div id="inner">
      29.   </div>
      30. </div>

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

      1. <style type="text/css">
      2. * {
      3.   margin:0;
      4.   padding:0;
      5.   border:0;
      6. }
      7.  
      8. #outer {
      9.   width:300px;
      10.   height:300px;
      11.   background-color:red;
      12.   margin-top:20px;
      13. }
      14.  
      15. #inner {
      16.   width:50px;
      17.   height:50px;
      18.   background-color:blue;
      19.   margin-top:10px;
      20.  
      21. }
      22.  
      23. </style>
      24. </head>
      25.  
      26. <body>
      27.  
      28. <div id="outer">
      29.   <div id="inner">
      30.   </div>
      31. </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. [cocos2d] 显示状态与文字

    前言: 对于显示数值与文字一般有三种方式可以使用: CCLabelTTF .CCLabelBMFont .CCLabelAtlas 详细区别可参考:cocos2d 中添加显示文字的三种方式(CCLab ...

  2. Unable to Rebuild JIRA Index

    Symptoms Accessing certain JIRA pages result in: SEVERE: Internal server error com.atlassian.jira.is ...

  3. 创建用于自定义SharePoint解决方案部署的Visual Studio项目

    转:http://soft.zdnet.com.cn/software_zone/2007/0903/488083.shtml 在基于SharePoint的开发中,我们通常会在WSS的TEMPLATE ...

  4. suse系统FTP问题

    1.修改FTP端口问题 在 这个配置文件中vi /etc/vsftpd.conf 添加 Listen_port=34 vi /etc/services ftp        21/tcp    # F ...

  5. python三元运算符

    在c.php里面,都有三元运算符,如:   a = b?c:d 意思是 b 的运算结果如果是True,那么整个表达式a就等于c,反之如果b的运算结果是False,那么a就等于d. 这样写起来简洁又高效 ...

  6. linux命令 cp 递归复制 带权限复制

    cp -r 递归复制源目录下所有文件及子目录 到 目标目录或文件 cp -p 把源文件或目录下的所具有的权限一同复制 到 目标目录或文件

  7. Bzoj 2120: 数颜色 && 2453: 维护队列 莫队,分块,bitset

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MBSubmit: 2645  Solved: 1039[Submit][Status][Discuss] ...

  8. MySQL linux二进制安装

    200 ? "200px" : this.width)!important;} --> 介绍 1.创建用户和目录 groupadd mysql useradd -r -g m ...

  9. iOS UILabel：宽度固定，自动高度显示全部文字

    desclabel.width = self.view.width - (leftOffset*2); desclabel.lineBreakMode = NSLineBreakByWordWrapp ...

  10. mvc分层的原理

    首先这是现在最基本的分层方式,结合了SSH架构.1.modle层就是对应的数据库表的实体类.2.Dao层是使用了hibernate连接数据库.操作数据库(增删改查).3.Service层:引用对应的D ...