【CSS】浮动+定位

最新推荐文章于 2024-07-24 11:13:53 发布

Cx陈

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量504

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/m0_68808168/article/details/126095182

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1、浮动
2、定位

1、浮动

1.1、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    block块元素
        inline行内元素
        inline-block是块元素，但是可以内联，在一行
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
        }
    </style>


</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

1.2、float

float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。

原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘

浮动的影响：

- 对附近的元素布局造成改变，使得布局混乱
- 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征
- 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度），下面用图来说明一下高度坍塌：

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。

CSS 中所有的浮动属性

“CSS” 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。

属性	描述	值
clear	指定不允许元素周围有浮动元素。	left right both none inherit
float	指定一个盒子（元素）是否可以浮动。	left right none inherit

1.3、overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

**注意:**overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

div {    
    width: 200px;    
    height: 50px;    
    background-color: #eee;    
    overflow: visible; 
}

float和display对比

display

方向不可以控制

float

浮动起来的话会脱离标准文档流

2、定位

2.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    相对定位-->
<!--    相对于自己原来的位置进行偏移-->
<!--    对于设定的方法，负号表示设定的方向移动-->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #4747D2FF;
            padding: 0;
        }
        #first{
            border: 1px dashed #ac6e6e;
            position: relative;
            top: 20px;   /*相对定位*/
        }
        #second{
            border: 1px dashed #480e0e;
            top: -20px;   /*相对定位*/
        }
        #third{
            border: 1px dashed #9ddc87;
        }
    </style>

</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    相对定位-->
<!--    相对于自己原来的位置进行偏移-->
<!--    对于设定的方法，负号表示设定的方向移动-->
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border:2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            color: blue;
        }
        .a2{
            position: relative;
            left:200px;
            bottom: 100px;
        }
        .a3{
            position: relative;
            left:100px;
            bottom: 100px;
        }
        .a4{
            position: relative;
            bottom: 100px;
        }
        .a5{
            position: relative;
            bottom: 200px;
            left: 200px;
        }
    </style>

</head>
<body>
<div id="box">
    <a href="#" class="a1" >链接1</a>
    <a href="#" class="a2" >链接2</a>
    <a href="#" class="a3" >链接3</a>
    <a href="#" class="a4" >链接4</a>
    <a href="#" class="a5" >链接5</a>
</div>
</body>
</html>

[外链图片转存中…(img-pITn2BDw-1659319089200)]

2.2、绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style>
        h2
        {
            position:absolute;
            left:100px;
            top:150px;
        }
    </style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

2.3、固定定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0px;
            bottom: 500px;
        }
    </style>
</head>

<body>
<div>div1</div>
<div>div2</div>
</body>

</html>

2.4、z-index

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style>
        img
        {
            position:absolute;
            left:0px;
            top:0px;
            z-index:-1;
        }
    </style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

Cx陈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【CSS】浮动+定位

float，css的一种属性，主要属性值为left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。原理使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。粘性定位的元素是依赖于用户的滚动，在。基于用户的滚动位置来定位。...
复制链接

扫一扫

专栏目录