程序员经验分享-hwhale

前端——块元素和内联元素的概念以及区别

2023-05-16

一丶块元素：
(1)前后有换行符，独占一行，默认情况下，垂直排列
(2)默认情况下高度有内容决定（就比如由里边的图片和文字决定高度），宽度是父级的宽度，父级是多宽，它就有多宽。width height 可以控制宽高。
(3)margin和padding可以控制距离
（4）常见的块元素有：div p ul li hr【 水平线】form等标签
二丶内联元素：
(1)前后没有换行符，不独占一行。默认情况下，水平排列
(2)宽度和高度都有内容决定
(3width 和height不可以控制高度 也就是说 给其宽高是不起作用的
(4)margin padding 只可以控制左右 上下不可控制
（5）常见的内联元素有：span img(属于替换元素 即是 它是内联元素 却可以设置width height来控制宽高)
还有i em 等等
三丶块元素和内联元素的转换：
dislay:none;表示隐藏布局（隐藏之后不再占位）
display：block；表示块状布局
display：inline；表示内联布局
运行的截图比较：
在这里插入图片描述
图一解释：给内联元素span一个margin-top没效果 margin-bottom一样的。
在这里插入图片描述
图二解释：块元素div距离顶端100px 明显改变了
在这里插入图片描述
图三解释：块元素div距离左边100px ，明显改变了
在这里插入图片描述
图四解释：看得出块元素的宽高度可以被width和height控制，而span没I变化

在这里插入图片描述
图五解释：看得display：none 元素被隐藏了 而且不占位
在这里插入图片描述
图六解释：加上display ：block 内联元素变成块元素了 所以width和height可以控制高度了，也就是说具有块元素的特证了

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端——块元素和内联元素的概念以及区别 的相关文章

随机推荐

  • 小程序:插件未授权使用

    问题1 登录用户不是该小程序的开发者 替换 project config json 文件下的appid 问题2 插件未授权使用 由于我个人是个体工商户 xff0c 添加不了 社交 gt 直播 类型 xff0c 所以开发者工具登录我的微信没法

  • 03 SCons 自动构建工具编译hello.c

    安装mingw 我的电脑已经安装过 xff0c 下面主要说下配置环境 我们将mingw的路径和scons的虚拟环境路径添加到临时的环境变量 这样做的好处是使用的时候添加 xff0c 不与其它版本的全局的环境变量冲突 后期我编译ARM程序时把

  • flutter报错： Gradle threw an error while downloading artifacts from the network. Retrying

    项目之前是可以正常运行的 xff0c 突然就报这个错误了 Gradle threw an error span class token keyword while span downloading artifacts span class

  • webpack:1 概念

    loader的作用 xff1a 是用来处理不同类型的文件 xff0c 操作的是文件 plugin的作用 xff1a 是一个扩展器 xff0c 不操作文件 xff0c 用来增强功能 其它webpack的使用看webpack原汁原味的 官网 高

  • 数据库： mongodb导入json数据

    登录聚合数据 xff0c 找些免费的api请求后下载成json文件 xff0c 去掉多余的格式只保留数组格式 xff0c 选择json文件即可导入成功 可以看资源 xff1a 新闻头条新闻头条新闻头条 carc1subject1 json

  • webpack: 4 loader汇总(style-loader等)

    所有的loader必须匹配规则 xff0c 否则不生效 配置文件中 xff0c module中rules的use执行顺序是从后往前执行 url loader 用于将文件转换为base64 URI的webpack加载程序 options li

  • webpack: 5 报错，错误

    webpack 报错 xff1a Uncaught ReferenceError is not defined webpack webpack打包jquery的插件 xff08 EasyLazyLoad xff09 时 xff0c 报错 方

  • Vue：无限滚动-通过vant组件

    一 xff1a 下拉刷新上拉加载功能 1 实现原理 xff1a 通过vant的List和PullRefresh两个组件实现 xff08 PullRefresh组件标签包裹List组件标签 xff09 2 我遇到的问题 Load方法触发的次数

  • webpack：打包示例-打包多入口

    入口 entry 前台 index 39 public assets js index 39 打包入口项 list 39 public assets js list 39 search 39 public assets js search

  • kubernetes基础——一文读懂k8s

    容器 容器与虚拟机对比图 左边为容器 右边为虚拟机 容器技术是虚拟化技术的一种 xff0c 以Docker为例 xff0c Docker利用Linux的LXC LinuX Containers 技术 CGroup Controll Grou

  • curl错误28：Resolving timed out after 15009 milliseconds解决方案

    报错信息如字面意思就是连接超时了 xff0c 解决方案如下 xff1a 1 检查Curl的超时参数 xff0c 如果设置小于1s的超时时间 xff0c curl会直接返回超时错误 xff08 28 xff09 xff0c 并不会发起任何的请

  • Linux 可视化桌面远程连接

    Linux xff08 一 xff09 防止系统文件修改导致DNS清空 chattr 43 i etc resolv conf xff08 二 xff09 安装vnc yum install y tigervnc tigervnc serv

  • C-Free5注册码，秘钥，解决办法

    C Free5注册码 xff0c 秘钥 xff0c 解决办法 用户名 xff1a 123123 电子邮件 xff1a 111 64 qq com 注册码 xff1a mJ2Em9jdm7jGwYTpmp2H6KmehtvO 显示让重启电脑

  • Ubuntu16.04将python命令指向python3

    第一步 xff1a 将原来的python文件进行备份 sudo cp usr bin python usr bin python bak 第二步 xff1a 删除原来指向python2的文件 sudo rm usr bin python 第

  • 素数伴侣

    题目 xff1a 解析 xff1a 本题目采用了匈牙利算法 xff0c 起初以为只是找到所有的素数伴侣 xff0c 但是题目有一个条件 xff0c 那就是每个数字只能使用一次 xff0c 组成拥有最多的素数伴侣 代码产出 xff1a spa

  • 接之前的SpringBoot项目通过金蝶中间件部署中未处理的问题

    新建的springboot项目是2 3 1的版本 xff0c 打包到金蝶中部署就一直栈内存溢出 后来把pom文件中的父依赖换成了2 2 4版本 xff0c 打包部署到金蝶中就能运行了 xff0c 我也不知道具体原因 如果有知道具体原因的请不

  • 如何解决centos虚拟机每次启动都要自己登录root问题

    解决办法 xff1a 可以通过修改 etc gdm custom conf文件 xff0c 实现root用户免密码自动登陆 1 输入命令vi etc gdm cutstom conf 2 在 daemon 下增加 需要插入时按i进行插入模式

  • 关于word中最后一个分节符导致的空白页删除问题

    主要原因 xff1a 一般最后一个空白页出现的原因有两个 xff0c 一个是分节符或者分页符导致 xff0c 另一个是上一页内容太多顶出来导致多一些 xff08 这种情况可以选择调节前面内容长度 xff0c 并设置前页最后一个字符的行距 x

  • 逐层贪婪预训练（解决梯度消失的第一个成功方案，但现在除了NLP领域外很少使用）

    起因 背景 xff1a 梯度消失 vanishing gradient problem DNN的训练中 xff0c 由于梯度消失 xff0c 即输出层的错误在反向传播的过程中会显著地越来越小 xff0c 所以靠近输入层的层的梯度就接近0 x

  • 前端——块元素和内联元素的概念以及区别

    一丶块元素 xff1a 1 前后有换行符 xff0c 独占一行 xff0c 默认情况下 xff0c 垂直排列 2 默认情况下高度有内容决定 xff08 就比如由里边的图片和文字决定高度 xff09 xff0c 宽度是父级的宽度 xff0c

热门标签