今天 ,给大家变个魔术!!!

前言:在对网页进行布局时,当我们设置div的的宽为固定宽时,理论上,内容是不会超出div的,那你有没有见过内容超出div固定宽度的情况呢?今天我们就来看看到底是怎么一回事?

看分析之前,我们先看一下效果(可能有的伙伴都没有看明白前言和标题所说的意思)

大家看看,我的div的宽和高背景已经展示出来了,在该div中,写了一些内容,但是内容不自动换行,直接超div的宽而出去,这是怎么回事?

代码如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1{width: 200px;height: 200px;background: red;}</style></head><body><div id="div1">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</div></body>
</html>

问题一出,给学生们开出高价筹码——谁能知道是怎么回事,这周作业就可以免了。所谓“重赏之下必有勇夫”,为了不写作业,学生们个个都摩拳擦掌,跃跃欲试,经过一轮又一轮的回答之后,大家都没有说出个所以然来。

突然,一名学生举起手来,说他的可以,我就让他来我电脑上来试试,没想到在他电脑上可以却在我电脑上不行。。。。

看大家都回答的差不多了,还是没有说出个所以然来,我默默的拿起手,将div中的内容替换了下,结果一运行,居然可以了!

反应慢的同学一看,哇,不禁的张开嘴,好神奇啊;反应快的同学一眼就看到了问题的所在。是的,问题就出在内容上了,之前我们写了一些英文字母放上去,浏览器当做你写的是一个单词呢,故不会换行,你写成汉字就不一样了,当内容达到div边缘时,就会自动换行。

这么看来,还神奇吗?

往期精彩

自从有了这款辣椒酱,拌饭再也不用老干妈

2020-10-30

新机必装!那些你不知道的实用技软件在这里!文末免费获取

2020-10-31

binarySearch与IndexOf的那些事儿~

2020-11-01

使用相对长度单位em布局网页内容

2020-11-02

使用相对长度单位rem布局网页内容

2020-11-03

集合还有这么优雅的运算法?

2020-11-04

点分享

点点赞

点在看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/324548.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Google的面试题长啥样

转载自 Google的面试题长啥样 本文翻译自Google工程师/面试官Alex Golec的文章&#xff1a;Google Interview Questions Deconstructed: The Knight’s Dialer&#xff1b; 来源&#xff1a;实验楼&#xff0c;翻译&#xff1a;实验楼扫地阿姨 原文&#xff1a;https://medium…

ssl初一组周六模拟赛【2018.3.24】

前言 先说一下成绩&#xff1a; 姓名成绩xxy480xjq470wyc(本人)430lw350hjq350zyc325lrz280hzb250 正题 题目1&#xff1a;ssl2545 奇数【水题】 水题 链接&#xff1a; https://blog.csdn.net/mr_wuyongcong/article/details/79677182 题目2&#xff1a;ssl2546 求和【贪…

Autofac+Castle实现AOP事务

一、前言 最近公司新项目&#xff0c;需要搭架构进行开发&#xff0c;其中需要保证事务的一致性&#xff0c;经过一番查找&#xff0c;发现很多博文都是通过Spring.Net、Unity、PostSharp、Castle Windsor这些方式实现AOP的。但是这不是我想要的&#xff0c;因此一番查找后&am…

今天,我们就来抽个奖!

前言&#xff1a;在日常生活中&#xff0c;我们经常会用到一些抽奖的功能&#xff0c;比如公司年会上的抽奖环节&#xff0c;班级随机点名回答问题的小程序&#xff0c;随机点名系统的程序可以看这里&#xff1a;&#xff0c;那你知道类似的抽奖功能是怎么实现的吗&#xff1f;…

Spring Boot 最核心的 3 个注解详解

转载自 Spring Boot 最核心的 3 个注解详解 最近面试一些 Java 开发者&#xff0c;他们其中有些在公司实际用过 Spring Boot, 有些是自己兴趣爱好在业余自己学习过。 然而&#xff0c;当我问他们 Spring Boot 最核心的 3 个注解是什么&#xff0c;令我失望的是鲜有人能答上来…

刚刚,改造了下BaseDao……

今天在上课的时候&#xff0c;带着学生们写底层的jdbc连接数据库并且对数据表进行增删改查&#xff0c;写的那就一个痛苦啊……从创建实体类到写Dao层代码再到表现层的Jsp页面&#xff0c; 写了好久好久……终于写完了&#xff01;&#xff01;&#xff01;其实吧&#xff0…

ssl2340-格子游戏【并查集】

正题 题目链接 大意 有两个人在玩游戏&#xff0c;在一个n*n的矩阵的点上画线&#xff0c;有如果有线封了圈那么游戏结束&#xff0c;给出一些操作&#xff0c;求在那一轮结束了游戏&#xff0c;或没有结束游戏。 解题思路 用并查集把点相连&#xff0c;直到并查集形成环为…

ASP.NET Core MVC 过滤器介绍

过滤器的作用是在 Action 方法执行前或执行后做一些加工处理。使用过滤器可以避免Action方法的重复代码&#xff0c;例如&#xff0c;您可以使用异常过滤器合并异常处理的代码。 过滤器如何工作&#xff1f; 过滤器在 MVC Action 调用管道中运行&#xff0c;有时称为过滤器管…

dubbo小项目

完整Dubbo项目演示 1 原型 1.1 部门显示&#xff0c;显示全部部门信息 1.2 员工新增 1.3 查看部门员工 2 按照分布式架构进行设计项目 设定员工管理和部门管理不在同一个模块中&#xff0c;需要有一个员工管理项目和一个部门管理项目。 为了方便&#xff0c;不去每个项…

如何构建一套高可用的 APP 消息推送平台

转载自 如何构建一套高可用的 APP 消息推送平台 消息推送作为移动 APP 运营中的一项关键技术&#xff0c;已经被越来越广泛的运用。本文追溯了推送技术的发展历史&#xff0c;剖析了其核心原理&#xff0c;并对推送服务的关键技术进行深入剖析&#xff0c;围绕消息推送时产生…

为什么要有周考?周考是用来干什么的?

周考已经实行一年多的时间了&#xff0c;目前唯一用来检测学生们水平的可能就是周考的成绩了&#xff0c;不过&#xff0c;周考成绩也很能说明一切&#xff0c;每周周考的题目和范围都是本周所学知识&#xff0c;如果周考的成绩很差&#xff0c;那么可以很肯定的说&#xff0c;…

POJ2186-Popular Cows(流行的奶牛)【tarjan,强连通分量,图论】

正题 题目链接 大意 有n头奶牛&#xff0c;奶牛们会认为有些奶牛很受欢迎&#xff0c;受欢迎会互相传递&#xff0c;如:如果A认为B很受欢迎&#xff0c;而B认为C受欢迎&#xff0c;那么A也会认为C是受欢迎的。然后求每一个奶牛都认为受欢迎的奶牛数量。 解题思路 先用tarjan…

.NET Core快速入门教程 4、使用VS Code开发.NET Core控制台应用程序

一、前言 为什么选择VS Code&#xff1f;VS Code 是一款跨平台的代码编辑器&#xff0c;想想他的哥哥VS&#xff0c;并是微软出品的宇宙第一IDE&#xff0c;那作为VS的弟弟&#xff0c;VS Code 也不会差&#xff0c;毕竟微软出品。反正ken是这么认为的本篇开发环境&#xff1f…

zookeeper not connected

问题&#xff1a; 异常信息&#xff1a; zookeeper not connected 异常场景&#xff1a; spring boot dubbo 启动时&#xff0c;连接zk出现问题 解决方案&#xff1a; 1、 检查zk所在机的防火墙。 systemctl stop firewalld | service firewalld stop 2、 检查zk所在机的ip和y…

Redis 5.0 正式版发布了,19 个新特性

转载自 Redis 5.0 正式版发布了&#xff0c;19 个新特性 Redis 5.0 GA 正式版发布了&#xff01; 下载地址&#xff1a; download.redis.io/releases/redis-5.0.0.tar.gz 源码下载&#xff1a; github.com/antirez/redis/releases/tag/5.0.0 先看一下 Redis 5 带来的更新内容…

晨读,难道只是为了完成任务而读的吗?

前两天&#xff0c;看到一篇“湖北恩施的一名学生早读课上大汗淋漓”的文章&#xff0c;不禁想起了我们班的早读。01早读情况除周一升旗以外&#xff0c;其余的学习日都是有早读的&#xff0c;但是早读的利用率有多少就不得而知了。一般在前一天布置作业的时候&#xff0c;作业…

P1197-星球大战【并查集,图论】

正题 题目链接 大意 有n个星球&#xff0c;有一些双向通道连接星球&#xff0c;将一些星球实施打击。求开始和每一次打击后的联通块数量。 解题思路 可以尝试一下逆向思维&#xff0c;把摧毁改为连接&#xff0c;然后倒着输出。 代码 #include<cstdio> #include<i…

代码调用NullPointerException(NPE)

异常信息&#xff1a; 空指针异常 场景&#xff1a; 控制调用服务代码发生异常 服务代码调用mapper发生异常 解决方案&#xff1a; 找到异常发生的行&#xff0c;找方法调用过程"."&#xff0c; 如&#xff1a;xxxService.xxx()。通常都是这个xxxService为null&#…

AOP in dotnet :AspectCore的参数拦截支持

距离上一篇AspectCore的介绍发布已经很长一段时间了&#xff0c;这篇文章也早该和大家见面&#xff0c;最近一直忙于适应新工作&#xff0c;并在业余时间有幸向何镇汐&#xff0c;Savorboard&#xff0c;农夫&#xff0c;AlexLEWIS等几位大牛请教学习&#xff0c;收获颇多。另一…

GitHub 发布了一款重量级产品,可直接运行代码

转载自 GitHub 发布了一款重量级产品&#xff0c;可直接运行代码 【导读】10月16日&#xff0c;GitHub Universe开发者大会如期举行&#xff0c;并重磅推出GitHub Actions&#xff0c;平台主管Sam Lambert称&#xff0c;这将是GitHub历史上最大的改变。此外&#xff0c;GitHu…