Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css之盒模型与定位
Blogger Information
Blog 41
fans 2
comment 0
visits 29316
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
639 people have browsed it

1.盒模型

  • 单位选择（px,em,rem）

    绝对单位：px
    相对单位：em，rem
    通常移动端开发使用相对单位，可以根据设备的视口宽度改变而自动适应。

（1）em与rem的区别
em：根据元素的上下文或者当前元素的字号大小(font-size:16px)进行绑定的，以确定em值的大小，是可以动态修改的，例如body和html标签，一般默认为16px，也就是16px为1em。
rem:根据元素的根元素的字号大小进行绑定，就不是根据上下文绑定了，一般确定了就不会更改。

  • 内边距和外边距（margin,padding）

    margin：也就是外边距，不影响盒子本身的大小，但是会影响盒子在页面中占据的空间大小。
    padding ： 内边距，在盒子外面增加距离，会影响盒子的大小

  • css初始化

    通常写style的时候都要做一个初始化，来做一个ie盒子（box-sizing : border-box）的转换和内外边距的清零。
    如果要查看内容区的盒子大小，可以使用box-sizing: content-box;转换成w3c标准盒子。

  1.   * {
  2.       margin: 0;
  3.       padding : 0;
  4.       box-sizing : border-box;
  5.     }

  • 视窗宽度vw 高度vh

    1vh等于视窗高度的1%
    1vw等于视窗宽度的1%

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vh / vm</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding : 0;
  10.             box-sizing : border-box;
  11.         }
  12.         /*视口 ： 可视窗口，手机端为了显示pc页面，默认为980px*/
  13.         .box {
  14.             width: 50vw;
  15.             height: 25vh;
  16.             background-color: red;
  17.             margin : 20px auto;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div class="box">
  25. </div>
  26. </body>
  27. </html>

2.相对定位与绝对定位

默认的是静态定位：position：static;也就是没有定位。

  • 相对定位：position:relative;相对于它在文档流的原始位置进行定位
  • 绝对定位：position：absolute;定位元素是脱离文档流的，它的定位位置可以通过设置定位父级的方式进行定位，父级定位没有设置父级的话默认是html，父级定位就必须是定位元素，一般用相对定位转换为定位元素。
  • 固定定位：position: fixed;永远相对于html进行定位

  • 定位元素：只要有非static的定位属性，就是定位元素。
    相对定位需要设置定位偏移量，才有效果，只要是定位元素，定位偏移量就有效果，所以相对定位是定位元素

  • 定位偏移量：top left right bottom
    演示实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         html {
  8.             border: 1px solid brown;
  9.         }
  10.        /* .box {
  11.             width: 10em;
  12.             height: 10em;
  13.             background-color: #63a35c;
  15.             !*相对定位*!
  16.             !*position: relative;*!
  19.             !*定位元素： 只要这个元素上有非static的定位属性，就是定位元素*!
  20.             !*定位偏移量*!
  21.             !*只要是定位元素，定位偏移量有效*!
  22.             !*相对于它在文档流中的原始位置进行定位*!
  24.             !*绝对定位脱离了文档流*!
  25.             !*文档流： 显示顺序于书写顺序一致*!
  26.             position: absolute;
  27.             top: 5em;
  28.             left: 3em;
  29.         }*/
  30.         .parent {
  31.             width: 20em;
  32.             height: 20em;
  33.             border: 1px solid red;
  34.             top: 1em;
  35.             left: 1em;
  36.             /*转为定位元素，作为绝对元素的定位父级*/
  37.             position: relative;
  38.         }
  39.         /*固定定位*/
  40.         .box {
  41.             position: fixed;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="parent">
  47.         <div class="box">
  49.         </div>
  50.     </div>
  52. <!--<h2>hello</h2>-->
  53. </body>
  54. </html>

3.块级元素如何居中

  • 行内元素居中

1.水平居中

  1. text-align : center;

2.垂直居中

  1.  line-height：标签的高度

  • 块级元素居中

    要注意的一点，页面的高度只受内容的影响

  • 使用绝对定位
    演示实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>绝对定位的应用 ：块级居中</title>
  6.     <style>
  7.         .box {
  8.             width: 20em;
  9.             height: 20em;
  10.             background-color: #63a35c;
  11.         }
  12.         /*行内元素*/
  13.         .box {
  14.             /*!*水平居中*!*/
  15.             text-align : center;
  16.             /*!*垂直居中*!*/
  17.             line-height: 20em;
  18.         }
  19.         .parent {
  20.             border: 1px solid red;
  21.             background-color: #0086b3;
  22.             width: 25em;
  23.             height: 25em;
  24.             position: relative;
  25.         }
  26.         .box {
  28.             /*布局的前提：页面宽度受限，高度是不受限的*/
  29.         }
  30.         /*使用绝对定位一步搞定块元素的垂直水平居中*/
  31.         .box {
  32.             /*约定定位*/
  33.             position: absolute;
  34.             top: 0;
  35.             left: 0;
  36.             right: 0;
  37.             bottom: 0;
  38.             /*定位空间*/
  39.             margin: auto;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45. <div class="parent">
  46.     <div class="box">
  47.         hello world!
  48.     </div>
  49. </div>
  51. </body>
  52. </html>

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