Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
Blogger Information
Blog 9
fans 0
comment 0
visits 8010
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
1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
扬cium
Original
583 people have browsed it

实例演示box-sizing属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>实例演示box-sizing属性</title>
  8.     <style>
  9.          /* 盒子的padding和border的像素会叠加到盒子的宽度和高度上，现在盒子的高度和宽度均为234px */
  10.       /* 因此我们在布局时需要精确计算好像素，不使其不注意时撑破父级元素。 */
  11.         .div1{
  12.             width: 10em;
  13.             height: 10em;
  14.             background-color: #D8BFD8;
  15.             padding: 2em;
  16.             border: 5px solid #F08080 ;
  17.         }
  18.         .div2{
  19.             width: 10em;
  20.             height: 10em;
  21.             background-color:     #FFB6C1;
  22.             padding: 2em;
  23.             border: 5px solid #6495ED ;
  24.             box-sizing: border-box;
  26.             /* 我们可以使用box-sizing属性就可以很好地解决这个问题 在此时 box-sizing: border-box;会将padding和border计算在盒子里面
  27.             此时盒子的高度和宽度均为160px
  28.             */
  29.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="div1">标准盒子模型</div>
  35.     <br>
  36.     <div class="div2">box-sizing盒子</div>
  37. </body>
  38. </html>

外边距 margin

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>外边距margin</title>
  7.     <style>
  8.         .box{
  9.             /* 盒宽 */
  10.             width: 10em;
  11.             /* 盒高 */
  12.             height: 10em;
  13.             /* 背景色 */
  14.             background-color: #F5DEB3;
  15.         }
  16.         .box{
  17.             /* padding内边距 */
  18.             padding: 1em;
  19.             /* border边框线 solid实线 green边框线颜色红色*/
  20.             border: 2px solid red;
  21.             /* 背景只裁切到内容区 让padding不被盒子内容覆盖*/
  22.             background-clip: content-box;
  23.         }
  24.         /* 使盒子大小不受宽高以外的因素影响 */
  25.         /* box-sizing 是否计算盒子padding和border的属性*/
  26.         .box{
  27.             box-sizing: border-box;
  28.         }
  29.         /* 水平方向margin累加；垂直方向margin折叠，margin大的覆盖margin小的  */
  30.         .box:first-of-type{
  31.             margin: 2em;
  32.         }
  33.         .box:first-of-type+* {
  34.             margin: 3em;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="box"></div>
  40.     <div class="box"></div>
  41. </body>
  42. </html>


padding是用来设置盒子的内边距，用来撑开盒子边框与内容的区域；
border是用来设置盒子的边框线，可以通过宽度、线的类型、颜色来控制边框；
盒子最终的宽高默认是通过设置的盒子宽高+盒子的内边距+边框宽度来计算的，box-sizing: border-box;的设置，通过压缩盒子的宽高，将内边距和边框线计算在内，不会撑开原有盒子的宽高
水平方向margin累加；垂直方向margin折叠，margin大的覆盖margin小的

常用元素居中方法：

1.行级元素：水平居中使用：text-align:center，垂直居中：line-height：父元素的高度
2.块级元素：水平居中：margin：0 auto；父元素不要给高度，让子元素的上下padding自动撑起来，例如：padding：2em 0;

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>常用元素居中方法</title>
  8.     <style>
  9.     .box {
  10.         width: 15em;
  11.         height: 15em;
  12.         border: 1px solid #000;
  13.         background-color: royalblue;
  14.     }
  15.     .box>p {
  16.         text-align:center;
  17.         color: #FFFFF0;
  18.         margin: 0;
  19.     }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <p>行内水平居中</p>
  25.     </div>
  26. </body>
  27. </html>

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>行内块水平居中</title>
  8.     <style>
  9.     .box {
  10.         width: 15em;
  11.         height: 15em;
  12.         border: 1px solid #000;
  13.         background-color: royalblue;
  14.     }
  16.     .box div {
  17.         width: 5em;
  18.         height: 5em;
  19.         background-color: #FFFACD;
  20.         margin: 0 auto;
  21.     }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="box">
  26.         <div></div>
  27.     </div>
  28. </body>
  29. </html>

水平且垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>水平且垂直居中</title>
  8.     <style>
  9.         /* 行内元素的水平且垂直居中 */
  10.         .box {
  11.             width: 15em;
  12.             height: 15em;
  13.             border: 1px solid #000;
  14.             box-sizing: border-box;
  15.         }
  17.         .box {
  19.             padding: 5em;
  20.         }
  22.         .box>div {
  23.             width: 5em;
  24.             height: 5em;
  25.             background-color: #EEE8AA;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <div class="box">
  32.         <div>PHP中文网</div>
  33.     </div>
  34. </body>
  36. </html>


通过 box-sizing: border-box;挤压设置和padding的挤压形成padding方式的水平垂直居中

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