目录图解盒模型尺寸基准使用浏览器的开发者工具,查看元素高(宽)度时,遇到的问题一、图解 说明:由内而外依次是content、padding(内边距)、border(边框)、margin(外边距)。 举个例子:一个快递车里放了许多快递包裹 ...
目录
- 图解
- 盒模型尺寸基准
- 使用浏览器的开发者工具,查看元素高(宽)度时,遇到的问题
一、图解
说明:由内而外依次是content、padding(内边距)、border(边框)、margin(外边距)。
举个例子:一个快递车里放了许多快递包裹(盒子包装的),每个包裹里面又放了不同的东西。
content:真正容纳其他东西的区域。比如快递车的content,就是那些包裹所处的那个空间;
而每个包裹的content,就是那些东西所处的空间。
content里面可以放置 其他元素、文本、图片等。
border: 盒子的边框。比如快递车的那个铁皮,包裹外层的那个盒子。
可以指定边框的颜色、粗细(width)、样式等。
padding:content到border之间的距离。
margin: 包裹和包裹之间的距离。这个距离可以是负的,因为可以相互叠加。
注意事项:由于各个浏览器会对元素的margin、padding值进行不同值的初始化。
所以每次写样式时,需要对页面内涉及到的元素进行初始化。
/* 将当前页面内涉及的元素表签列出来 */body,div,span{ margin:0px; padding:0px;}
原标题:后端程序员前端之路04
关键词:前端
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。