首頁 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

    熱門文章

    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    1 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱門文章

    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    1 週前 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圖片添加描邊效果?

    &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

    &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

    使用IFRAME的安全性含義是什麼?如何減輕它們? 使用IFRAME的安全性含義是什麼?如何減輕它們? Mar 18, 2025 pm 02:51 PM

    使用IFRAME的安全性含義是什麼?如何減輕它們?

    我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? 我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? Mar 12, 2025 pm 04:08 PM

    我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素?

    HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

    HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

    如何有效地使用HTML鏈接進行導航和SEO? 如何有效地使用HTML鏈接進行導航和SEO? Mar 18, 2025 pm 02:39 PM

    如何有效地使用HTML鏈接進行導航和SEO?

    See all articles