实训第三天 css浮动定位与盒子模型

最新推荐文章于 2024-06-20 18:06:43 发布

公子卿辞

最新推荐文章于 2024-06-20 18:06:43 发布

阅读量434

点赞数 1

文章标签： css 定位 html

本文链接：https://blog.csdn.net/qq_45647409/article/details/117534647

版权

一.浮动
1.简介
（1）CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧
（2）float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动
（3）float 属性的常用值包括:
left 靠左浮动
right 靠右浮动
none 不浮动
clear:both ; 清除浮动2
2.练习——自适应

<!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>自适应</title>
    <style type="text/css">/* 左右浮动中间不浮动*/
    body,div {
        margin: 0;
        padding: 0;
    }
    div{
        height: 100px;
        text-align: center;
        font-size: 20px;
    }
    .left{
        float: left;
        width: 120px;
        margin-right: -3px;
        background: chartreuse; 
    }
    .right{
        float: right;
        width: 120px;
        margin-left: -3px;
        background: rgb(238, 98, 231); 
    }
    .center{
        background: skyblue;
        margin: 0 100px;
    }
    
    </style>
</head>
<body>
    <div class="left">第一个颜色的元素</div>
    <div class="right">第二个颜色的元素</div>
    <div class="center">第三个颜色的元素</div>
    
</body>
</html>

二.定位
1.简介
（1）CSS 中 position 规定了元素的定位方式
（2）CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置
（3）position 属性的可选值包括:
relative 相对定位：不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为此元素原文档流的位置
absolute 绝对定位：脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素(position不为static)，否则为Body文档本身
fixed 固定定位
static 默认值
三.盒子模型
1.简介
在HTML页面中，每一个元素都是一个规则的矩形，因此每一个元素都由一个盒子模型来表示，盒子模型由4个区域组成：
content box（内容区域）
padding box（内边距区域）padding定义元素边框与元素内容之间的空间(上、右、下、左)
border box（边框区域）border设置元素边框的：宽度、样式、颜色
margin box（外边距区域）margin 定义元素边框以外的空间(上、右、下、左)
margin :0 auto;css元素水平居中
在这里插入图片描述
2.练习–花样边框

<!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>花样边框</title>
    <style>
        body{
            position: fixed;
            left: 400px;
            right: 100px;

        }
     
        
        #box1{
            height: 600px;
            width: 600px;
            border: 2px dotted black;
            margin: 0px;
            padding: 30px;

        }
        #box2{
            height: 500px;
            width: 500px;
            border: 5px solid gray;
            margin: 25px;
            padding: 25px;


        }
        #box3{
            height: 400px;
            width: 400px;
            background: brown;
            border: 2px none rgb(206, 197, 197);
            margin: 25px;
            padding: 25px;


        }
        #box4{
            height: 300px;
            width: 300px;
            border: 2px dashed white;
            margin: 25px;
            padding: 25px;

        }
        #box5{
            height: 200px;
            width: 200px;
            border: 2px dashed white;
            margin: 25px;
            padding: 25px;

        }
        #box6{
            height: 100px;
            width: 100px;
            background:white;
            border: 7px solid black;
            margin: 25px;
            padding: 25px;

        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

效果：
在这里插入图片描述
总结：依旧有不足，继续努力呀！！