CSS中盒子模型的标准流定位原则是啥?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中盒子模型的标准流定位原则是啥?相关的知识，希望对你有一定的参考价值。
CSS中盒子模型的标准流定位原则是什么?
参考技术A LZ问题不是很明确，还是我太低端了？流定位我不清楚是什么意思，但是如果是采取绝对定位原则，被定位元素会根据绝对定位的属性出现在页面的某个位置，不会考虑其他元素的位置，可能重叠之类，但是如果采用相对定位，那么在HTML中会按照标签的书写顺序进行排列，顺序为从上到下，从左到右，若能容纳此元素，那么就会放在本行，如果放不下，就会挪到下一行，如此反复。 参考技术B 1：标准W3C盒子模型； 2：IE盒子模型（IE浏览器默认的模型）。在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分这两种不同的盒子模型。
1：标准W3C盒子模型
宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
2： IE盒子模型
宽=width+(border-left)+(border-right)
高=height+(border-top)+(border-bottom)
该模型是IE浏览器默认的盒子模型，当然也可以对其进行更改，在页面最上方加如下代码：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
精通css 高级web标准解决方案——可视化格式模型-定位模型
CSS 中有三种定位机制：普通流、浮动、绝对定位。（默认为普通流）
改变文档流：display: inline-block; （支持到ie8及以上）
1-匿名块框：
<div> 你好！ <p>廖阿丽！</p> </div>
这一块中的“你好”，属于匿名块框，因为它没有与专门定义的元素想关联。
2-相对定位
元素相对定位就是相对于它本来的位置来定位的。
<!DOCTYPE html> <html> <head> <title>css bug 测试</title> <meta charset = "utf-8"> <style type="text/css"> .box-left{ display: inline-block; width: 50px; height: 50px; background-color: red; } .box-middle{ position: relative; top: 10px; left: 20px; display: inline-block; width: 50px; height: 50px; background-color: green; } .box-right{ display: inline-block; width: 50px; height: 50px; background-color: pink; } </style> </head> <body> <div class="box-left"></div> <div class="box-middle"></div> <div class="box-right"></div> </body> </html>
元素相对定位后，它不管有没有进行top和left值的设置，也即是不管有没有进行移动，它都会占有着它原来的位置，移动后可能会覆盖其他元素。
3-绝对定位
概念：与相对定位不同的是，绝对定位的位置与文档流无关，，因此不占据空间。普通文档流中的其他元素就当不存在一样。
测试：代码如上相对定位代码所示，唯一不同的是把 position: relative; 换成了 position: absolute;
| 相对定位 | 绝对定位 |
.box-middle{
position: relative;
top: 10px;
left: 20px;
display: inline-block;
width: 50px;
height: 50px;
background-color: green;
}
|
.box-middle{
position: absolute;
top: 20px;
left: 20px;
display: inline-block;
width: 50px;
height: 50px;
background-color: green;
}
|
4-固定定位
支持到ie7以上，7部分支持
5-浮动
以上是关于CSS中盒子模型的标准流定位原则是啥?的主要内容，如果未能解决你的问题，请参考以下文章