html的div位置特性的总结（float/position/x-index)

时间：2024-02-20 14:05:46

1，div的设置height和width是其内容的理论大小

1,为什么说内容的理论大小，因为实际内容如果比较大就会超出来。
通过设置overflow：hidden可以隐藏超出部分。


2,但对于其兄弟标签而言，认为他的占位大小=其理论内容大小+padding+border+margin。
如果实际内容超过其理论内容的大小，那么实际内容会和其兄弟标签重叠。
.html

<div id="d1">我是第一</div>
<div id="d2">
<div id="d3">我是第三（第二的子）</div>
<div id="d4">我是第四（第二的子）</div>
<div id="d5">我是第五（第二的子）</div>
<div id="d6">我是第六（第二的子）</div>
</div>
<div id="d7">我是第七个</div>

.css:

div {
    border: 5px solid red;
    width: 200px;
    height: 20px;
}
#d2 {
    width: 250px;
    height: 50px;
    border-color:blue;
}
#d3 {
    width: 300px;
    border-color:green;
}
#d7{
    width:150px;
    border-color:orange;
}
View Code

注意：

1，如果div的内容是div组合，那么实际内容的大小就是内部各个设置的div的大小的总和；

2，如果div的内容是文本，那么文本长度超过理论div的长度，文本内容会自动换行超出来。

注意：超出（挤出）的内容自动换行了，但是换行的位置占用原标签的部分位置。

换行的位置和原标签的border，padding，margin：

<div id="d7" style="padding:11px;margin:22px;">我是第七个我是第七个我是第七个我是第七个</div>
View Code

2,默认div的位置根据其文档中上个兄弟标签(如果没有兄弟就看父标签）的位置确定。

为什么说默认情况，特殊情况如下：
比如 float属性；position属性；x-index属性。

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

 html的float特性

简介：
1，float让元素漂浮起来，浮动元素之间不会重叠
2，其他元素占用浮动元素原有位置
3，浮动元素如果和其他元素重叠，但将其他元素的内容挤出浮动元素范围。

3，浮动让div元素脱离标准流，漂浮在标准流之上

<div id="d1">我是第一</div>
<div id="d2">
  <div id="d3">我是第三（第二的子）</div>
  <div id="d4">我是第四（第二的子）</div>
  <div id="d5">我是第五（第二的子）</div>
  <div id="d6">我是第六（第二的子）666666666</div>
</div>
<div id="d7">我是第七个我是第七个我是第七个我是第七个</div>
<div id="d8">我是第八个个</div>
<div id="d9">我是第九</div>

@charset "utf-8";
div {
    border: 5px solid red;
    width: 180px;
    height: 20px;
}
#d2 {
    width: 450px;
    height: 120px;
    border-color: blue;
}
#d3 {
    width: 500px;
    border-color: green;
}
#d7 {
    width: 150px;
    border-color: orange;
}
#d6{
    width:250px;
}
#d5 {
    border-color: yellow;    
    float: right;
}
View Code
浮动只能左右浮动。
浮动的位置：水平方向,基准点在父元素内左右浮动;垂直方向,在非浮动兄弟元素的下方左右浮动。

对其他元素的影响：

3.1，如果浮动到空白位置，那么其他元素安排位置时就当它不存在。

将d5向右浮动到空白位置，d6就当d5不存在，占用d5的位置。

#d5 {
    border-color: yellow;    
    float: right;
}

3.2，浮动元素浮动后的位置有其他元素，会将其他元素的内容挤开。

3.2.1，如果单个元素被重叠，元素的内容是文本，那么被重叠的文本内容会当作超出原元素的效果显示。（即自动换行显示）

#d5 {
    border-color: yellow;    
    float: left;
}

 3.2.2，如果多个元素被重叠，那么被挤出的内容，还是以原元素超出的效果自动换行显示。（多个元素超出的部分会混乱显示）

（原位置）

d2向左浮动，将d7,d8,d9的内容挤下去，并且都重叠了

（浮动后效果）

3.3，多个元素浮动

3.3.1，多个连续的元素浮动，会尽量排成一行，排不下去自动换行

全部向左浮动：

#d3,#d4 ,#d5,#d6 {
    border-color: yellow;    
    float: left;
}

d5，d6左浮动，d4右浮动：

#d5 ,#d6 {
    border-color: yellow;    
    float: left;
}
#d4{
    height:40px;
    float:right;
}

排序原则：

水平方向，如果有浮动元素，以上一个同方向浮动元素的尾部为基准；

垂直方向，如果有浮动元素，以已有浮动元素为基准。

 3.3.2，非连续浮动元素，浮动原因在同一个层，仍然遵循同一方尽量排成一排。

（原位置）

d4,d6向左浮动：水平方向，d6尽量和d4排成一行（并非严格一条直线）

#d4 ,#d6 {
    border-color: yellow;    
    float: left;
}

总结浮动：

1，简单来说，浮动让原本垂直排序的元素，浮动元素与浮动元素尽量水平排序。

2，浮动让被被重叠元素的内容挤开，
水平方向在元素范围内挤开，
垂直方向向下挤，如果元素范围不够大，会挤出到原本元素范围的下方，产生环绕效果

4，清除浮动效果

clear : none | left | right | both
 取值：
none  :  默认值。允许两边都可以有浮动对象
left   :  不允许左边有浮动对象
right  :  不允许右边有浮动对象
both  :  不允许有浮动对象

理解不允许哪边有浮动对象：

ps:并不是说哪边（哪个方向）的元素不浮动，而是通过改变自身位置（一般下移），让新位置那个方向没有浮动元素了

4.1，不允许左边有浮动对象

4.1.1，例子一

d1,d2都左浮动效果：

想要div2到div1的下方，那么通过设置div2的样式：clear：left，那么之后的效果：

4.1.1，例子二

d4,d5,d6左浮动如下效果：

设置d5清除左边浮动对象后效果：

#d5{
    clear:left;
}

 

 html的position特性

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

5，position的四个属性值：

1.relative
2.absolute
3.fixed
4.static
将根据top，right，bottom，left的值移动

5.1，relative

1，按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。
2，保留元素原有位置，其他元素位置保持不变

5.2，absolute

简介：
1，absolute让元素漂浮起来，其他元素占用其原来位置
2，absolute以其父元素有position属性的元素为定位，
如果没有该父元素，以浏览器窗口进行定位（这时候同等fixed效果)

详解：

position属性设为absolute后，不是按照浏览器窗口来进行定位的，实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，
且position的属性值为absolute或者relative时，
也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。

注意，到底以parent的哪个定位点来进行定位呢？
如果parent设定了margin，border，padding等属性，
那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，
也就是忽略padding，当然并不会忽略margin和border。

接下来的问题是，sub2的位置到哪里去了呢？
由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，
此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。

（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位

5.3，fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，
按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。

5.4，static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

总结position的属性特性：

relative,absolute，fixed特性：
相同点：
都浮动

不同点：
relative，以自身为移动坐标原点，保留原来位置，其他元素位置不变
absolute，以有position属性的父元素为移动坐标原点，其他元素占用其原位置
fixed，以浏览器为移动坐标原点，其他同absolute。

position和float的区别：
不同点：
float:浮动元素之间不重叠
相同点：
absolute/fixed和float原本位置被其他元素占用，但float会将重叠元素的内容挤开。

 

相关文章