1. 全栈程序员必看首页

初识HTML(三)—div块级元素以及浮动和定位(超详细带演示)

全栈程序员-站长 • • 未分类 • 阅读 2

初识HTML(三)—div块级元素以及浮动和定位(超详细带演示)div 块级元素 div 是一个特别重要的标签是块级元素上代码 看图 手册 html head metacharset utf 8 title title metacharset utf 8 head body divstyle width 600px height 600px background color black divstyle width 600px height 600px background color black body html

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>

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

浮动和定位

<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>

在这里插入图片描述

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> 
<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图片

特别提醒

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218899.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月17日 下午11:12
下一篇 2026年3月17日 下午11:13


相关推荐

  • 利用MATLAB读取NetCDF文件

    利用MATLAB读取NetCDF文件

    利用MATLAB读取NetCDF文件网络通用数据格式 NetCDF networkCommo 是在气象科学领域用于存储数据的常见存储标准 该格式将数据存储成扩展名为 nc 的文件 MATLAB Python 和 Java 等语言都支持对该类型文件的读取 本文主要讲述利用 MATLAB 读取 NetCDF 文件

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月17日
    2
  • 豆包大模型 1.8 豆包

    豆包大模型 1.8

    豆包大模型 1.8

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月12日
    2
  • 匿名函数调用方法_javascript匿名函数

    匿名函数调用方法_javascript匿名函数

    匿名函数调用方法_javascript匿名函数首先看一下普通函数和匿名函数的区别//普通函数functionsum(a,b){ returna+b; console.log(“我是一个普通函数”) }//匿名函数，不能单独使用function(a,b){ returna+b; console.log(“我是一个匿名函数”) }没错，匿名函数简单来说就是普通函数去掉名字，但是他不能单独定义与使用，下面是匿名函数的一些使用场景：用于函数表达式、作为返回值、用于定义对象方法、作为回调函数、用于立即执行函数、用于DOM元素注

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月3日
    5
  • java绝对值方法(java计算绝对值的方法)

    java绝对值方法(java计算绝对值的方法)

    **文章摘要**1、绝对值函数，用来获取表达式的绝对值。2、绝对值函数，实现降序+升序输出。一、绝对值函数使用说明绝对值函数是JDK中Math.java中的实现方法，其用来得到表达式的绝对值。其实现非常简单，源码如下：/***Returnstheabsolutevalueofan{@codeint}value.*Iftheargumentisnotnegative…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月18日
    911
  • vs2019配置opencv什么版本_vs配置opencv

    vs2019配置opencv什么版本_vs配置opencv

    vs2019配置opencv什么版本_vs配置opencv一、环境vs2019社区版、win1064位操作系统二、opencv配置步骤（共5步）1、下载OpenCV4.0.1，官网为opencv.org2、安装opencv，我的安装目录是D:\opencv-4.0.1-vc14_vc153、添加环境变量，在PATH中添加：D:\opencv-4.0.1-vc14_vc15\opencv\build\x64\vc15…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月20日
    3
  • Eclipse 自动补全代码返回值快捷键

    Eclipse 自动补全代码返回值快捷键

    Eclipse 自动补全代码返回值快捷键1 将鼠标光标移到代码末尾处 按下 ctrl 1 会弹出如下所示选择项 2 然后选择第一个 Assignstatem 则会自动补全代码返回值 如下所示 List FixedVo fixedList ConfigManage getInstance getFixedList BigClassT FixedVo

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号