你的位置:首页 > 软件开发 > 网页设计 > 后端程序员前端之路04

后端程序员前端之路04

发布时间:2016-03-23 15:00:10
目录图解盒模型尺寸基准使用浏览器的开发者工具,查看元素高(宽)度时,遇到的问题一、图解 说明:由内而外依次是content、padding(内边距)、border(边框)、margin(外边距)。 举个例子:一个快递车里放了许多快递包裹 ...

目录

  • 图解
  • 盒模型尺寸基准
  • 使用浏览器的开发者工具,查看元素高(宽)度时,遇到的问题

一、图解

后端程序员前端之路04

      说明:由内而外依次是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 (#换成@)。