Home > Article > Web Front-end > Back-end coders talk about front-end (CSS) Lesson 7: Positioning and Floating_html/css_WEB-ITnose
Back-end coders talk about front-end (CSS) Lesson 7: Positioning and Floating_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:201121browse
1. Positioning:
1. Understanding of positioning
(1) Relative positioning
Relative positioning is a very easy concept to master . If an element is positioned relatively, it will appear where it is. You can then move the element "relative to" its origin by setting a vertical or horizontal position.
If you set top to 20px, the box will be 20 pixels below the top of its original position. If left is set to 30 pixels, then 30 pixels of space will be created to the left of the element, which will move the element to the right.
#box_relative { position: relative;
left: 30px;
top: 20px;
}
As shown below Shown:
Note that when using relative positioning, the element still occupies the original space regardless of whether it is moved or not. Therefore, moving an element causes it to cover other boxes.
(2) Absolute positioning
Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space. This is different from relative positioning, which is actually considered part of the normal flow positioning model because the element's position is relative to its position in the normal flow.
Other elements in the normal flow are laid out as if the absolutely positioned element did not exist:
#box_relative { position: absolute;
left: 30px;
top: 20px;
}As shown below:
The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, then its The position is relative to the original containing block.
The main issue with positioning is to remember what each positioning means. So, now let's review what we learned: relative positioning is "relative to" the element's initial position in the document, while absolute positioning is "relative to" the nearest positioned ancestor element, if no positioned ancestor exists element, then "relative to" the original containing block.
Note: Depending on the user agent, the initial containing block may be a canvas or HTML element.
Tip: Because absolutely positioned boxes are independent of document flow, they can cover other elements on the page. The stacking order of these boxes can be controlled by setting the z-index property.
2. CSS positioning properties
CSS positioning properties allow you to position elements.
(1) position
Place the element in a static, relative, absolute, or fixed position.
Attribute value:
(2) top, right, bottom, left
| 属性 | 描述 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
属性值：
（3）overflow
设置当元素的内容溢出其区域时发生的事情。
属性值：
（4）clip
设置元素的形状。元素被剪入这个形状之中，然后显示出来。
属性值：
（5）vertical-align
设置元素的垂直对齐方式。
属性值：
（6）z-index:设置元素的堆叠顺序。
属性值：
二、浮动
1、浮动的理解
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
2、CSS 浮动属性
float
属性值：
实例（把图像向右浮动）：
img
{ float:right;
}
3、来个实验吧！
示例1：（认识float的两种特性）
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<div style='float:left'><img src="image/1.jpg" ></div>
<div>
<div>
<div>
</div>
</body>
</html>
截图如是：
第一个dc6dce4a544fdca2df29d5ac0ea9906b:
第二个dc6dce4a544fdca2df29d5ac0ea9906b:
第一个dc6dce4a544fdca2df29d5ac0ea9906b去掉'float:left':
我们对比这几幅截图，可以得知以下几点：
- float具有“包裹性”。（所谓包裹性就是普通的div如果没有设置宽度，它会撑满整个屏幕，而如果给div增加float:left之后，它会把内容紧紧包裹起来。)【见图(第一个dc6dce4a544fdca2df29d5ac0ea9906b)与图(第一个dc6dce4a544fdca2df29d5ac0ea9906b去掉'float:left')的对比】
- float具有“破坏性”。（所谓破坏性就是设置了float属性的元素会脱离文档流。）【见图(第一个dc6dce4a544fdca2df29d5ac0ea9906b)与图(第二个dc6dce4a544fdca2df29d5ac0ea9906b)】
其实，如是解析仍感觉对float的“破坏性”描述的不太明白，好吧，再来个例子。看看float的本职工作。
示例2：（我生来是做文字环绕效果的！）
<!DOCTYPE html>
<html lang=“utf8”>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div>
<img src="image/1.jpg" style='float:left'>
哇咔咔，我生来是做文字文字环绕效果的！
</div>
</body>
</html>
去掉'float:left'的a1f02c36ba31691bcfe87b2722de723b元素：
带有'float:left'的a1f02c36ba31691bcfe87b2722de723b元素：
a1f02c36ba31691bcfe87b2722de723b元素去掉'float:left'时的dc6dce4a544fdca2df29d5ac0ea9906b元素：
a1f02c36ba31691bcfe87b2722de723b元素带有'float:left'时的dc6dce4a544fdca2df29d5ac0ea9906b元素：
其实 ，我一直想强调，但一直没能说清楚的是：