Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型跟em
Blogger Information
Blog 8
fans 0
comment 0
visits 7581
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型跟em
杨向贤
Original
642 people have browsed it

盒模型

  1.    <style>
  2.       :root {
  3.         font-size: 62.5%;
  4.       }
  5.       .mydiv {
  6.         font-size: 2.6rem;
  7.         color: hotpink;
  8.         width: 20em;
  9.         height: 20em;
  10.         background-color: #6666;
  11.         display: inline-block;
  12.         background-clip: border-box;
  13.         background-clip: content-box;
  14.         /* ie盒子/怪异盒子 */
  15.         box-sizing: border-box;
  16.         /* 标准盒子 */
  17.         /* box-sizing: content-box; */
  18.         /* border: 1px solid #000; */
  19.       }
  20.       /* border 边框 */
  21.       .mydiv {
  22.         border-radius: 0.3em;
  23.         border-top: 0.5em solid #f00;
  24.         border-right: 0.5em solid #00f;
  25.         border-bottom: 0.5em solid #bbb;
  26.         border-left: 0.5em solid #0f0;
  27.       }
  28.       /* padding 内边距 */
  29.       .mydiv {
  30.         padding: 0.5em 1em 0.3em;
  31.       }
  32.       /* margin 外边距 */
  33.       .mydiv {
  34.         margin: 1em 0.8em 1em;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <div class="mydiv">盒子测试模型1</div>
  40.     <div class="mydiv">盒子测试模型2</div>
  41.   </body>

Css如何设置两种盒模型

标准盒子：box-sizing:content-box;
IE盒子：box-sizing:border-box;

标准模型和IE模型的区别

box-sizing: content-box;//宽度和高度分别应用到元素的内容框
box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒

标准盒子：盒子总宽度/高度 = width/height + padding + border + margin。（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ）

IE盒子：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

em实例演示

  1.   <style>
  2.       .box {
  3.         padding: 1em;
  4.         margin-bottom: 2em;
  5.         border-radius: 1em;
  6.         display: inline-block;
  7.         background-color: lightgray;
  8.       }
  9.       .box-small {
  10.         font-size: 1em;
  11.       }
  12.       .box-large {
  13.         /* 内外边距会根据字体大小自行调整 */
  14.         font-size: 1.2em;
  15.       }
  16.     </style>
  17.     <body>
  18.     <span class="box box-small">Small</span>
  19.     <span class="box box-large">Large</span>
  20.   </body>

em

Em是最常见的相对长度单位，是排版中使用的一种度量，是指指定的字体大小。CSS中，1 em表示当前元素的字体大小；它的确切值取决于要应用它的元素

通过使用em指定填充和边框半径来定义这些框的样式。通过给每个填充和边框半径设置1 em，可以为每个元素指定不同的字体大小，其他属性将随字体一起缩放。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：挺直观的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post