<div>相关
定义
- <div>是一个块级元素【会自动换行】
用法
- <div>可用于划分独立的一个块状区域，其内部内容显示在<div>的content部分内
结构
【盗用张图】
- 从图中可以看出，<div>结构上依次分为 content【内部内容】，padding【内边距】，border【边界】，margin【外边距】
- 注意点：
- 缩略写法：
padding:10px; —— 上下左右内边距均为10px
padding:5px 10px 7px; ——上为5px，左右为10px，下为7px
- border写法：
- 如：border:5px solid red; 依次为 border-width，border-style，border-color
- border写法：
- <div>大小问题：
- 若设定<div>width,height那么这个区域是包含content，padding，border，margin中的哪几个部分呢?
- —— <div>width,height 区域单指 content区域
- <div>大小问题：
<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>相关的更多相关文章
- DIV相关的操作总结
由于有时候需要做网站项目,遇到CSS的问题总是需要百度或者google一下,比较麻烦,索性今天就来总结一下,这里就拿div开刀先. DIV在HTML前端页面布局中,非常重要,我们经常遇到的问题是:DI ...
- 一个 div 实现扇形图（锥形渐变）
需要引用的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min ...
- 精通CSS+DIV基础总结(二)
上一篇我们已经总结了部分CSS+DIV相关知识,这篇我们接着总结,从下边几个方面学习一下: 一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置: 颜色的设置非常 ...
- 常见的页面效果，相关的js代码
1.焦点图 $(document).ready(function(){ var i=0; var autoChange= setInterval(function(){ if(i<$(" ...
- HTML&CSS——使用DIV和CSS完成网站首页重构
1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...
- HTML CSS + DIV实现排版布局
HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
- 制作宅基腐主页 && 制作个人简历--材料：BootStrap
宅基腐主页 主页分为四大板块:导航栏,轮播图,主页内容,相关信息. 导航栏:<nav>标签,class="navbar",navbar-inverse为反色,navba ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
随机推荐
- dump datafile block
Oracle dump datafile block有两种方式: 然后根据block id执行dump 命令: SQL> alter system dump datafile 4 block 2 ...
- Linux下压缩某个文件夹（文件夹打包）
tar -zcvf /home/xahot.tar.gz /xahottar -zcvf 打包后生成的文件名全路径 要打包的目录例子:把/xahot文件夹打包后生成一个/home/xahot.tar. ...
- bzoj1231
看到n<=16不难想到状压dp 我们用二进制表示前x个位置,哪些牛被已经被选过了 这里我们可以通过穷举二进制数的顺序来转移 所以二维就够了 ..] of longint; f:.. sh ...
- Delphi的BPL介绍和使用 转
了解BPL和DLL的关系将有助于我们更好地理解DELPHI在构件制作.运用和动态.静态编译的工作方式.对初学DELPHI但仍对DELPHI开发不甚清晰的朋友有一定帮助.BPL vs. DLL(原文ht ...
- B. Berland Bingo
Lately, a national version of a bingo game has become very popular in Berland. There are n players p ...
- 我记录综合系统学习研究之用户管理五（如何利用wojilu打造一个全新的SNS应用）
wojilu框架特别适合快速开发多用户分享内容应用,比如知乎,digg这类应用. 对于博客等用户程序,要有4个入口:1)用户展示入口(展示自己的应用) 2)用户后台管理入口(管理自己的应用) 3)聚合 ...
- java获取天气预报的信息
运行效果: 主要功能: 1,jsp页面输入省份和城市 根据条件获取当地的天气信息 2,java代码 利用第三方的省份和城市的路径地址 本工程主要实现java获取天气预报的信息步骤1,创建工程weath ...
- CodeFirst-数据迁移-Migration
http://www.cnblogs.com/haogj/archive/2012/02/17/2356537.html 1.安装最新NuGet 2.安装EntityFramework:在程序包管理器 ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- Theano FCN实现与训练经验与教训小结
NaN 计算softmax loss时要用numeric robust 的计算方式. softmax与 loss可能要分开计算. 得到前者的计算方式可以是常规方法. 但计算后者时要注意无穷大和NaN的 ...