【CSS-定位和浮动】

最新推荐文章于 2024-07-25 08:14:42 发布
最新推荐文章于 2024-07-25 08:14:42 发布
阅读量225 收藏 1
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/modest5/article/details/125929511
版权

1. display和浮动

1.1 display

块级元素：独占一行

h1~h6 p div 列表....

行内元素：不独占一行

span a img strong......

使用dispaly写一个界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="wrap">
    <!-- 头部 -->
        <header class="nav-header">
            <div class="head-contain">
                <a href="" class="top-logo"><img src="../img/1.jpeg" alt="" width="90" height="90"></a>
                <nav class="top-nav">
                    <ul>
                        <li><a href="">功能特权</a></li>
                        <li><a href="">游戏特权</a></li>
                        <li><a href="">生活特权</a></li>
                        <li><a href="">会员活动</a></li>
                        <li><a href="">成长体系</a></li>
                        <li><a href="">年费专区</a></li>
                        <li><a href="">超级会员</a></li>
                    </ul>
                </nav>
                <div class="top-right">
                    <a href="">登录</a>
                    <a href="">开通超级会员</a>
                </div>
            </div>
        </header>
    </div>
</body>
</html>


/*display:
    block 块元素
    inline 行内元素
    inline-block 是块元素，但可以内联，在一行
    none
*/

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    list-style: none;
}
/*.nav-header{*/
/*    height: 90px;*/
/*    width: 100px;*/
/*    background: rgba(0,0,0,6);*/
/*}*/
.head-contain{
    width: 1180px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
    background: gray;
}
.top-nav,.top-nav li ,.top-right {
    height: 90px;
    display: inline-block;
    vertical-align: top;
}

.top-nav{
    margin: 0 48px;
}
.top-nav li {
    line-height: 90px;
    width: 90px;
}
.top-nav li a{
    display: block;
    text-align: center;
    font-size: 16px;

}
.top-nav li a:hover{
    color: #C850C0;
}

.top-right a{
    display: inline-block;
    text-align: center;
    font-size: 16px;
    margin-top: 25px;
    border-radius: 35px;
    border: 1px solid #fad65c;
}
.top-right a:first-of-type{
    width: 93px;
    height: 38px;
    line-height: 38px;
    color: #fad65c;
}
.top-right a:first-of-type:hover{
    color: blueviolet;
    background: coral;
}
.top-right a:last-of-type{
    width: 140px;
    height: 40px;
    line-height: 40px;
    color: #fad65c;
}
.top-right a:last-of-type:hover{
    color: blueviolet;
    background: coral;
}

效果：
在这里插入图片描述

1.2 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
<div id="div1">
    <div class="layer1"><img src="../img/1.jpeg" alt="" width="90" height="80"></div>
    <div class="layer2"><img src="../img/d.jpeg" alt=""></div>
    <div class="layer3"><img src="../img/r%20(1).jpeg" alt=""></div>
    <div class="layer4">
        浮动的盒子
    </div>
</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#div1{
    border: 1px dashed #4158D0;
}
.layer1{
    border: 1px dashed coral;
    display: inline-block;
    float: left;
}
.layer2{
    border: 1px dashed coral;
    display: inline-block;
    float: right;
}
.layer3{
    border: 1px dashed coral;
    display: inline-block;
}
.layer4{
    border: 1px dashed coral;
    display: inline-block;
}

效果：
在这里插入图片描述

1.3. 0verflow及腹肌父级边框塌陷

clesr：

/*
    clear: right; 右侧不允许有浮动元素
    clear: left;  左侧不允许有浮动元素
    clear: both;  两侧不允许有浮动元素
    clear: none;
*/

腹肌边框塌陷问题的解决方案：

  1. 增加腹肌元素的高度：简单，但有了固定高度会被限制
#div1{
    border: 1px solid darkcyan;
    height: 800px;
}
  1. 增加一个空的div标签，清除浮动。代码中尽量避免空的div标签
<div class="clear"> </div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}
  1. overflow：简单，但下拉的一些场景避免使用
在父级元素中添加一个 overflow: hidden;
  1. 在父类中添加一个伪类：after . 推荐
#div1:after{
    content: '';
    display: block;
    clear: both;
}

1.4 小节

  • display：方向不可控，但没有边框塌陷问题
  • float：浮动起来会脱离标准文档流，要解决父级边框问题

2. 定位

2.1 相对定位

相对定位：position：relative
相对于原来的位置进行指定偏移，相对定位的话，它依然在标准文档流中，原来的位置会被保留。
方块定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="div1">
    <a href="" class="block1">链接1</a>
    <a href="" class="block2">链接2</a>
    <a href="" class="block3">链接3</a>
    <a href="" class="block4">链接4</a>
    <a href="" class="block5">链接5</a>
</div>

</body>
</html>

#div1{
    margin: 10px;
    padding: 5px;
    width: 300px;
    height: 300px;
    border: 1px solid dodgerblue;
}
a{
    width: 100px;
    height: 100px;
    font-size: 16px;
    background:salmon ;
    text-decoration: none;
    color: white;
    border: 1px solid salmon;
    display: block;
}
a:hover{
    background: #4158D0;
}

.block2{

    position: relative;
    left: 200PX;
    top: -100px;
}
.block3{
    position: relative;
    top: -10px;
}
.block4{
    position: relative;
    top: -110px;
    left: 200PX;
}
.block5{
    position: relative;
    top: -300px;
    left: 100px;
}

2.2 绝对定位

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行定位

相对于浏览器进行指定偏移，相对定位的话，它不在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border:  1px solid blue;
        }
        a{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-decoration: none;
            text-align: center;
            color: wheat;
            background: coral;
            font-size: 16px;
            display: block;
        }
        a:hover{
            background: #C850C0;
        }
        .a1{
            position: absolute;
            left: 200px;
        }
        .a2{
            position: absolute;
            top: 180px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="box">
        <a href="" class="a1">第一个盒子</a>
        <a href="" class="a2">第二个盒子</a>
        <a href="" class="a3">第三个盒子</a>
    </div>
</div>
</body>
</html>

2.3 固定定位fixed

使用fixed，不管怎么滑动页面，位置永远不变，用于固定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: #C850C0;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: #fad65c;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

2.4 z-index

z-index：默认是0.最高无线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="z-index.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../img/1.jpeg" alt="" width="300px" height="300px"></li>
        <li class="text">贫穷的本质</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 400px;
    height: 400px;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid salmon;

}

ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;

}

#content ul{
    position: relative;
}
.text{
    position: absolute;
    width: 200px;
    height: 25px;
    color: white;
    top: 250px;
    z-index: 1;
    background: #4158D0;
    /*背景透明度*/
    opacity: 0.5;

}
modest5
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3-定位和浮动
RedGuy_anluo的博客
01-06 2019
1、 css定位： 改变元素在页面上的位置 2、 css定位机制： 普通流：元素按照其在HTML中的位置顺序决定排布的过程 浮动： 绝对布局： 3、 css定位的属性: position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中 top/left/right/bot
css定位及定位和浮动的区别
YY的博客
09-16 1406
定位、定位的应用及定位与浮动的区别
CSS布局之浮动和定位
Bulut0907
02-06 4482
目录1. 浮动1.1 浮动元素的特性1.2 清除浮动1.2.1 额外标签法1.2.2 父盒子添加overflow属性1.2.3 父盒子添加after伪元素1.2.4 父盒子添加双伪元素2. 定位 1. 浮动 网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动 网页布局第二准则：先设置盒子大小，再设置盒子位置 1.1 浮动元素的特性 任何元素都可以浮动 浮动元素脱离标准流，不占用标准流的空间。所以会影响浮动的元素后面的标准流元素位置 一个盒子内的元素如果一个元素浮动，则所有元素应
CSS定位和浮动
m0_50555031的博客
05-20 1247
介绍CSS定位和浮动
CSS-浮动与定位
花城的博客
08-28 4742
CSS浮动. 父标签的塌陷问题及解决方法、溢出属性、CSS定位. 定位方法. 修改位置. 是否脱离文档流、z-index属性、透明度
HTML--CSS浮动与定位篇
wmy030921的博客
06-19 1147
HTML--CSS浮动与定位篇
前端学习第六天-css浮动和定位
weixin_55702682的博客
03-01 996
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动清除浮动的方式优点缺点额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差。父级overflow:hidden/auto/scroll;书写简单溢出隐藏父级after伪元素结构语义化正确。
CSS定位与浮动
m0_49034593的博客
08-18 2169
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
CSS基础学习之定位---流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
sinat_38505686的博客
05-04 726
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 流定位 浮动定位 相对定位 绝对定位 固定定位 流定位 页面中的块级元素框从上到下一个接一个地排列 每一个块级元素都会出现在一个新行中（比如p元素、div元素） 元素框之间的垂直距离是由框的...
CSS3定位和浮动详解
09-24
主要为大家详细介绍了CSS3定位和浮动的概念，以及实例代码讲解CSS3定位和浮动的使用方法，感兴趣的小伙伴们可以参考一下
css 相对定位 绝对定位 浮动 分析
09-25
相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下进行微调。当一个元素被设置为相对定位，通过`position: relative;`，我们可以使用`left`、`right`、`top`和`bottom`属性来调整元素相...
理解CSS浮动float、定位position
09-27
浮动(float)和定位(position)是CSS布局中的两个关键概念，它们在网页设计中扮演着重要角色，用于控制元素的位置和排列方式。 一、浮动(float) 浮动最初设计的目的是为了实现文本环绕图片的效果，但后来发展成为一种...
网站基本布局CSS
m0_46608027的博客
07-24 776
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css 作业 2
最新发布
没有 bug 的代码是不完美的！
07-25 645
写完了
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 272
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
CSS实现表格无限轮播
像鱼的博客
07-24 200
在React中，用CSS实现表格无线轮播
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1315
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
WebKit的CSS Aspect Ratio Box：重塑响应式设计
2401_85760095的博客
07-24 742
的属性，它允许开发者为元素定义一个理想的宽高比。在WebKit中，这个属性得到了良好的支持，使得开发者可以轻松实现响应式设计。属性在大多数现代浏览器中得到了良好的支持，包括基于WebKit的浏览器如Safari。属性是一个强大的工具，它可以帮助开发者在WebKit和其他现代浏览器中轻松实现响应式设计。属性对性能的影响通常很小，但在一些极端情况下，如大量使用或在性能受限的设备上，过度使用可能会对性能产生一定影响。在这个例子中，所有图片都将保持16:9的宽高比，并且宽度为100%。随着Web技术的发展，
CSS（四）——CSS Text(文本）
m0_62701594的博客
07-24 1312
颜色属性被用来设置文字的颜色。
css的定位和浮动属性
12-04
CSS的定位和浮动属性可以用来控制HTML元素的位置和布局。下面是它们的详细介绍： 1. 定位属性 定位属性包括：static、relative、absolute、fixed和sticky。其中，static是默认值，表示元素出现在正常的流中，不受top、bottom、left和right属性的影响；relative表示相对于元素本身的位置进行定位；absolute表示相对于最近的已定位祖先元素进行定位；fixed表示相对于浏览器窗口进行定位；sticky表示根据用户的滚动位置进行定位。 2. 浮动属性 浮动属性包括：left、right和none。浮动元素会脱离文档流，向左或向右移动，直到它的外边缘碰到包含它的元素或者另一个浮动元素的边缘为止。如果没有足够的空间，浮动元素会向下移动，直到它可以放置在页面上。 下面是一个例子，演示如何使用定位和浮动属性来布局HTML元素： ```html <!DOCTYPE html> <html> <head> <title>定位和浮动属性的例子</title> <style> .container { border: 1px solid black; padding: 10px; overflow: auto; } .box { width: 100px; height: 100px; margin: 10px; background-color: red; float: left; } .relative { position: relative; left: 50px; top: 50px; } .absolute { position: absolute; right: 50px; top: 50px; } .fixed { position: fixed; right: 50px; bottom: 50px; } .sticky { position: sticky; top: 0; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box relative"></div> <div class="box absolute"></div> <div class="box fixed"></div> <div class="box sticky"></div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值