2021-07-17

最新推荐文章于 2024-09-30 21:15:00 发布

m0_56305452

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量63

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_56305452/article/details/118858953

版权

一、css浮动属性

什么是浮动：漂浮在页面的某个位置（有固定位置）

1、设置浮动：float：left（元素靠左边浮动） right（元素靠右边浮动） none（元素不浮动）

2、浮动的作用：就是让竖着排列的元素水平排列定义网页中其他文本如何环绕该元素显示

3、清除浮动：clear：none（允许有浮动对象） left（在该元素的左边不允许有浮动对象）

right（在该元素的右边不允许有浮动对象） both（不允许有浮动对象）

清除浮动只是改变元素的排列方式

5、特点：

（1）会让元素脱离文档流

（2）宽度不设置也不会继承父元素的宽度

（3）浮动属于半脱离状态：只能遮盖北京，不遮盖内容

（4）浮动的参照物为父元素

（5）左右浮动可以同时使用，例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 700px;
            border: 2px blue solid;
            background-color: white;
        }

        p {
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }

        .box2 {
            width: 450px;
            height: 600px;
            border: 2px gray dashed;
            margin-left: 24px;
            margin-top: 35px;
        }

           .yi{
            width: 120px;
            height: 30px;
            font-size: 20px;
            border: 2px black dashed;
            background-color: rgba(175, 170, 170, 0.842);
            margin-top: 10px;
            float: left;
            
        }
         .er{
            width: 80px;
            height: 30px;
            font-size: 20px;
            border: 2px black dashed;
            background-color: #13d35dd2;
            float: right;

        }
       .san{
            width: 200px;
            height: 30px;
            font-size: 20px;
            border: 2px black dashed;
            background-color: rgba(175, 170, 170, 0.842);
            float: left;
        }
        .si{
            width: 60px;
            height: 30px;
            font-size: 20px;
            border: 2px black dashed;
            background-color: #13d35dd2;
            float: right;
        }
        .wu{
            width: 180px;
            height: 30px;
            font-size: 20px;
            border: 2px black dashed;
            background-color: #13d35dd2;
            float: right;
            
        }
        .liu{
            width: 40px;
            height: 30px;
            font-size: 20px;
            border: 2px black dashed;
            background-color: rgba(175, 170, 170, 0.842);
            float: left;
        }
        .qi{
            width: 100px;
            height: 30px;
            font-size: 20px;
            border: 2px black dashed;
            background-color: #13d35dd2;
            float: right;
        }
        .box3{
            width: 450px;
            height: 50px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="box1">
        <p>
            <span>淘宝搞笑聊天记录</span>
        </p>
        <div class="box2">
            <div class="box3">
                <div class="yi">老板有货吗？</div>
            </div>
            <div class="box3">
                <div class="er">有！！！</div>
            </div>
            <div class="box3">
                <div class="san">这么凶，态度不够诚恳</div>
            </div>
            <div class="box3">
                <div class="si">我爱你</div>
            </div>
            <div class="box3">
                <div class="wu">态度够诚恳了吧！！</div>
            </div>
            <div class="box3">
                <div class="san">老板，你这有点吓人啊</div>
            </div>
            <div class="box3">
                <div class="liu">再见</div>
            </div>
            <div class="box3">
                <div class="si">纳尼？</div>
            </div>
            <div class="box3">
                <div class="qi">。。。。。</div>
            </div>
        </div>
    </div>
</body>

</html>

二、css盒子模型

（一）盒子模型的组成部分：

边框边界补白内容区

（二）外边届：margin

margin-top（设置上边界） margin-right（设置右边界）

margin-bottom（设置下边界） margin-left（设置左边界）

简写：margin 当后面有四个值的时候分别代表上右下左

当后面有三个值的时候：上左右下

当后面有两个值的时候：上下左右

当后面有一个值的时候：四个边界同时设置

margin：0 auto 一个有宽度的元素在浏览器中水平居中

margin的相关问题：