首页 web前端 html教程 后端程序员前端之路05盒子模型详解_html/css_WEB-ITnose

后端程序员前端之路05盒子模型详解_html/css_WEB-ITnose

Jun 24, 2016 am 11:23 AM

目录

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

          说明:由内而外依次是content、padding(内边距)、border(边框)、margin(外边距)。

          举个例子:一个快递车里放了许多快递包裹(盒子包装的),每个包裹里面又放了不同的东西。

          content:真正容纳其他东西的区域。比如快递车的content,就是那些包裹所处的那个空间;

                       而每个包裹的content,就是那些东西所处的空间。 

                        content里面可以放置 其他元素、文本、图片等

          border: 盒子的边框。比如快递车的那个铁皮,包裹外层的那个盒子。  

                        可以指定边框的颜色、粗细(width)、样式等。

          padding:content到border之间的距离。

          margin: 包裹和包裹之间的距离。这个距离可以是负的,因为可以相互叠加。

          注意事项:由于各个浏览器会对元素的margin、padding值进行不同值的初始化。

                        所以每次写样式时,需要对页面内涉及到的元素进行初始化。      

    /* 将当前页面内涉及的元素表签列出来 */body,div,span{ margin:0px; padding:0px;}
    登录后复制

    二、盒模型尺寸基准

    默认情况下,设置一个元素的width、height,其实设置的就是content的宽度和高度。

    Q:那这个元素的实际宽度、实际高度是多少呢?

    A:实际宽度=左margin + 左border + 左padding + content + 右padding + 右border + 友margin ;实际高度同理。

    Q:那么问题来了,我如果想直接设置某个元素的实际高度怎么办呢?

    A:CSS3新增加了一个属性box-sizing就是用来解决这个问题。它有三个值:content-box、border-box、inherit。

    content-box:就是通常的默认情况,指的是content的高度、宽度。

    border-box :字面意思不难看出,指的就是border以内(包含border)的高度、宽度。

    inherit:从父级元素继承box-sizing属性的值。

    三、使用浏览器的开发者工具,查看元素高(宽)度时,遇到的问题

    使用谷歌浏览器审查元素功能时,它会职能的提示出当前元素的高度、宽度。但经过计算元素的实际高度、宽度,发现与提示的信息不一致。

    <style> div { width: 200px; padding: 20px; border: 1px solid red; margin: 10px;                   }</style><div>文本内容</div>
    登录后复制

          通过计算得出,div的实际宽度= 10 + 1 + 20 + 200 + 20 + 1 + 10 = 262px;  

          而开发者工具展示出来的结果为242px,差了20px;

          

          通过调整不同参数,最后得出结论为: 审查元素计算出来的结果是不包括 margin值的。

             

     

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前 By 尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前 By 尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章标签

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

    如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

    如何使用HTML5表单验证属性来验证用户输入?

    如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

    如何高效地在网页中为PNG图片添加描边效果?

    HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

    HTML5中跨浏览器兼容性的最佳实践是什么?

    &lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

    &lt; meter&gt;的目的是什么。 元素?

    &lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

    &lt; datalist&gt;的目的是什么。 元素?

    &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

    &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?

    我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? 我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

    我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?

    See all articles