Home >Web Front-end >CSS Tutorial >CSS floating float, positioning
CSS floating float, positioning
- 高洛峰Original
- 2017-02-27 09:33:121521browse
1. Floating float
I. Definition and rules
float defaults to none, corresponding to the standard stream. When float: left;, the element will move closer to the left side of its parent element and break away from the standard flow. At the same time, the width will no longer stretch to fill the parent container, but will be determined based on its own content.
II. Demonstration rules
Preparation code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body
{
margin: 0;
padding: 0;
}
#father
{
background-color: cyan;
/*父级p 没有定位 造成子p的margin-top传递给父级*/
position: absolute;
}
#father *
{
margin: 10px;
padding: 10px;
border: 1px dashed red;
}
#son1
{
}
#son2
{
}
#son3
{
}
</style>
</head>
<body>
<p id="father">
<p id="son1">#son1</p>
<p id="son2">#son2</p>
<p id="son3">#son3-son3son3son3</p>
<p>
这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
</p>
</p>
</body>
</html>
1. Add position:absolute to #father in the middle to eliminate unpositioned parent p The margin-top transfer problem, the relevant content is as follows
Solution to the margin-top transfer problem in nested p
In these two In the browser, there are two nested ps. If the padding value of the parent element of the outer p is 0, then the margin-top or margin-bottom value of the inner p will be "transferred" to the outer p.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p style="background-color:#FF0000;width:300px; height:100px">上部层</p>
<p style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->
<p style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</p>
</p>
</body>
</html>
Cause: The box does not obtain haslayout, causing margin-top to be invalid
Solution:
1. Add: overflow:hidden;# to the parent layer p ##2. Change the margin-top outer margin to padding-top inner margin;
3. The side where the margin overlaps the parent element has padding that is not 0 or a border that has a width that is not 0 and a style that is not none. .
Add p to the parent layer: padding-top: 1px;
4. Let the parent element generate a block formatting context. The following attributes can be implemented
* float: left/right
* position: absolute
* display: inline-block/table-cell (or other table type)
* overflow: hidden/auto
Add parent layer p: position: absolute;
can be seen that 1 and 2 are out of standard stream, son3 in the standard stream is treated as if they do not exist, so son3 replaces the original position of son1, and the left border of son1, the right border of son2 coincide with the left and right borders of son3
The answer is still son3. The rule is: What is written at the end of the html file will be squeezed out. In the html file, son3 comes after son2, so it is always son3 squeezes down first.
Displayed as
Add an empty p with margin-padding-border all 0 and clear both to support the parent p
III . clear清除浮动
如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.
二 . 定位position
position取值有static absolute relative fixed
1. static
这个是默认的,即标准流排下来,就是static定位方式.
2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩
<p id="backToTop">
回到顶部
</p>
#backToTop
{
width: 100px;
height: 50px;
background-color: red;
color: white;
cursor: pointer;
border-radius: 25px 0 0 25px;
padding-left: 20px;
text-align: center;
line-height: 50px;
position: fixed;
bottombottom: 80px;
rightright: 0;
}
显示效果
3. relative相对定位
相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量
4. absolute绝对定位
根据别的已定位元素进行定位,应用absolute规则的脱离标准流
1）、这个别的元素:
离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
2）、已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
Trick
只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.
三 . display
display取值有inline block none
设置为none，即可将其隐藏，像inline-block等新添加的
以上就是本文的全部内容，希望对大家学习CSS教程有所帮助。
更多CSS floating float, positioning相关文章请关注PHP中文网！