目录

它是什么

怎么使用

浮动

常见问题


它是什么
div是块级元素:
块级元素在页面中的独占一行 默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div(盒子)和div(盒子)之间是上下排列的

怎么使用

我们在实际的开发网页中,网页的整体部分一般是由div标签来进行布局的。当然在使用div布局之前就要了解div的属性
还有块级元素之间不仅能套入行内元素 还可以嵌入块级元素  但在嵌入块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使用浮动

浮动

<div>  </div>
div{float: left;float: right;
}

常见问题

消除浮动塌陷的三种方法

1.给父级元素定义高度

2.给父级元素使用overflow: hidden;方法消除浮动塌陷

3.使用clear: both;方法消除浮动塌陷

div {content: "";display: block;height: 0;clear: both;visibility: hidden;}

Html5---div布局方式相关推荐

  1. html5绘制 布局图,html5 div布局与table布局详解

    本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下 div布局:html+css实现简单布局. #container中height不能写成百分数,必须为具体高度. d ...

  2. 【小5聊】使用js+css+div布局方式画一棵圣诞树,带闪烁霓虹灯效果

    虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...

  3. html5 div布局table,H5的div布局与table布局详解

    这次给大家带来H5的div布局与table布局详解,H5div布局与table布局的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例为大家解析了html5 p布局与table布局,供大家参考 ...

  4. html5 div布局与table布局

    div布局:html+css实现简单布局. #container中height不能写成百分数,必须为具体高度. <!DOCTYPE html> <html> <head ...

  5. html5 div 简单布局

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  6. HTML+CSS第十课:常见的3种网页布局方式:表格布局、DIV+CSS布局、框架布局

    知识点:网页布局的方式 1.网页布局 常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...

  7. HTML5期末大作业:生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

    HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人 ...

  8. HTML5期末大作业:仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

    HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 ...

  9. HTML5期末大作业:布偶猫网站设计——布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载

    HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人. 美食. ...

  10. dreamweaver家乡主题网页设计 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 HTML5期末大作业

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

最新文章

  1. 【COCOS2D-X(2.X) 游戏开发系列之一】COCOS2DX(V2.X)与(V1.X)的一些常用函数区别讲解!在2.X版CCFILEDATA类被去除等...
  2. Android网格视图(GridView)
  3. 搞怪的html代码,这个恶搞网页代码是肿么写出来的?
  4. 用微前端的方式搭建类单页应用
  5. python删除重复元素_Python-删除列表中重复元素的方法
  6. 【HTML+CSS网页设计与布局 从入门到精通】第15章-表格格式:边距/居中/边框/折叠
  7. Jsoup实现java模拟登陆
  8. mfc三视图和斜等测图实现_如何在UE4中实现NPR(非真实感)渲染效果?
  9. JSON解析(C++)
  10. NLP标注神器:可同时对文本类型与实体类型进行标注(动图演示)
  11. AirServer第三方投屏软件v7.3.0中文版 (Airplay终端实用工具)
  12. 单片机程序编写常使用的程序架构
  13. 关于icon小图标的实现
  14. raster包—aggregate函数
  15. C语言编程-7_4 字符统计
  16. 使用 Marvelous Designer 为DAZ Studio 的 Genesis8 Female做衣服 1
  17. 基因数据处理8之BWA_MEM小数据集处理(成功)
  18. 原生app开发的优缺点
  19. web实验新浪邮箱、下拉小说列表、验证用户登录
  20. 汉语编程工具易语言即学即用教程pdf

热门文章

  1. 潜入浅出--通信中的频带利用率,以MASK.MPSK作为例子
  2. 阿里、华为、腾讯的“第二曲线”,大厂云们的成败得失如何评价?
  3. 老大让我优化数据库,我上来就分库分表,他过来就是一jio
  4. 【Linux】资源查看top显示信息说明|top、iftop、iotop、htop、atop工具
  5. 神经网络中的偏置值什么意思
  6. Y400电脑键帽扣下来和安装上去
  7. AJAX_入门经典案例
  8. python模拟生态系统
  9. 凸优化—凸松弛(Convex Relaxation)
  10. PADS-Logic学习笔记