CSS—盒子模型(a)
来源:互联网 发布:linux 查看进程命令 编辑:程序博客网 时间:2024/05/15 23:49
CSS—盒子模型(a)
W3C组织,建议把所有网页上的对象都放在一个“盒子”中—盒子模型。
盒子模型主要适用于块级元素。
盒子模型主要定义元素的四个区域:内容,内边距,边框,外边距;分别对应元素的四个属性:content、padding、border、margin。
设计师,通过控制盒子的属性,进而完成网页设计。
盒子模型的在页面中所占的宽度是:左外边距+左边宽+左内边距+内容+右内边距+右边框+右外边距。
以上是盒子模型的定义,如果笔试问道,在画一个图,应该就可以了。
理解了盒子模型的构成,还需要知道如何为盒子模型的属性赋值,以控制盒子模型的大小位置。
- height、width
<style type="text/css"> div{ height: 100px; width: 100px; background: red; padding: 20px; border: 5px solid blue; } </style> <div> content </div>
如图,可以发现,在IE5.x版本height与width包括了border、padding、content。当新增padding值时,其实就是向内占据空间。
其他版本,height与width则只是指代content部分的大小。
【验证默认:height、width】
【观察】【结论】width自动占据整个父元素的宽度,高度根据自身内容而定。 margin、padding
定义:设置一个元素所有外边距的宽度。<style type="text/css"> body{ border: 1px solid red ;//目的:标识 } div{ height: 100px; width: 100px; background: red; border: 5px solid blue; } </style>
上面这三个对比是在不设置
margin
与padding
之后的对比图。
【验证:padding】*{padding:0;}
【观察】以上三个图没有变化。
【结论】浏览器未对body、div设置默认padding值。
【验证:margin】body{margin:0;}
【观察】
【结论】浏览器未对div设置margin,对body设置了margin,但是在IE5.xbody默认margin的方式有点诡异。当对IE5.x的body设置margin时,也是向内增加边距。
接下来设置分别设置margin、padding观察区别。
【设置:margin】div{margin:20px;}
【观察】
【结论】ie5.x内部div对于margin的设置与其对于父元素bodymargin的设置效果一样。IE6、7对于div下外边距的设置不是很好。IE8、及现代浏览器可以满足。
【设置:padding】body{padding:10px;}
【观察】
【结论】
对于padding的兼容还是不错的。
\
通过以上对于margin、padding的对比,我认为,学习设置之前,还是有必要了解一下,浏览器对于各个元素默认的padding、margin的设置。
这里有关于元素的默认边距值。实际上,在我们编写代码时,我还是建议body p ol ul form h1 h2 { padding: 0; margin: 0; }
尽可能将这些被设了默认边距的元素,进行初始标准化设置,有些人会问可以用通配符统一设置,效率低啊,原因之前介绍过啦。
【11.22日补充】
默认定位??情况下,margin的垂直外边距会相互重叠,元素之间的垂直间距,会等于=max((上)magin-bottom,(下)margin-top)
但是元素被设置了float后,与其他元素的垂直外边距不会重叠,元素之间的垂直间距,会等于=(上)magin-bottom+(下)margin-top
需要注意的是,以上的设置均是在普通流定位模型下的情况。关于定位,我马上就要写这一篇啦。
- CSS—盒子模型(a)
- CSS—盒子模型
- 【CSS】——盒子模型
- CSS——盒子模型
- CSS——盒子模型
- CSS — (盒子模型)
- 前端基础——CSS盒子模型
- 前端基础——CSS盒子模型
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- 气象数据库 Meteonorm v7.1.3 1CD
- 51页 17题输出2-n之间的所有素数
- Bash Shell编程
- CAD制图软件Corel.Corporation.CorelCAD.2015.v2015.0.1.22.MacOSX 1CD功能强大的CAD制图软件
- 解析Monte-Carlo算法(基本原理,理论基础,应用实践)
- CSS—盒子模型(a)
- 模具设计Cimatron E 12.0+Pixologic.ZBrush.v4R7.P3.MacOSX 1DVD工业级雕刻软件
- sublime text 快捷键
- Eclipse注释修改
- 辅助制造软件VERO SURFCAM 2014刀具路径轨迹
- CSS—定位
- Android private Libraries 下查看源码问题
- Oracle主键自增长出现ORA-04098
- Linux Shell常用技巧(五) awk编程