Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS重点之盒模型和定位技术
Blogger Information
Blog 24
fans 1
comment 0
visits 20865
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
CSS重点之盒模型和定位技术
知行合一
Original
621 people have browsed it

CSS的盒模型和定位技术是CSS中的重点，可以说绝大多数的网页都是通过盒模型和定位来实现布局的。

盒模型的四个属性

CSS盒模型

  • content:内容
  • padding:内边距。有上右下左四个内边距，可单独设置。如padding-top(上内边距)，padding-right(右内边距），padding-bottom(下内边距)，padding-left(左内边距)。
  • border:边框。有上右下左四个边框，可单独设置,
  • margin:外边距 有上右下左四个外边距，可单独设置。

两个不同的盒模型

  • 标准盒模型下盒子的大小 = content（width） + padding + border + margin
  • IE盒模型下盒子的大小 = width（content + border + padding） + margin
    通过 box-sizing可以进行模型方式转换。
    box-sizing:border-box; 以IE盒模型进行计算
    box-sizing:content-box; 以标准盒模型进行计算

    标准盒模型案例

    IE盒模型案例

    代码如下

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style type="text/css">
    7.       *{ margin: 0; padding: 0; }
    8.       body{ background: #ccc; } 
    9.       div{ width: 200px;
    10.           height: 100px;
    11.           border: 2px solid green;
    12.           padding: 50px;
    13.           margin: 50px; }
    14.       .one{ box-sizing:  content-box;}/*第一个盒子以标准盒模型计算*/
    15.       .two{ box-sizing: border-box; }/*第二个盒子以IE盒模型计算*/
    16.       </style>
    17. </head>
    18. <body>
    19.   <div class="one"></div>
    20.   <div class="two"></div>
    21. </body>
    22. </html>
    推荐大家以后都加上通用代码，都以IE盒模型计算，如。
    *{ margin: 0; padding: 0; box-sizing:border-box}

    块级元素水平垂直居中

    使用两种方法来实现垂直居中

    利用表格方法

    表格方法垂直居中
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>盒子垂直居中2</title>
    6.   <style>
    7.   * {
    8.       margin: 0;
    9.       padding: 0;
    10.   }
    11.   .box {
    12.       border: 1px solid #333;
    13.       width: 400px;
    14.       height: 200px;
    15.       margin: 0 auto;
    16.          /*利用表格方法,下面两行是重点*/
    17.       display: table-cell;     
    18.       vertical-align: middle;
    19.   }
    20.   .box1 {
    21.       width: 150Px;
    22.       height: 100px;
    23.       background-color: #C00;
    24.       margin: 0 auto; /*水平居中*/
    25.   }
    26.   </style>
    27. </head>
    28. <body>
    29.   <body>
    30.       <div class="box">
    31.           <div class="box1"></div>
    32.       </div>
    33.   </body>
    34. </html>

    利用定位

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>盒子垂直居中1</title>
    6.   <style>
    7.   * {
    8.       margin: 0;
    9.       padding: 0;
    10.   }
    11.   .box {
    12.       border: 1px solid #333;
    13.       width: 400px;
    14.       height: 300px;
    15.       position: relative;
    16.       margin: 0 auto; /*大盒子水平居中*/
    17.   }
    18.   .box1 {
    19.       width: 150Px;
    20.       height: 100px;
    21.       background-color: #C00;        
    22.       position: absolute;       
    23.      top:0;
    24.      left:0;
    25.      bottom:0;
    26.      right: 0;
    27.      margin:auto;
    28.   }
    29.   </style>
    30. </head>
    31.   <body>
    32.       <div class="box">
    33.           <div class="box1"></div>
    34.       </div>
    35.   </body>
    36. </html>

建议大家使用第二个水平垂直居中方法，很好用哦！ 盒模型和定位是CSS的重中之中，用处最为广泛，大家一定要深刻掌握！

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