html超出父元素,【Web前端问题】HTML CSS:子元素什么时候可以超出父元素限制的范围?...
疑问:
子元素什么时候可以同时从水平和竖直方向超出父元素的范围?
什么时候会从水平方向超出?
什么时候会从竖直方向超出?
首先,在HTML中,一个父元素包裹着一个子元素
第二步:在CSS中设置父元素和子元素的范围,其中子元素的宽高是超大于父元素的宽高的:
.parent{
width:300px;
height:300px;
border: 2px solid blue;
}
.child{
width:400px;
height:400px;
border: 2px solid red;
}
在浏览器中运行,如图,可以得到第一个结论:子元素是可以超出父元素的范围限制的,
且可以从水平和竖直的方向同时超出
第三步,我们先在HTML中添加进一些中文文字:
如图:可以发现,当加进很多中文文字时,也是可以超出
但是为什么这里会先从竖直方向超出,而不会从水平方向超出呢?
第四步:我们在HTML中添加进一些英文文文字:
如图:可以发现,当加进很多英文文字时,也是可以超出
但是为什么这里会先从水平方向超出,而不会从竖直方向超出呢?
**所以,究竟什么时候子元素可以同时从水平和竖直方向超出父元素的范围?
什么时候会从水平方向超出?
什么时候会从竖直方向超出?**
回答:
好像就是这样设计的,英文或数字在水平方向不会自动换行(所以需要设置word-wrap:break-word来强制换行),中文在水平方向会自动换行。
回答:
你这里的认知错了。不是什么时候超出。
在overflow不是hidden的时候都可以超出。
至于什么时候横向什么时候纵向,是和换行有关系的。中文自动换行,连续的英文和数字看做一个单词不换行。
父节点的宽只是他实行自动换行的标准。
拟人些说就是文字到达父节点最大宽度了时,来判断他是不是完成了一整个单词(或者中文),完成了就换行,不完成就继续往后超出。
你可以试试在英文之间打个空格,你会发现的
html超出父元素,【Web前端问题】HTML CSS:子元素什么时候可以超出父元素限制的范围?...相关推荐
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题(八)
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
- web前端学习中CSS,JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
目录 一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素 三.HTML DOM树 结语 一.什么是HTML? HTML语言,即超 ...
- html获取数组的前三个元素,web前端:js 获取数组最后一个元素
Javascript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在html(标 ...
- 自学web前端怎么学?web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
最新文章
- linux删除网卡bond,linux下网卡bond的基本配置及错误
- emacs 跳转到指定行
- Java 用float时,数字后面加f,这样是为什么?
- 短板效应C++代码实现
- Python—Mysql—Dbvisualizer
- 剑灵力士卡刀ahk_技术宅教你:召唤代码一键卡刀详细教程帖
- 如何部署Windows Server 2016 中的Storage Spaces Direct超聚合解决方案
- GitHub 热榜:不用 PS,一键去除照片中的对象,这个神器可试玩
- 新闻简报(7/18)
- PS、PR素材资源网站
- windows下安装apache
- logo设计的基础知识
- mysql5.7导出数据提示–secure-file-priv选项问题的解决方法
- 译:Dataiku 白皮书之《在银行和保险行业应用数据科学》
- 用线性规划解决配方问题
- 怎样重启Gunicorn
- 图像质量评价指标与通用数据集
- vue 条件判断绑定内联样式
- Rational Function
- 京东顺丰江湖一战,在所难免!