margin-border-padding结构 + 内容content 组成盒模型
注意
赋值顺序,顺时针,上(top)->右(right)->下(bottom)->左(left)
----top(1)----->|| |left(4) right(2)| |<---bottom(3)----
赋值,一个值,四个值都是这个,如margin : 10px;
赋值,两个值,两个值赋给 top right,也就是前两个,然后,bottom = top , left = right赋值,三个值,分别赋值给 top right bottom,也就是前三个,然后left = right赋值,四个值,不用多说了...在各浏览器中的表示html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在浏览器开发人员工具中的表示</title> <style> body { margin: 0; background-color: cyan; } #test-div { padding: 10px; border: 5px dotted yellow; margin: 20px; background-color: red; }</style></head><body><div id="test-div"> 内部文字</div></body></html>
Chrome偏红的margin偏xx色的border(啥颜色,叫不出来)偏青色的padding偏蓝色的content
IE10,win8.1浏览器offset,见stackoverflow问题,说是用relative absolute改变之后的偏移,同chrome里的position
border : width(2px) color(green) style(dotted/dashed)
border-width/color/style 设置某一属性border-left : width color style 设置一边的属性结合起来可以border-left-style : dotted;
边框与背景对于IE,background = content + padding对于FF,background = content + padding + border小的差距,要注意
赋值规则,上面说了,总结起来就是:从top开始,顺时针,将N个值赋给前N个,其他的依据top-bottom left-right配对拷贝这个原则即可,对于一个值得,表示四个全都一样
body特殊的盒子,在默认的情况下,body会有若干px的margin,而且body的background会扩展到margin部分,也就是紧贴着浏览器,background-image 和 background-color都会这样,其他的盒子background最多也就是到border(FF下).
指在不使用其他的与排列、定位相关的特殊CSS规则时各种元素的排列规则。
div能包含span样式,反之而不能,即span不能包含div。
新闻热点
疑难解答