CSS浮动、定位总结

最新推荐文章于 2024-07-26 21:34:02 发布

原创最新推荐文章于 2024-07-26 21:34:02 发布 · 2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #思维导图 #定位 #阿里巴巴

本文深入探讨了CSS中的浮动和定位概念，包括float属性的使用，如left和right，以及如何清除浮动。接着介绍了position属性，如relative、absolute和fixed的定位原理。文章通过实例代码展示了如何实现自适应布局和阿里巴巴注册页面的效果，最后提供了一份CSS思维导图帮助读者巩固理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS 浮动
1、 CSS 浮动属性简介
CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧
float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动
掌握CSS基础属性
float 属性的常用值包括:
left 靠左浮动
right 靠右浮动
none 不浮动

2、CSS 浮动应用
在这里插入图片描述
3、CSS 左右浮动
3.1html正常文档

3.2CSS 靠左浮动

4、CSS 清除浮动

（注意理解清除浮动后box的位置）

二、CSS定位
1、CSS 定位属性简介
CSS 中 position 规定了元素的定位方式
CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置
position 属性的可选值包括:
relative 相对定位
absolute 绝对定位
fixed 固定定位
static 默认值

2、CSS 相对定位
不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为此元素原文档流的位置
在这里插入图片描述
3、CSS 绝对定位
脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素(position不为static)，否则为Body文档本身

三、CSS完成《自适应布局》练习
1、实例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            
            .clearfix:after {
                clear: both;
                display: block;
            }
            .left {
                float: left;
                width: 110px;
                background:mediumpurple;
                height: 80px;
            }
            .right {
                float: right;
                width: 110px;
               background: palegreen;
                height: 80px;
            }
            .center {
                background:lightsalmon;
                margin-left: 110px;
                margin-right: 110px;
                height: 80px;
            }
        </style>
    </head>
    <body>
        <div class="wrap clearfix">
            <div class="left">第一个元素中的内容。</div>
            <div class="right">第二个元素中的内容</div>
            <div class="center">第三个元素中的内容</div>
        </div>
    </body>
</html>

2、实现效果
在这里插入图片描述

四、完成《阿里巴巴注册》练习
1、实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .first {
            height:110px;
        
            background-image: url(图片3.png);
        }
        .div1 {   
            margin-left:90px;
        }
        .last {
            height:70px;
            background-image: url(图片2.png);
        }

    </style>
</head>
<body>
    <div class="first"></div>
    <div class="div1">
        <form action=“#” method=“post”>
            <table align="center">
                <tr>
                    <td>电子邮箱： </td>           
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>会员登录名： </td>           
                        
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码： </td>           
                        
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>再次输入密码： </td>           
                        
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>会员身份：</td>           
                        
                    <td>         
                        <input type="radio" name=”gender" value="male" checked>买家
                        <input type="radio" name=”gender" value="male" checked>卖家
                        <input type="radio" name=”gender" value="male" checked>两者都是 </td>
                </tr>
                <tr>
                    <td>验证码： </td>           
                    <td><input type="text" name="username"><img src="图片4.png"width=70px height="22"><a href="#end1">看不清？换一张 </a></td>
                    
                </tr>
                <tr>
                   <td></td> 
                   <td><img src="图片1.png"/></td>

                </tr>
                <tr>
                    <td></td> 
                    <td> <textarea name= "myBrief" cols="40" rows="6">欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。
                    </textarea></td>
 
                </tr>
                <tr>
                    <td ><br><br><br><br><br><br></td>
                </tr>
                
                </table>

        </form>
    </div>

<div class="last"></div>
</body>
</html>