Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 演示box-sizing属性，常见属性的居中
Blogger Information
Blog 16
fans 0
comment 0
visits 16735
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
演示box-sizing属性，常见属性的居中
刚哥哥
Original
609 people have browsed it

box-sizing属性：

开发者可以通过box-sizing属性设置当前页面使用哪种盒子模式，box-sizing有2个值，border-box;content-box;

1、border-box ：ie盒子模式，它包含padding和border，（把内边距和边框计算到内容区域）盒子不会被撑开。
2、content-box : w3c盒子，默认盒子样式，它不包含padding和border，（把内边距和边框计算在内容区域外）盒子会不撑开。

代码演示：

  1.  <title>实例演示box-sizing属性,可以由开发者选择使用哪种盒子模型</title>
  2.     <style>
  3.         .one{
  4.             border: 20px solid red;
  5.             width: 150px;
  6.             height:120px;
  7.             /* ie盒子模型，包含padding和border，盒子不会被撑开 */
  8.             box-sizing: border-box;
  9.             padding:5px;
  10.             background-color: violet;
  11.             margin:10px;
  12.             background-clip: content-box;
  13.         }
  14.         .two{
  15.             border:20px solid blue;
  16.             width:150px;
  17.             height:120px;
  18.             /* w3c盒子模型，（默认）不包含padding和border，盒子会被撑开 */
  19.             box-sizing:content-box;
  20.             background-color: skyblue;
  21.             margin:10px;
  22.             background-clip: content-box;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <p>1. 实例演示box-sizing属性; </p>
  29.     <div class="one">box-sizing</div>
  30.     <div class="two">box-sizing2</div>
  31. </body>

常用属性居中方式

1、table-cell
支持响应式，水平垂直居中

text-align:center 这个只能对行内元素进行水平居中，比如图片，文字，按钮，但是IE 6,7可以对任何元素居中；

2、line-height
如果只有一行文字，并且不多的情况下用，水平垂直居中；

3、margin 0 auto 加宽度
水平居中，利用margin自动计算，但是对于浮动和绝对定位元素无效；

4、绝对定位居中
父元素设置relative，子元素设absolute，同时上下左右设为0，margin设为auto ，要定义高宽；

演示代码

  1.   <style>
  2.         .one {
  3.             border: 20px solid red;
  4.             width: 150px;
  5.             height: 120px;
  6.             /* ie盒子模型，包含padding和border，盒子不会被撑开 */
  7.             box-sizing: border-box;
  8.             padding: 5px;
  9.             background-color: violet;
  10.             margin: 10px;
  11.         }
  13.         .two {
  14.             border: 20px solid blue;
  15.             width: 150px;
  16.             height: 120px;
  17.             /* w3c盒子模型，（默认）不包含padding和border，盒子会被撑开 */
  18.             box-sizing: content-box;
  19.             background-color: skyblue;
  20.             margin: 10px;
  22.         }
  24.         .three {
  25.             border: 1px red solid;
  26.             width: 200px;
  27.             height: 50px;
  28.             text-align: center;
  29.             line-height: 50px;
  30.         }
  32.         .four{
  33.             /* span不支持定义宽和高，它的宽和高是由内容尺寸决定的 */
  34.             width:300px;
  35.             height:100px;
  36.             border: 1px red solid;
  37.             font-size:100px;
  38.             }
  39.         .five{
  40.             margin:20px;
  41.             width:200px;
  42.             height:200px;
  43.             border:2px solid blue;
  44.         }   
  45.         .five>div{
  46.             width:50px;
  47.             height:50px;
  48.             background-color: red;
  49.             /* 让它居中 */
  50.             margin:75px auto;
  52.         } 
  53.     </style>
  54. </head>
  56. <body>
  57.     <p>实例演示常用的元素居中方式 </p>
  58.     <div class="one">box-sizing</div>
  59.     <div class="two">box-sizing2</div>
  60.     <div class="three">块元素的居中div3</div>
  61.     <span class="four">块元素的居中pp</span>
  62.     <div class="five">
  63.         <div>内嵌div</div>
  64.     </div>
  66. </body>
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