HTML CSS:子元素什么时候可以超出父元素限制的范围?
疑问:
子元素什么时候可以同时从水平和竖直方向超出父元素的范围?
什么时候会从水平方向超出?
什么时候会从竖直方向超出?


首先,在HTML中,一个父元素包裹着一个子元素


<div class="parent">
    <div class="child"></div>
</div>


第二步:在CSS中设置父元素和子元素的范围,其中子元素的宽高是大于父元素的宽高的:


.parent{
    width:300px;
    height:300px;
    border: 2px solid blue;
}
.child{
    width:400px;
    height:400px;
    border: 2px solid red;    
}


在浏览器中运行,如图,可以得到第一个结论:子元素是可以超出父元素的范围限制的,
且可以从水平和竖直的方向同时超出

图片说明

第三步,我们先在HTML中添加进一些中文文字:


<div class="parent">
    <div class="child"> ....很多中文文字....</div>
</div>


如图:可以发现,当加进很多中文文字时,也是可以超出<div class="child"></div>的范围限制的,
但是为什么这里会先从竖直方向超出,而不会从水平方向超出呢?

图片说明

第四步:我们在HTML中添加进一些英文文文字:


<div class="parent">
    <div class="child"> ....很多英文文字....</div>
</div>


如图:可以发现,当加进很多英文文字时,也是可以超出<div class="child"></div>的范围限制的,
但是为什么这里会先从水平方向超出,而不会从竖直方向超出呢?

图片说明

**

所以,究竟什么时候子元素可以同时从水**平和竖直方向超出父元素的范围?
什么时候会从水平方向超出?
什么时候会从竖直方向超出?

1个回答

1.当单个元素的尺寸超出父元素的尺寸时可以同时从水平和竖直方向超出父元素的范围

2.对于多个元素或多个中文文字和英文单词会遵循文本流(文本流默认是水平方向)方向排列。当文本流遇到父元素的水平方向边界时会自动换行,也就不会从水平方向超出。只会从竖直方向超出。

3.对于连续的英文字母会被认作为一个单词。一个单词之间默认情况是不允许自动换行的。当一个单词的长度超出父元素的尺寸时会从水平方向超出。

上面说的都是默认情况,可以用css改变这些默认的情况。
可以用writing-mode: vertical-lr;把文本流改变为垂直方向,水平与竖直方向会颠倒。
可以用white-space: nowrap;强制所有文本在同一行内显示,超出父元素的尺寸时会从水平方向超出
可以用word-break: break-all;或word-wrap: break-word;让一个单词之间也允许自动换行。

li_13579_li
li_13579_li 因为overflow的默认值是visible(内容不会被修剪,会呈现在元素框之外)?因此如果子元素的宽高超出父元素,也是会呈现的。不知是不是这个意思?
11 个月之前 回复
qq_41806660
qq_41806660 大神
11 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
css中父元素跟子元素之间的浮动关系是如何相互影响的?
-
关于标签嵌套设置父元素固定高度子元素会被放到底层的问题?
-
css中的伪元素(伪元素本质上是创建了一个虚拟容器(元素))
-
css父级position:absolute;那么子元素的高度如何调整
-
CSS中两个不同类名的div元素的color属性为什么会互相影响?
-
css中的伪元素本质上是创建了一个有内容的虚拟容器,这句话什么意思,不明白,能举例说明吗?
-
父元素使用height:auto,子元素1固定高度,另一个子元素2使用height:100%,为什么子元素2的高度为0?
-
webstorm引用外部css无效,实在不知道是什么原因,求解????????
-
这是一个关于css的问题,关于islider的问题
-
小白求问一个关于VsCode的问题
-
简单练习:CSS多个类名,样式为何不见了?
-
为什么我本地明明已经更改了文件,http-server里的却仍然不变
-
关于相对定位和绝对定位嵌套的问题,求解答
-
想把视频设置为背景,并在其上方添加图片 导航栏等内容
-
下面这种布局如何用HTML或css写出来?
-
Tomcat配置php无法加载css
-
css里面,为什么我的min-width没用
-
盒子垂直居中,垂直居中是div元素,宽度高度被里面的子元素撑开的?
-
前端-div和h1通过什么样式能在一行中显示?
-
花了20分钟,给女朋友们写了一个web版群聊程序
参考博客 [1]https://www.byteslounge.com/tutorials/java-ee-html5-websocket-example
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
面试官,不要再问我三次握手和四次挥手
三次握手和四次挥手是各个公司常见的考点,也具有一定的水平区分度,也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好,但是后面越回答越冒冷汗,最后就歇菜了。 见过比较典型的面试场景是这样的: 面试官:请介绍下三次握手 求职者:第一次握手就是客户端给服务器端发送一个报文,第二次就是服务器收到报文之后,会应答一个报文给客户端,第三次握手就是客户端收到报文后再给服务器发送一个报文,三次握手就...
一生必看的纪录片
下面按对自己的影响/感悟程度来排序 《人生七年》 概要:人生七年》又称作《56up》也是非常多的网友在看过之后,都让自己陷入了一些思考,对人生思考有一定影响力的纪录片之一导演从1964年开始第一部,在英国找来了不同阶级的十几个七岁的孩子,有男生和女生。有上流社会,也有农场主的儿子等等从七岁开始采访,然后每隔七年就进行一次采访谈话直到现在已经是56岁的时候,在看的时候一定会感慨万千沉思许久,会...
redis——相关问题汇总
什么是redis? Redis 本质上是一个 Key-Value 类型的内存数据库, 整个数据库加载在内存当中进行操作, 定期通过异步操作把数据库数据 flush 到硬盘上进行保存。 因为是纯内存操作, Redis 的性能非常出色, 每秒可以处理超过 10 万次读写操作, 是已知性能 最快的 Key-Value DB。 Redis 的出色之处不仅仅是性能, Redis 最大的魅力是支持保存...
MySQL数据库—SQL汇总
一、准备 下文整理常见SQL语句的用法,使用MySQL5.7测试,参考了尚硅谷MySQL教程及用例。用例sql: 链接: https://pan.baidu.com/s/1tb3-12MRNFjV8drFlN6wzg&amp;shfl=sharepset 密码: fc2h 为了方便查阅可从右侧目录快速索引 二、DQL(Data Query Language)数据查询语言 1、语句顺序 书写顺序...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
java中的Static、final、Static final各种用法
前言 对Static、final、Static final这几个关键词熟悉又陌生?想说却又不知怎么准确说出口?好的,本篇博客文章将简短概要出他们之间的各自的使用,希望各位要是被你的面试官问到了,也能从容的回答… static 加载:static在类加载时初始化(加载)完成 含义:Static意为静态的,但凡被static 修饰说明属于类,不属于类的对象。 可修饰:Static 可以修饰 内部类、方...
这应该是把计算机网络五层模型讲的最好是文章了,看不懂你打我
帅地:用心写好每一篇文章! 前言 天各一方的两台计算机是如何通信的呢?在成千上万的计算机中,为什么一台计算机能够准确着寻找到另外一台计算机,并且把数据发送给它呢? 可能很多人都听说过网络通信的 5 层模型,但是可能并不是很清楚为什么需要五层模型,五层模型负责的任务也有可能经常混淆。下面是网络通信的五层模型 说实话,五层模型的具体内容还是极其复杂的,不过今天这篇文章,我将用最简洁的模式,通过网...
HTML CSS整理笔记
常见字体单位: 1.em 移动端常用的字体尺寸单位,说白em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5。 但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思,即相对于根节点html的font-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小...
为什么你学不会递归?告别递归,谈谈我的经验
可能很多人在大一的时候,就已经接触了递归了,不过,我敢保证很多人初学者刚开始接触递归的时候,是一脸懵逼的,我当初也是,给我的感觉就是,递归太神奇了! 可能也有一大部分人知道递归,也能看的懂递归,但在实际做题过程中,却不知道怎么使用,有时候还容易被递归给搞晕。也有好几个人来问我有没有快速掌握递归的捷径啊。说实话,哪来那么多捷径啊,不过,我还是想写一篇文章,谈谈我的一些经验,或许,能够给你带来一些帮助...
有哪些让程序员受益终生的建议
从业五年多,辗转两个大厂,出过书,创过业,从技术小白成长为基层管理,联合几个业内大牛回答下这个问题,希望能帮到大家,记得帮我点赞哦。 敲黑板!!!读了这篇文章,你将知道如何才能进大厂,如何实现财务自由,如何在工作中游刃有余,这篇文章很长,但绝对是精品,记得帮我点赞哦!!!! 一腔肺腑之言,能看进去多少,就看你自己了!!! 目录: 在校生篇: 为什么要尽量进大厂? 如何选择语言及方...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
大学四年,我把私藏的自学「学习网站/实用工具」都贡献出来了
在分享之前,先说说初学者如何学习编程,这个话题想必非常的重要,要学好编程,给你一些学习网站也好、实用工具也好,但前提是你知道如何去学习它。 见过很多初学者,以及小鹿我刚开始学习的时候,也是自己瞎摸索,找不到路子,看什么书?看什么资料?编程的方向太多了,如果确定自己的方向?尤其是上大一、大二甚至大三还没有确定自己到底是学习前端还是后天,每天这学一点,那学一块,掌握那么多,没有一门精通的,去面试的时候...
中国麻将:世界上最早的区块链项目
中国麻将:世界上最早的区块链项目 最近区块链这个玩意又被市场搞的很是火热,相信大部分人都不太清楚这玩意到底是怎么样的一个概念,它来了,它来了,它到底是啥~ 国家都开始发文支持了,下面是一个通俗易懂的例子:中国麻将。 甲首先发起一个申请,我要打麻将,组建一个麻将局,这就相当于创建一个区块,这个区块会被广播...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
Python 基础(一):入门必备知识
Python 入门必备知识,你都掌握了吗?
兼职程序员一般可以从什么平台接私活?
这个问题我进行了系统性的总结,以下将进行言简意赅的说明和渠道提供,希望对各位小猿/小媛们有帮助~ 根据我们的经验,程序员兼职主要分为三种:兼职职位众包、项目整包和自由职业者驻场。 所谓的兼职职位众包,指的是需求方这边有自有工程师配合,只需要某个职位的工程师开发某个模块的项目。比如开发一个 app,后端接口有人开发,但是缺少 iOS 前端开发工程师,那么他们就会发布一个职位招聘前端,来配合公司一...
反射全解
反射的概念 反射的引入: Object obj = new Student(); 若程序运行时接收到外部传入的一个对象,该对象的编译类型是Object,但程序又需要调用该对象运行类型的方法: 1.若编译和运行类型都知道,使用 instanceof判断后,强转。 2.编译时根本无法预知该对象属于什么类,程序只能依靠运行时信息来发现对象的真实信息,这时就必须使用反射了。 3.要是想得到对象...
死磕C语言指针
兜兜转转还是逃不过 C 语言,这该死的缘分。 先看一眼我的西野七濑 学习自:https://zhuanlan.zhihu.com/p/89121683 1 指针 1.1 指针是乜嘢 指针(pointer):一个值为内存地址的变量。 char 类型变量的值是字符,int 类型变量的值是整数,指针变量的值是地址。 1.2 指针的声明 数据类型 *指针名,这里的 * 表明声明的变量是...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长 ...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
使用 Docker 部署 Spring Boot 项目
Docker 技术发展为微服务落地提供了更加便利的环境,使用 Docker 部署 Spring Boot 其实非常简单,这篇文章我们就来简单学习下。首先构建一个简单的 S...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
求小姐姐抠图竟遭白眼?痛定思痛,我决定用 Python 自力更生!
点击蓝色“Python空间”关注我丫加个“星标”,每天一起快乐的学习大家好,我是 Rocky0429,一个刚恰完午饭,正在用刷网页浪费生命的蒟蒻...一堆堆无聊八卦信息的网页内容慢慢使我的双眼模糊,一个哈欠打出了三斤老泪,就在此时我看到了一张图片:是谁!是谁把我女朋友的照片放出来的!awsl!太好看了叭...等等,那个背景上的一堆鬼画符是什么鬼?!真是看不下去!叔叔婶婶能忍,隔壁老王的三姨妈的四表...
python学习目录
这是我学习python的一套流程,从入门到上手 一、Python入门、环境搭建、变量、数据类型 二、Python运算符、条件结构、循环结构 三、Python函数 四、做一次综合练习,做一个控制台的员工管理 """ 需求:员工管理系统 功能: 1.添加员工信息 2.删除员工信息 3.修改员工信息 4.查看单个员工信息 5.查看所有员工信息 6.退出 技术:函数、数据类型(字典列表)、循环、条...
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
别翻了,这篇文章绝对让你深刻理解java类的加载以及ClassLoader源码分析【JVM篇二】
点进文章的盆友不如先来做一道非常常见的面试题,如果你能做出来,可能你早已掌握并理解了java的类加载机制,若结果出乎你的意料,那就很有必要来了解了解java的类加载机制了。代码如下嗯哼?其实上面程序并不是关键,可能真的难不倒各位,不妨做下面一道面试题可好?如果下面这道面试题都做对了,那没错了,这篇文章你就不用看了,真的。
相关热词 c#框架设计 c# 删除数据库 c# 中文文字 图片转 c# 成员属性 接口 c#如何将程序封装 16进制负数转换 c# c#练手项目 c#字段在哪加入 c# 的asp网页倒计时 c# 模拟 鼠标
立即提问