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的时候都可以超出。

至于什么时候横向什么时候纵向，是和换行有关系的。中文自动换行，连续的英文和数字看做一个单词不换行。

父节点的宽只是他实行自动换行的标准。

拟人些说就是文字到达父节点最大宽度了时，来判断他是不是完成了一整个单词(或者中文)，完成了就换行，不完成就继续往后超出。

你可以试试在英文之间打个空格，你会发现的