首页 > 其他分享 >H5-26 文档流

H5-26 文档流

时间:2024-12-04 17:54:44浏览次数:9  
标签:26 img 元素 H5 空格 width 文档 200px

1、文档流是文档中可显示对象在排列时所占用的位置/空间

  例如:块元素自上而下摆放,内联元素,从左到右摆放

  标准六里面的限制非常多,导致很多页面效果无法实现

  ①高矮不齐,底边对齐

  ②空白折叠现象

    (1)无论多少个空格、换行、tab,都会折叠为一个空格

    (2)如果我们想让img标签之间没有空隙,必须紧密链接

2、文档流产生的问题

 ①高矮不齐,底边对齐

   <span></span>

  <img src="1.jpg" alt="">

 

  img{

    width:200px;

  }

 ②空格折叠

<span>文本                  内容</span>

<img src="1.jpg" alt="">

 

img{

  width:200px;

}

  

 ③元素无间隙

<span>文本</span>

<img src="1.jpg" alt=""><img src="1.jpg" alt="">

 

img{

  width:200px;

}  

3、脱离文档流

  使一个元素脱离标准文档流有三种方式:

  ①浮动

  ②绝对定位

  ③固定定位

 

标签:26,img,元素,H5,空格,width,文档,200px
From: https://www.cnblogs.com/zhangxiaoguo/p/18586874

相关文章

  • 技术文档编写指南:让知识传承更优雅
    文章目录一、技术文档的重要性二、文档结构设计1.清晰的层次结构2.内容组织原则三、文档编写技巧1.语言表达2.格式规范3.图文并茂四、文档维护策略1.版本控制2.定期更新3.更新流程五、常见误区总结参考建议在软件开发的世界里,一份优秀的技术文档不仅仅是......
  • h5 sqlite 操作封装
    参考文档错误码//数据库名称constnamesjk="sl"//存储路径constpath=`_doc/${name}.db`/**基本操作*查询数据库连接状态isOpenDatabase * 无参数* 返回truefalse***关闭数据库 closeDatabase* 无参数* Promise......
  • SI3262_国产低功耗MCU+NFC+15触键三合一柜锁方案SoC芯片
     SI3262简介Si3262是高度集成ACD低功耗MCU+NFC+15通道防水触摸按键的SoC芯片。其MCU模块具有低功耗、LowPinCount、宽电压工作范围,集成了13/14/15/16位精度的ADC、LVD、UART、SPI、I2C、TIMER、WUP、IWDG、RTC、TSC等丰富的外设。内核采用RISC-VRV32IMAC(2.6CoreMark/MHz)......
  • SM2604弹窗-layui
    1、添加路径SM2604,/layui-v2.2.5/layui.js 放在PU脚本集合中的第1个  2、layui.use(['layer','form'],function(){varform=layui.form;varlayer=layui.layer;$=layui.jquery;$("#btn_val_CPMC").click(function(){varsql="sel......
  • 14_基于springboot的图书管理系统(代码+数据库+文档)
    ......
  • 26 基于STM32的智能门禁系统(指纹、蓝牙、刷卡、OLED、电机)
    目录一、主要功能二、硬件资源三、程序编程四、实现现象一、主要功能基于STM32单片机,六个按键,分别代表指纹、蓝牙、刷卡的正确进门与错误进门;比如第一个按键按下,表示指纹正确,OLED显示指纹正确,开门,第二个按键按下的话,则指纹错误,OLED显示指纹错误,请重试,第二个按键连......
  • IntelliJ+SpringBoot项目实战(26)--SpringBoot的JavaMailSender发邮件及模版引擎发送带
        在上节中介绍了不依赖于SpringBoot自带的mailSender发邮件的模式。本文介绍如何使用SpringBoot的JavaMailSender,以及如何使用freemarker及thymeleaf模版引擎发送带格式的邮件,以及如何在邮件正文中嵌入图片。上节中的发邮件的方式与SpringBoot的JavaMailSender发邮......
  • 洛谷P2670扫雷游戏(Java)
    三.P2670[NOIP2015普及组]扫雷游戏题目背景NOIP2015普及组T2题目描述扫雷游戏是一款十分经典的单机小游戏。在n行m列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格)。玩家翻开一个非地雷格时,该格将会出现一个数字——提示周围格子中有......
  • 20222326 2024-2025-1 《网络与系统攻防技术》实验七实验报告
    1.实验内容实验目的:学习常用网络欺诈背后的原理,提高防范意识,并提出具体防范方法。实验内容:(1)简单应用SET工具建立冒名网站(2)利用ettercap实施DNSspoof攻击,篡改特定网站IP(3)结合应用两种技术,用DNSspoof引导特定访问到冒名网站实验基础知识:(1)TCP/IP攻击:原始报文捕获-Snif......
  • H5-25 弹性盒子模型(flex box)
    1、定义:弹性盒子是CSS3的一种新的布局模式CSS3弹性盒子是一种当前页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间2、CSS3弹性盒子......