Community Learn Tools Library Leisure
search
English
Home > List of blog posts > box-sizing和定位原理
Blogger Information
Blog 13
fans 1
comment 0
visits 9915
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
732 people have browsed it

作业内容：1. 理解 box-sizing功能并实例演示; 2. 理解相对定位与绝对定位，并实例演示他们的区别与联系

box-sizing

将w3c盒子转为IE盒子（一个盒子的宽高包含了padding和boder）使用 box-sizing:border-box
盒子大小是不算margin的，但是如果你要计算盒子宽度 还是要看margin的

w3c标准盒子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>box-size属性</title>
  8.     <style>
  9.       .box {
  10.         width: 12.5em;
  11.         height: 12.5em;
  12.         border: 2px solid #000;
  13.         background-color: lightgreen;
  14.         padding: 10px 10px;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div class="box">
  20.       <h1>hello php</h1>
  21.     </div>
  22.   </body>
  23. </html>

效果图：

盒子大小是224，内容区大小是200
如果变成IE盒子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>box-size属性</title>
  8.     <style>
  9.       .box {
  10.         width: 12.5em;
  11.         height: 12.5em;
  12.         border: 2px solid #000;
  13.         background-color: lightgreen;
  14.         padding: 10px 10px;
  15.         box-sizing: border-box;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="box">
  21.       <h1>hello php</h1>
  22.     </div>
  23.   </body>
  24. </html>

效果图：

盒子大小变成了200，内容区变成了176
所以说IE盒子计算盒子的宽高，会把它的padding和border都计算在内。
一般在开发的时候会在开头写一个初始化

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

相对定位和绝对定位

定位：将盒子定在某一个位置
定位= 定位模式 + 边偏移
position默认值是static 静态定位 就是没有定位。
边偏移 就是定位的盒子移动到最终位置，有top、bottom、left和right 4个属性

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：

  1. 选择器{
  2. position:relative
  3. }

特点：
1、它是相对自己原来的位置进行移动的。（移动位置的时候参照点是自己原来的位置）
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位：

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：

  1. 选择器{
  2. position:absolute;
  3. }

特点：
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3、绝对定位不再占有原先的位置（脱标）

固定定位

固定定位fixed
固定定位是元素固定于浏览器可视区的位置。主要场景：可以在浏览器页面滚动时元素的位置不会变
语法：

  1. 选择器{
  2. position:fixed;
  3. }

特点：
1、他以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
2、固定定位不在占有原先位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

相对定位演示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       html {
  10.         border: 1px solid #000;
  11.       }
  12.       .box {
  13.         width: 20em;
  14.         height: 15em;
  15.         background-color: lightgreen;
  16.         position: relative;
  17.         top: 5em;
  18.         left: 4em;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="parent">
  24.       父级定位元素
  25.       <div class="box"><h2>hello php.cn</h2></div>
  26.     </div>
  27.   </body>
  28. </html>

效果图：

它是相对自己原来的位置进行移动的。
绝对定位：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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: 20em;
  11.         height: 15em;
  12.         background-color: lightgreen; 
  13.         position: absolute;
  14.         top: 5em;
  15.         left: 4em;
  16.       }
  17.       .parent {
  18.         border: solid 1px #000;
  19.         position: relative;
  20.         top: 4em;
  21.         left: 4em;
  22.         min-height: 30em;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="parent">
  28.       父级定位元素
  29.       <div class="box"><h2>hello php.cn</h2></div>
  30.     </div>
  31.   </body>
  32. </html>

效果图：

绝对定位如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位，不占有原先位置。

固定定位：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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: 20em;
  11.         height: 15em;
  12.         background-color: lightgreen;
  13.         position: absolute;
  14.         top: 5em;
  15.         left: 4em;
  16.       }
  17.       .parent {
  18.         border: solid 1px #000;
  19.         position: relative;
  20.         top: 4em;
  21.         left: 4em;
  22.         min-height: 30em;
  23.       }
  24.       .box {
  25.         position: fixed;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="parent">
  31.       父级定位元素
  32.       <div class="box"><h2>hello php.cn</h2></div>
  33.     </div>
  34.   </body>
  35. </html>

效果图：

会发现它不会相对于父级元素进行定级了，只会相对于html进行定位了。

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