CSS应用盒实体模型案例解读

2021-01-20 05:40 jianzhan

盒子是CSS中的基本定义，大家必须应用它来配备元素的外型和文本文档的总体合理布局。

1. 为元素运用内边距

运用内边距会在元素內容和边距之间加上空白。大家能够为內容盒的每一个界限独立设定内边距，或应用 padding 简写特性在1条申明中设定全部的值。

假如应用百分标值特定内边距，百分数一直根包括块的宽度有关，高宽比不考虑到在内。下面编码展现了怎样为元素运用内边距。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {   
  8.             border:10px double black;   
  9.             background-color: lightgray;   
  10.             background-clip: content-box;   
  11.             width: 380px;   
  12.             padding-top: 0.5em;   
  13.             padding-bottom: 0.3em;   
  14.             padding-left: 0.8em;   
  15.             padding-right: 0.6em;   
  16.         }   
  17.     </style>  
  18. </head>  
  19. <body>  
  20. <div>  
  21.     <p>  
  22.         15岁的情况下再获得那个5岁的情况下喜爱的布娃娃，65岁的情况下终究有钱买25岁的情况下喜爱的那条裙子，又有甚么实际意义。   
  23.         甚么都可以以从头开始再来，仅有青春年少不可以。   
  24.         那末多事儿，跟青春年少绑在1起便是幸福，离去青春年少，便是傻冒。   
  25.     </p>  
  26. </div>  
  27. </body>  
  28. </html>  

在编码中，为盒子的每条边运用了不一样的内边距，从下面的实际效果图能够看出实际效果。另外，设定了 background-clip 特性，因而内边距地区不容易显示信息情况色调，这样能够突显内边距的实际效果。

还可以应用 padding 简写特性在1条申明中为4条边设定内边距。能够为这个特性特定1~4 个值。 假如特定4个值，那末它们各自意味着顶边、右侧、底边和左侧的内边距。假如省略1个值，则最好配搭计划方案以下：省略左侧的值，默认设置应用右侧的值；省略底边的值，默认设置应用顶边的值。假如只给1个值，则4条边的内边距全是这个值。

下面编码清单展现了怎样应用 padding 简写特性。这个示例中还加上了圆角边框，展现了怎样应用paddding以保证边框不容易在元素內容之上。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {   
  8.             border:10px solid black;   
  9.             background: lightgray;   
  10.             width: 380px;   
  11.             border-radius:1em 4em 1em 4em;   
  12.             padding: 5px 25px 5px 40px;   
  13.         }   
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <div>  
  18.     <p>  
  19.         15岁的情况下再获得那个5岁的情况下喜爱的布娃娃，65岁的情况下终究有钱买25岁的情况下喜爱的那条裙子，又有甚么实际意义。   
  20.         甚么都可以以从头开始再来，仅有青春年少不可以。   
  21.         那末多事儿，跟青春年少绑在1起便是幸福，离去青春年少，便是傻冒。   
  22.     </p>  
  23. </div>  
  24. </body>  
  25. </html>  

实际效果以下图所示，显示信息了访问器怎样显示信息编码中特定的圆角边框和内边距。

假如不设定内边距，边框就会绘图在文字上。设定内边距就可以保证內容和边框之间留出充足的室内空间，不容易出現这类状况。

 

2. 为元素运用外边距

外边距是元素边框和网页页面上紧紧围绕在它周边的全部物品之间的空白地区。紧紧围绕在它周边的物品包含别的元素和它的父元素。

跟内边距特性类似，即便是为顶边和底边运用内边距，百分标值是和包括块的宽度有关的。下面编码清单展现了怎样为元素加上外边距：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         img{   
  8.             border: 4px solid black;   
  9.             background: lightgray;   
  10.             width: 150px;   
  11.         }   
  12.         #second img { margin: 4px 20px;}   
  13.     </style>  
  14. </head>  
  15. <body>  
  16. <div>  
  17.     <div id="first">  
  18.         <img src="imgs/banana.png" alt="small banana">  
  19.         <img src="imgs/banana.png" alt="small banana">  
  20.     </div>  
  21.     <div id="second">  
  22.         <img src="imgs/banana.png" alt="small banana">  
  23.         <img src="imgs/banana.png" alt="small banana">  
  24.     </div>  
  25. </div>  
  26. </body>  
  27. </html>  

在编码中，下面的两个img元素，为其顶边和底边运用了4像素的外边距，为左侧和右侧运用了20像素的外边距。能够从下面的实际效果图中看到外边距紧紧围绕元素生产制造的空白地区，途中上面的两个img元素和下面的两个img元素分部显示信息的是设定外边距前后左右的img元素。

外边距有时无法显示，即便设定了某个外边距特性的值。比如，为 display 特性的值设定为 inline 的元素运用外边距的情况下，顶边和底边的外边距就不容易显示信息。

 

3. 操纵元素的规格

访问器会根据网页页面上內容的流设定元素的规格。有几条详尽标准是访问器在分派规格的情况下务必遵照的。应用规格有关的特性能够遮盖这些个人行为。

前3个特性的默认设置值全是 auto，意思是访问器会为大家设定好元素的宽度和高宽比。还可以是用长度值和百分标值显式特定规格。百分标值是依据包括块的宽度来测算的（解决元素的高宽比也是依据这个宽度来）。下面的编码清单展现了怎样为元素设定规格。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         div { width:75%; height: 100px; border: thin solid lightseagreen;}   
  8.         img { background: lightgray; border: 4px solid blueviolet; margin: 2px; height: 50%;}   
  9.         #first { box-sizing: border-box; width: 50%;}   
  10.         #second { box-sizing: content-box;}   
  11.     </style>  
  12. </head>  
  13. <body>  
  14.     <div>  
  15.         <img id="first" src="imgs/banana.png" alt="small banana">  
  16.         <img id="second" src="imgs/banana.png" alt="small banana">  
  17.     </div>  
  18. </body>  
  19. </html>  

上述示例编码中有3个重要元素，1个div元素包括了两个img元素。显示信息实际效果以下，展现了访问器怎样显示信息这些元素。

div元素是body元素的子元素。当将div元素的宽度表明为75%的情况下，意思是告知访问器将div的宽度设定为包括块（此处是body內容盒）宽度的75%，而无论其实际值是是多少。假如客户调剂了访问器对话框，body元素也会相应被调剂，以保证div元素的宽度一直body內容盒宽度的75%。

 

3.1 设定1定规格的盒子

前面示例中两个img元素设定了同样的高宽比值（50%），但两个照片的高宽比在显示屏上看起来不1样。这是由于应用box-sizing特性更改了在其中1个元素运用规格特性的地区。

默认设置状况下，宽度和高宽比是必须测算的，以后才可以运用到元素的內容盒。这里说的是假如设定了元素的高宽比特性是100px，那末显示屏上的真正高宽比便是100px，这也算到了顶边和底边的内边距、边框和外边距的值。box-sizing特性容许特定规格款式运用到元素盒子的实际地区，也便是不必须自身测算一些值。

 

3.2 设定最少和最大规格

可使用最少和最大有关特性为访问器调剂元素规格设定1定的限定。这让访问器针对怎样运用规格调剂特性有了1定的独立权。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         img {   
  8.             background: lightgray;   
  9.             border: 4px solid blueviolet;   
  10.             margin: 2px;   
  11.             box-sizing: border-box;   
  12.             min-width: 100px;   
  13.             width: 50%;   
  14.             max-width: 200px;   
  15.         }   
  16.     </style>  
  17. </head>  
  18. <body>  
  19.     <div>  
  20.         <img id="first" src="imgs/banana.png" alt="small banana">  
  21.     </div>  
  22. </body>  
  23. </html>  

在编码中，为1个img元素运用了mix-width 和 max-width特性，并将其出事了宽度设定为包括块的50%。这样访问器就有了1定灵便性来调剂图象规格，使其在编码中界定的最大规格和最少规格范畴内维持50%的关联。访问器会运用这类灵便性保存图象的高度，以下面的显示信息实际效果所示：

 PS:访问器对box-sizing特性的适用状况不尽相同。

 

4. 解决外溢內容

假如尝试更改元素的规格，很快就会抵达某1个点：內容太大，早已没法彻底显示信息在元素的內容盒中。这时候的默认设置解决方法是內容外溢，并再次显示信息。下面的编码清单建立了1个固定不动规格的元素，因为规格很小，没法显示信息在其中的內容。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {width: 200px;  height: 100px; border:medium double black;}   
  8.     </style>  
  9. </head>  
  10. <body>  
  11. <p>  
  12.     你的非常并不是由于你在自主创业，并不是由于你进了牛企，并不是由于你的牛offer，而是由于你便是你，确信自身的非常，确信自身的心里，英勇做好自己。   
  13.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  14. </p>  
  15. </body>  
  16. </html>  

编码中为p元素的width 和 height 特性特定了肯定值，最后显示信息在访问器中的显示信息实际效果以下图所示：

可使用 overflow 特性更改这类个人行为，下表列出了有关的 overflow 特性。

 

overflow-x 和 overflow-y 特性分部设定水平方位和竖直方位的外溢方法，overflow 简写特性可在1条申明中申明两个方位的外溢方法。下表展现了这3个特性将会的赋值。

 

下面编码展现了外溢特性的用法：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {width: 200px;  height: 100px; border:medium double black;}   
  8.         p:first-child { overflow: hidden;}   
  9.         p:last-child { overflow: scroll;}   
  10.     </style>  
  11. </head>  
  12. <body>  
  13. <p>  
  14.     你的非常并不是由于你在自主创业，并不是由于你进了牛企，并不是由于你的牛offer，而是由于你便是你，确信自身的非常，确信自身的心里，英勇做好自己。   
  15.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  16. </p>  
  17. <p>  
  18.     你的非常并不是由于你在自主创业，并不是由于你进了牛企，并不是由于你的牛offer，而是由于你便是你，确信自身的非常，确信自身的心里，英勇做好自己。   
  19.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  20. </p>  
  21. </body>  
  22. </html>  

 

5. 操纵元素的可见性

可使用 visibility 特性操纵元素的可见性。这个特性跟Javascript1起应用能建立1些较为繁杂的实际效果。其赋值以下：

下面的编码展现了怎样应用JavaScript和几个按钮元素更改元素的可见性。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         tr > th { text-align: left; background: gray; color: white;}   
  8.         tr > th:only-of-type { text-align: right; background: lightgray; color: gray;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <table>  
  13.     <tr>  
  14.         <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>  
  15.     </tr>  
  16.     <tr id="firstchoice">  
  17.         <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>  
  18.     </tr>  
  19.     <tr>  
  20.         <th>2nd Favorite</th><td>Oranges</td><td>Orange</td><td>Large</td>  
  21.     </tr>  
  22. </table>  
  23. <p>  
  24.     <button>Visible</button>  
  25.     <button>Collapse</button>  
  26.     <button>Hidden</button>  
  27. </p>  
  28. <script>  
  29.     var buttons = document.getElementsByTagName("button");   
  30.     for(var i = 0;i < buttons.length; i++){   
  31.         buttons[i].onclick = function(e){   
  32.             document.getElementById("firstchoice").style.visibility = e.target.innerHTML;   
  33.         }   
  34.     }   
  35. </script>  
  36. </body>  
  37. </html>  

collapse 值只能运用到表有关元素，如tr 和 td。

 

6. 设定元素的盒种类

display 特性出示了1种更改元素盒种类的方法，这要想会更改元素在网页页面上的合理布局方法。下表列出了display 特性容许的赋值。

 

6.1 了解块级元素

将 display特性设定为block值会建立1个块级元素。块级元素会在竖直方位跟周边元素有一定的差别。一般在元素前后左右置放换行符也能做到这类实际效果，在元素和周边元素之间生产制造切分的体会，就像文字中的段落。p元素表明段落，其默认设置款式承诺中就包含 display 特性取 block 值。但是block 值可运用到全部元素，其用法以下面编码所示：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { border: medium solid black;}   
  8.         span { display: block; border: medium double black; margin: 2px;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13. 你的非常并不是由于你在自主创业，并不是由于你进了牛企，并不是由于你的牛offer，而是由于你便是你，确信自身的非常，确信自身的心里，英勇做好自己。   
  14. <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>  
  15. </p>  
  16. </body>  
  17. </html>  

能够从下图看到span 元素的 display特性 是不是设定为 block 值的区别。

 

6.2 了解行内元素

将 display 特性设定为 inline 值会建立1个行内元素，它在视觉效果上跟周边內容的显示信息沒有差别。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { display: inline;}   
  8.         span { display: inline; border: medium double black; margin: 2em; width: 10em; height: 2em;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13. 你的非常并不是由于你在自主创业，并不是由于你进了牛企，并不是由于你的牛offer，而是由于你便是你，确信自身的非常，确信自身的心里，英勇做好自己。   
  14. <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>  
  15. </p>  
  16. </body>  
  17. </html>  

在上述编码中，为p元素和span元素另外应用了inline值，从下面的实际效果图能够看出运用款式后的实际效果：p元素和 span元素中的文字跟剩下文字沒有分开，都显示信息在1起。

应用 inline 值的情况下，访问器会忽视一些值，如 width、height 和margin 。上面的示例编码中，为span 元素界定的这3个特性的值都沒有运用到网页页面合理布局中。

 

6.3 了解行内-块级元素

将display 特性设定为 inline-block 值会建立1个其盒子混和了块和行内特点的元素。盒子总体上做为行内元素显示信息，这代表着竖直方位上该元素和周边的內容并排显示信息，沒有差别。但盒子內部做为块级元素显示信息，这样，width、height 和 margin 特性都能运用到盒子上。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { display: inline;}   
  8.         span { display: inline-block; border: medium double black; margin: 2em; width: 10em; height: 2em;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13.     15岁的情况下再获得那个5岁的情况下喜爱的布娃娃，65岁的情况下终究有钱买25岁的情况下喜爱的那条裙子，又有甚么实际意义。   
  14.     甚么都可以以从头开始再来，<span>仅有青春年少不可以。</span>那末多事儿，跟青春年少绑在1起便是幸福，离去青春年少，便是傻冒。   
  15. </p>  
  16. </body>  
  17. </html>  

 

6.4 了解插进元素

display 特性设定为run-in 值会建立1个这样的元素：其盒子种类取决于周边元素。

下面编码展现了1个邻近弟兄元素为块级元素的插进元素：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { display: block;}   
  8.         span { display:run-in; border: medium double black;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13.     By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices.   
  14. </p>  
  15. <span>  
  16.     There are lots of different kinds of fruit - there are over 500 varieties of banana alone.   
  17. </span>  
  18. <div>Hello </div>  
  19. </body>  
  20. </html>  

下面编码展现了1个邻近弟兄元素为行内元素的插进元素，改动上面p的CSS编码：

 p { display: inline;}

 

6.5 掩藏元素

将display特性设定为none值便是告知访问器不必为元素建立任何种类的盒子，也便是说元素沒有子孙后代元素。这时候元素在网页页面合理布局中不占有任何室内空间。

 

7. 建立波动盒

可使用 float 特性建立波动盒，波动盒会将元素的左侧界或右侧界挪动到包括块或另外一个波动盒的界限。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p.toggle {   
  8.             float: left;   
  9.             border: medium double green;   
  10.             width: 40%;   
  11.             margin: 2px;   
  12.             padding: 2px;   
  13.         }   
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <p class="toggle">  
  18.     15岁的情况下再获得那个5岁的情况下喜爱的布娃娃，65岁的情况下终究有钱买25岁的情况下喜爱的那条裙子，又有甚么实际意义。   
  19.     甚么都可以以从头开始再来，仅有青春年少不可以。那末多事儿，跟青春年少绑在1起便是幸福，离去青春年少，便是傻冒。   
  20. </p>  
  21. <p>  
  22.     你的非常并不是由于你在自主创业，并不是由于你进了牛企，并不是由于你的牛offer，而是由于你便是你，确信自身的非常，确信自身的心里，英勇做好自己。   
  23.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  24. </p>  
  25. <button>Left</button>  
  26. <button>Right</button>  
  27. <button>None</button>  
  28. <script>  
  29.     var buttons = document.getElementsByTagName("button");   
  30.     for (var i = 0; i <buttons.length; i++){   
  31.         buttons[i].onclick = function(e){   
  32.             var elements = document.getElementsByClassName("toggle");   
  33.             for(var j = 0; j < elements.length; j++){   
  34.                 elements[j].style.cssFloat = e.target.innerHTML;   
  35.             }   
  36.         }   
  37.     }   
  38. </script>  
  39. </body>  
  40. </html>  

 

阻拦波动元素层叠

假如设定了好几个波动元素，默认设置状况下，它们会1个挨着1个的层叠在1起。应用clear特性能够阻拦出現这类状况。clear特性能够特定波动元素的1个编写或两个编写不可以挨着另外一个波动元素。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p.toggle {   
  8.             float: left;   
  9.             border: medium double green;   
  10.             width: 40%;   
  11.             margin: 2px;   
  12.             padding: 2px;   
  13.         }   
  14.         p.clear {clear: left;}   
  15.     </style>  
  16. </head>  
  17. <body>  
  18. <p class="toggle">  
  19.     15岁的情况下再获得那个5岁的情况下喜爱的布娃娃，65岁的情况下终究有钱买25岁的情况下喜爱的那条裙子，又有甚么实际意义。   
  20. </p>  
  21. <p class="toggle clear">  
  22.     甚么都可以以从头开始再来，仅有青春年少不可以。那末多事儿，跟青春年少绑在1起便是幸福，离去青春年少，便是傻冒。   
  23. </p>  
  24.   
  25. <p>  
  26.     你的非常并不是由于你在自主创业，并不是由于你进了牛企，并不是由于你的牛offer，而是由于你便是你，确信自身的非常，确信自身的心里，英勇做好自己。   
  27.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  28. </p>  
  29. <button>Left</button>  
  30. <button>Right</button>  
  31. <button>None</button>  
  32. <script>  
  33.     var buttons = document.getElementsByTagName("button");   
  34.     for (var i = 0; i <buttons.length; i++){   
  35.         buttons[i].onclick = function(e){   
  36.             var elements = document.getElementsByClassName("toggle");   
  37.             for(var j = 0; j < elements.length; j++){   
  38.                 elements[j].style.cssFloat = e.target.innerHTML;   
  39.             }   
  40.         }   
  41.     }   
  42. </script>  
  43. </body>  
  44. </html>  

这里的编码示例是对前1个事例的简易拓展，只是加上了1个新的款式，为第2个p元素消除了左侧界的波动元素。从下面的实际效果图能够看出这个设定引发了网页页面合理布局的更改。（如今两个元素都波动在包括块的左侧界）

 第2个p元素的左侧界不容许挨着另外一个波动元素，因而访问器将这个元素已到了网页页面正下方。元素的右侧界沒有清晰，也便是说假如将两个p元素的float特性设定为right，它们在网页页面上還是会挨着。

以上这篇CSS应用盒实体模型案例剖析便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

原文详细地址：http://www.cnblogs.com/luka/archive/2016/07/19/5685363.html

为您推荐