作业内容：1. 理解 box-sizing功能并实例演示; 2. 理解相对定位与绝对定位，并实例演示他们的区别与联系
将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进行定位了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
