<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里 ...
随机推荐
- 谈谈SpringMVC Validation
2016-10-12 19:26:08,897 [INFO ] [http-nio-8032-exec-1] HttpHeaderValidator:84 - HttpHeaderValidator. ...
- Android 窗口管理
一.概述 在Android系统中,从设计的角度来看,窗口管理系统是基于C/S模式的.整个窗口系统分为服务端和客户端两大部分,客户端负责请求创建窗口和使用窗口,服务端完成窗口的维护,窗口显示等. 在Cl ...
- pcDuino无显示器刷机与使用
准备工作: pcduino : 点此购买 一个可用的并且启用了DHCP的有线路由器. 连接pcduino与路由器的网线一根. 至少1张4G microSD卡,如果内存卡不大,可以用内存卡刷内核,用u盘 ...
- windows下 破解 Sublime Text3 和汉化
这货已经出到3了. windows下载,破解,使用方法: 一:破解 1: 去官网下载最新版本 http://www.sublimetext.com/3 2:下载破解器(SublimeTextKeyge ...
- [C# 网络编程系列]专题四：自定义Web浏览器
转自:http://www.cnblogs.com/zhili/archive/2012/08/24/WebBrowser.html 前言: 前一个专题介绍了自定义的Web服务器,然而向Web服务器发 ...
- eclipse 常用快捷键整理
1.整理代码的快捷键ctrl+shift + F 2.跳转代码行ctrl+L 3.可以列出所有快捷键 Ctrl+Shift+L
- MFC DialogBar 按钮灰色不响应
在MFC单文档加添加DialogBar,然后在DialogBar上添加按钮,会出现如下情况,单击无响应. 解决方案: 在 CSideDialogBar头文件和CPP文件里添加如下函数 afx_msg ...
- Codevs 3286 火柴排队 2013年NOIP全国联赛提高组 树状数组,逆序对
题目:http://codevs.cn/problem/3286/ 3286 火柴排队 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : ...
- Bzoj 1878: [SDOI2009]HH的项链 莫队
1878: [SDOI2009]HH的项链 Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 2717 Solved: 1363[Submit][Statu ...
- SRM 442(1-250pt, 1-500pt)
DIV1 250pt 题意:将一个数表示成质因子相乘的形式,若乘式所含数字的个数为质数,则称A为underprime.比如12 = 2*2*3,则含3个数字,是underprime.求A, B之间un ...