box-sizing和定位原理

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

box-sizing

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

w3c标准盒子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-size属性</title>
    <style>
      .box {
        width: 12.5em;
        height: 12.5em;
        border: 2px solid #000;
        background-color: lightgreen;
        padding: 10px 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>hello php</h1>
    </div>
  </body>
</html>

效果图：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-size属性</title>
    <style>
      .box {
        width: 12.5em;
        height: 12.5em;
        border: 2px solid #000;
        background-color: lightgreen;
        padding: 10px 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>hello php</h1>
    </div>
  </body>
</html>

效果图：

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

相对定位和绝对定位

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

相对定位

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

选择器{
position:relative
}

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

绝对定位：

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

选择器{
position:absolute;
}

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

固定定位

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

选择器{
position:fixed;
}

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

相对定位演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位原理</title>
    <style>
      html {
        border: 1px solid #000;
      }
      .box {
        width: 20em;
        height: 15em;
        background-color: lightgreen;
        position: relative;
        top: 5em;
        left: 4em;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      父级定位元素
      <div class="box"><h2>hello php.cn</h2></div>
    </div>
  </body>
</html>

效果图：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位原理</title>
    <style>
      .box {
        width: 20em;
        height: 15em;
        background-color: lightgreen; 
        position: absolute;
        top: 5em;
        left: 4em;
      }
      .parent {
        border: solid 1px #000;
        position: relative;
        top: 4em;
        left: 4em;
        min-height: 30em;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      父级定位元素
      <div class="box"><h2>hello php.cn</h2></div>
    </div>
  </body>
</html>

效果图：

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

固定定位：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位原理</title>
    <style>
      .box {
        width: 20em;
        height: 15em;
        background-color: lightgreen;
        position: absolute;
        top: 5em;
        left: 4em;
      }
      .parent {
        border: solid 1px #000;
        position: relative;
        top: 4em;
        left: 4em;
        min-height: 30em;
      }
      .box {
        position: fixed;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      父级定位元素
      <div class="box"><h2>hello php.cn</h2></div>
    </div>
  </body>
</html>

效果图：

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

box-sizing

相对定位和绝对定位

相对定位

绝对定位：

固定定位

更多相关文章

随机推荐