初识HTML(三)---div块级元素以及浮动和定位
代码哈士奇 124 2

div块级元素

div是一个特别重要的标签 是块级元素 上代码,看图! 手册

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 600px;height: 600px;background-color: black;">
            <div style="width: 500px;height: 500px;background-color: red;">
                <div style="width: 400px;height: 400px;background-color: green;"></div>
            </div>
        </div>
    </body>
</html>

在这里插入图片描述)可以看到我们定义的样式是三个正方形的块style(css)后面会细讲 style="width: 600px;height: 600px;background-color: black; 分别对应宽高和背景色

那么分块有什么用呢 切割成不同的块互不干扰 方便定位和布局

<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>

效果如下 在这里插入图片描述可以看出div其实自带了换行效果

但是如果我们需要第一行有两个块怎么办呢

浮动和定位

浮动 常见为左右浮动 float: left/right 大家看出来英语很重要了吧 用法如下

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 100px;height: 100px;background-color: black;float:right;"></div>
        <div style="width: 100px;height: 100px;background-color: red;"></div>
        <div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
        <div style="width: 100px;height: 100px;background-color: yellow;float: right;"></div>
    </body>
</html>

在这里插入图片描述

style="width: 100px;height: 100px;background-color: black;position: absolute;
width:宽 height:高 background-color:背景色

额外说明:盒模型 浏览器查看元素时会显示这样一个图 在这里插入图片描述 定义一个元素的宽高时 可以通过 padding:填充 border:边框 margin:边距 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 例如

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="background-color: black;padding: 0px;width: 100px;height: 100px;"></div><br />
        <div style="background-color: black;padding: 20px;width: 100px;height: 100px;"></div><br />
        <div style="background-color: black;border: #FF0000 solid 10px;padding: 20px;width: 100px;height: 100px;"></div>
        <div style="background-color: black;margin: 20px;border: #FF0000 solid 10px;padding: 20px;width: 100px;height: 100px;"></div>
    </body>
</html>

在这里插入图片描述

position 规定元素的定位类型 手册 元素的定位通过 left,top,right,bottom 属性来定位。 这里介绍两个 absolute:相对于 static 定位以外的第一个父元素进行定位(一般元素不说明都是static) 可以理解为在浏览器中的绝对位置 无视空间直接放置

relative:相对于其正常位置进行定位

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 100px;height: 100px;background-color: black;position: absolute;left: 300px;top: 0px;"></div>
        <div style="width: 100px;height: 100px;background-color: red;position: relative;left: 100px;top: 0px;"></div>
        <div style="width: 100px;height: 100px;background-color: green;position: relative;left: 100px;top: 100px;"></div>
        <div style="width: 100px;height: 100px;background-color: yellow;position: relative;"></div>
        <div style="width: 100px;height: 100px;background-color: palevioletred;position: relative;left: 100px;"></div>
    </body>
</html>

在这里插入图片描述 可以对比下

对比(一)

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="background-color: black;width: 500px;height: 500px;position: absolute;top: 0px;left: 0;"></div>
        <div style="background-color: red;width: 300px;height: 300px;position: absolute;top: 0px;"></div>
        <div style="background-color:green;width: 300px;height: 300px;position: relative;top: 0px;left: 50px;"></div>
    </body>
</html>

第一个div是黑色背景看下面两个就行 在这里插入图片描述 对比(二)

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="background-color: black;width: 800px;height: 800px;position: absolute;top: 0px;left: 0;"></div>
        <div style="background-color: red;width: 300px;height: 300px;position: absolute;top: 0px;"></div>
        <div style="background-color:green;width: 300px;height: 300px;position: relative;top: 0px;left: 50px;"></div>
        <div style="background-color:blue;width: 300px;height: 300px;position:absolute;top: 0px;left: 50px;"></div>
        <div style="background-color:blue;width: 300px;height: 300px;position:relative;top: 0px;left: 50px;"></div>
    </body>
</html>

在这里插入图片描述

实现一个简单布局

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="width: 1000px;height: 30px;background-color: black;color: white;text-align: center;">TOP</div>
        <div style="width: 1000px;height: 300px;position: relative;top: 5px;">
            <div style="width: 280px;height: 300px;background-color: red;position: absolute;">LEFT</div>
            <div style="width: 700px;height: 300px;background-color: green;float: right;">RIGHT</div>
        </div>

        <div style="width: 1000px;height: 30px;background-color: yellow;position: relative;top: 10px;text-align: center;">BOTTOM</div>

    </body>
</html>

在这里插入图片描述 如果我们讲这些背景填充色去掉 找一些图片填充

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="height: 50px;">
            <img src="1.png"/>
        </div>
        <div style="width: 1200px;height: 300px;position: relative;top: 5px;">
            <div style="position: absolute;">
                <img src="2.png" />
            </div>
            <div style="width: 700px;height: 300px;float: right;">
                <img src="3.png" />
            </div>
        </div>

        <div style="width: 1200px;height: 30px;position: relative;top: 70px;">
            <img src="4.png" />
        </div>

    </body>
</html>
这里的1/2/3/4.png是我截的csdn主页的图

文件目录 在这里插入图片描述

<img src="3.png" />此处解释:img图片链接为 同文件夹下的3.png图片

看到这里是不是有点意思了 在这里插入图片描述如果把每一块内容实现 就是一个页面了 一个好看的网站往往都会有好看的布局,所以学会div的使用以及浮动和定位是很重要的

有兴趣的小伙伴可以试着截你喜欢的网站的图 拼装一个去装逼哦,但是要注意不要侵权哦

特别提醒

要勤加练习,切忌眼高手低,加油






后续会推出

前端:js入门 vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:535620886 974178910 有问题可以下方留言,看到了会恢回复哦

预览图
评论区

索引目录