【CSS】浮动+定位

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元素高度),下面用图来说明一下高度坍塌:

img img

描述
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; 
}

image-20220729162052555

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>

image-20220729174818383

<!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>

image-20220729191215412

2.3、固定定位

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

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

粘性定位的元素是依赖于用户的滚动,在 position:relativeposition: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>

image-20220729191811602

2.4、z-index

image-20220729194323503

<!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>

image-20220729194640617

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值