margin -------总结(block inline 可置换元素)
margin在块元素、内联元素中的区别
block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进,一些元素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block,像table这种display:table的元素也是block元素。
inline元素(内联元素)大致有:#PCDATA(即文本)| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
其中有类特殊的元素:如img|input|select|textarea|button|label等,他们被称为可置换元素(Replaced element)。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致(margin依旧可以影响到他的上下左右)。
margin在块级元素下,他的性能可以完全体现,上下左右任你设定。且记住块级元素的margin的参照基准:前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素,则就是相对于父元素的margin距离
(但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识)
margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。
不过margin-left/margin-right还是能够对内联元素产生影响的。
应用margin:10px 20px 30px 40px;,左边这个css如果写在inline元素上,他的效果大致是,上下无效果,左边离他相邻元素或者文本距离为40px,右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。
最后在内联元素中还有上文我们提到的非可置换inline元素(non-replaced element),这些个元素img|input|select|textarea|button|label虽然是内联元素,但margin依旧可以影响到他的上下左右!
margin外边距合并:(只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。)
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
两个垂直的元素就是兄弟元素:
.div1{
width:200px;
height:100px;
background-color:red;
border:1px solid red;
margin-bottom:20px;
}
.div2{
width:200px;
height:100px;
background-color:blue;
border:1px solid blue;
margin-top:30px;
}
<div class="div1"></div>
<div class="div2"></div>
div1和div2之间的间距是30px,去两者之间的最大者,不管两个元素是否有边框
两个div之间是父子关系:
如果两者之间没有border和padding。也会出现外边距合并的情况(否则不会出现外边距合并的情况)
根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。
只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行
.content{
width:600px;
margin: 0 auto;
border: 1px solid #000;
} .info{
margin-top:20px;
background-color: red;
width:200px;
height:100px; margin-bottom:20px;
}
.info1{
margin-top:30px;
background-color: blue;
border: 1px solid blue;
width:100px;
height:50px;
}
<div class="content">
<div class="info">
<div class="info1"></div>
</div>
</div>
父元素margin-top为30px,发生外边距合并的情况
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。
在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类。
top和left是以外元素为参考,right和bottom是以元素本身为参考。
margin的位移方向是指margin数值为正值时候的情形,如果是负值则位移方向相反。
总结下来margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,
而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。
BFC(Block Formatting Contexts ) 会阻止外边距折叠
- 浮动元素,float 除 none 以外的值
- 绝对定位元素,position(absolute,fixed)
- display 为以下其中之一的值 inline-blocks,table-cells,table-captions
- overflow 除了 visible 以外的值(hidden,auto,scroll)
总结参考:http://www.hicss.net/do-not-tell-me-you-understand-margin/
margin -------总结(block inline 可置换元素)的更多相关文章
- 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展
1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向 ...
- block, inline和inline-block的区别
display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- div横排放置对齐问题;block,inline,inline-block区别
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. 缺点:不易控制 2.只有左侧div设置为float:left,右侧div设置 ...
- block inline 和 inline-block
概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素). block元素通常 ...
- dispay属性的block,inline,inline-block
转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 bl ...
- display:block;inline;inline-block大总结
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- block,inline,inline-block的区别
最近正在复习,紧张地准备几天后的笔试,然后刚好看到这个地方. block:块级元素,会换行,如div,p,h1~h6,table这些,可以设置宽高: inline:行内元素,不换行,挤在一行显示 ...
- block,inline,inline-block区别
block:多個元素豎直排列,每個元素單獨占一行,寬高可以設置,padding.margin可以設置: inline:多個元素占一行,一行放不下了,才轉入下一行,寬高不能設置,水平的padding.m ...
随机推荐
- [转] SQL Server中变量的声明和使用方法
原文地址 SQL Server中变量的声明和使用方法 声明局部变量语法: DECLARE @variable_name DataType 其中 variable_name为局部变量的名称,DataTy ...
- 关于Lisp和函数式编程 & 各种语言对比 & TIOBE
上一篇文章提到了,今天又读到Lisp的一些内容 <为什么Lisp如此先进>ruanyifeng(Link).关于Lisp的八卦,可以参考我前面两篇文章 http://www.cnblogs ...
- 怎样提高hbase的入库性能
hbase写数据首先先写入memstore.当memstore满64MB以后,会flush到disk上而成为storefile.当storefile数量超过3时,会启动compaction过程将它们合 ...
- 用CSS美化你的HTML
CSS的简介: 1.CSS的定义:层叠样式表.属性和属性值用冒号分隔开,以分号结尾(这些符号都是英文的). 2.CSS得引入方式: 行内引入:<div style="这里写样式&quo ...
- CF 568A(Primes or Palindromes?-暴力推断)
A. Primes or Palindromes? time limit per test 3 seconds memory limit per test 256 megabytes input st ...
- 2015 Multi-University Training Contest 3--1011 Work
代码: #include<cstdio> #include<cstring> using namespace std; int n,k; int father[105],son ...
- CSDN-markdown编辑器之从线上导入Markdown文件
CSDN-markdown编辑器支持从线上导入Markdown文件的功能,假设你用其他支持Markdown的编辑器在网上写了博客文章或说明档,想公布到CSDN博客中,就能够使用本功能非常方便的完毕 ...
- Python调用C/Fortran混合的动态链接库--上篇
内容描述: 在32位或64位的windows或GNU/Linux系统下利用Python的ctypes和numpy模块调用C/Fortran混合编程的有限元数值计算程序 操作系统及编译环境: 32bit ...
- 图像处理之 opencv 学习---矩阵的操作
OpenCV的一些操作,如生成随机矩阵,高斯矩阵,矩阵相乘之类的 /*功能:说明矩阵的一些操作方法*/#include "cv.h"//该头文件包含了#include " ...
- List 调用 remove 方法时抛出 java.lang.UnsupportedOperationException 异常原因
原因 使用 Arrays.asList(arr) 转换的 List 并不能进行 add 和 remove 操作. Arrays.asList(arr) 返回的类型是 Aarrays$Arr ...