java display html_css html布局之display属性_动力节点Java学院整理
1.HTML元素分类
HTML元素大题可分为内联(inline)元素和块(block)元素。
内联元素(inline)
①元素显示方式:"文本方式",1个挨着1个,不独自占有1行;
②内嵌的元素也必须是内联元素:如,不能在里面嵌入
③包含的标签有:、、、 等等;
块元素(block)
①元素显示方式:每个元素独自占有1行,相当于前后都带有换行符;
②内嵌的元素可以是内联或块级元素;
③包含的元素有:
~
、
等等;
2. HTML 元素布局展示
默认展示(未添加width和height属性)
①HTML元素在浏览器展示的方式是:从上到下,从左到右。
②内联元素,是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够,就会换至下一行。
③块级元素,根据内联元素的展示方式展示大概区域;当浏览器的宽度减少时,会自动扩充块级元素的height属性的值,以容纳内嵌元素的展示。
展示页面
增加了width属性的展示
块级元素(div)增加了width属性
结论
①当块级元素没设置width属性时,浏览器宽度的变更,会压缩块元素内嵌元素的排版。
②设置块级元素的width属性时,浏览器的width属性值变更,不会影响到块级元素里的内嵌元素的布局,他们(内嵌元素)受父级块级元素的影响。
适用范围:导航条(导航条里有多个a标签,可放在一个div里,并给div附加width属性;以免浏览器缩小,造成导航排版乱掉);
CSS display属性
主要的值
1) none :此元素不被显示;
2) block :此元素按块级元素显示:前后带换行符,自己占一行。内联元素 → 块元素
3) inline :此元素按内联元素显示:1个挨着1个。块元素 → 内联元素
display:block 演示
input3 设为了display:block
display:inline
div 设为了display:inline
java display html_css html布局之display属性_动力节点Java学院整理相关推荐
- 网页制作 HTML设为首页和加入收藏_动力节点Java学院整理
网页制作 HTML设为首页和加入收藏_动力节点Java学院整理 IE浏览器下如何实现"设为首页","加入收藏"的功能 解决思路: 将指定URL设为首页的功能主要 ...
- java获取tomcat目录结构_tomcat目录结构简介_动力节点Java学院整理
tomcat目录结构简介 如果我们有一个web应用,名称为"mail"(同时也是web应用所在目录的名称),那么其目录内不同类型的文件应该服从如下放置的规则: 一般来讲: 对于ht ...
- java ztree_ztree简介_动力节点Java学院整理
[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 zTree是一个依靠jQuery实现的多功能"树插件".优异的性能.灵活的配 ...
- Java Scaner类详解_动力节点Java学院整理
Java.util.Scanner是Java5.0的新特征,主要功能是简化文本扫描.这个类最实用的地方表现在获取控制台输入,其他的功能都很鸡肋,尽管Java API文档中列举了大量的API方法,但是都 ...
- java outputstream初始化_ByteArrayOutputStream简介和使用_动力节点Java学院整理
ByteArrayOutputStream 介绍 ByteArrayOutputStream 是字节数组输出流.它继承于OutputStream. ByteArrayOutputStream 中的数据 ...
- backbone java_backbone简介_动力节点Java学院整理
简介 Web 应用程序越来越关注于前端,使用客户端脚本与 Ajax 进行交互.由于 JavaScript 应用程序越来越复杂,如果没有合适的工具和模式,那么 JavaScript 代码的高效编写.非重 ...
- java子网划分_IP地址子网划分_动力节点Java学院整理
二进制和十进制的关系 二进制和十六进制的关系16进制的每个位是2进制的4位F=1111二进制转16进制,按上面4位一组分开转 2.IP地址和二进制 十进制:0-9逢10(到9)进1十六进制:0-F(1 ...
- java 头尾 队列_Java数据结构之队列(动力节点Java学院整理)
队列的定义: 队列(Queue)是只允许在一端进行插入,而在另一端进行删除的运算受限的线性表. (1)允许删除的一端称为队头(Front). (2)允许插入的一端称为队尾(Rear). (3)当队列中 ...
- 动力节点Java培训告诉你Java线程的多功能用法
现在的java开发可谓是八仙过海各显神通啊!遥想当下各种编程语言萎靡不振,而我Java开发异军突起,以狂风扫落叶之态,作为Java培训行业的黄埔军校,为了守护Java之未来,特意总结了一些不被人所熟知 ...
最新文章
- linux下获取系统时间 和 时间偏移
- 列表推导式 python原理_Python进阶-列表推导式详解总结
- python Intel Real Sense D435 异常检测与抛出(获取/打印异常详细信息 traceback.print_exc())
- sendmail启动报错
- frame buffer编程--画点功能和新增字符串代替RGBT
- macOS下如何使用命令启动数据库/停止数据库/重启数据库(MySQL)
- 记录pageHelper分页orderby的坑
- BZOJ 2039 人员雇佣 (最小割)
- 51nod1437 迈克步
- webpack4入门笔记——loader
- WinCE5.0中文模拟器SDK(VS2005)的配置
- kdj买卖指标公式源码_买卖点KDJ版指标详解 通达信通达信KDJ
- 利用python生成图片验证码
- Nature综述:宏基因组时代的病毒分类
- 内存管理之Tagged pointer
- 压缩包文件设置了加密怎么解密
- 字节顺序标记(BOM)详解
- python创建一个列表、包括学生姓名年龄祖籍_Python列表(list)练习题
- Linux-配置阿里云YUM源
- 通达信行情接口源代码是什么?
热门文章
- 基于深度学习的点云配准Benchmark
- 精选CVPR开源项目学习资源汇总
- 重置管理员密码linux,grafana重置管理员密码
- ICLR 2020 | ELECTRA:新型文本预训练模型
- Amber计算MM能量
- python实现将txt文件格式转换为arff格式
- mysql根据当前时间删除_从日期时间早于另一项日期时间的Mysql表中删除
- NFS---linux远程挂载
- where oracle用法,Oracle查询语句 select * from where 用法
- c#switch语句判断成绩_Go的条件判断语句