介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
& lt;才能meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
& lt;才能title> Document</title>
& lt;/head>
& lt; style>
# box1 {才能
,,,宽度:,500 px;
,,,身高:,200 px;
边境:,,,,2 px solid 蓝色;
,,,填充:,10 px;
,,}
# box2 {才能
,,,白色空间:,nowrap;}
,,,显示:,inline-block;
,,}
# box3 {才能
,,,宽度:,300 px;
,,,身高:,200 px;
background - color,,,:, blueviolet;
,,,显示:,inline-block;
,,,vertical-align:,中间;
,,}
# box4 {才能
,,,宽度:,400 px;
,,,身高:,200 px;
background - color,,,:,黑色;
,,,显示:,inline-block;
,,,vertical-align:,中间;
,,}
& lt;/style>
& lt; body>
& lt;才能div id=癰ox1"比;
,,,& lt; div id=癰ox2"比;
,,,,,& lt; div id=癰ox3"祝辞& lt;/div>
,,,,,& lt; div id=癰ox4"祝辞& lt;/div>
,,,& lt;/div>
& lt;才能/div>
& lt;/body>
& lt;/html> & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
& lt;才能meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
& lt;才能title> Document</title>
& lt;/head>
& lt; style>
# box1 {才能
,,,宽度:,500 px;
,,,身高:,200 px;
边境:,,,,2 px solid 蓝色;
,,,填充:,10 px;
,,}
# box2 {才能
,,,白色空间:,nowrap;}
,,,显示:,inline-flex;
,,}
# box3 {才能
,,,宽度:,300 px;
,,,身高:,200 px;
background - color,,,:, blueviolet;
,,,vertical-align:,中间;
,,}
# box4 {才能
,,,宽度:,400 px;
,,,身高:,200 px;
background - color,,,:,黑色;
,,,vertical-align:,中间;
,,}
& lt;/style>
& lt; body>
& lt;才能div id=癰ox1"比;
,,,& lt; div id=癰ox2"比;
,,,,,& lt; div id=癰ox3"祝辞& lt;/div>
,,,,,& lt; div id=癰ox4"祝辞& lt;/div>
,,,& lt;/div>
& lt;才能/div>
& lt;/body>
& lt;/html>
这篇“纯CSS如何让子元素突破父元素的宽度限制”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“纯CSS如何让子元素突破父元素的宽度限制”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获、下面让我们一起来看看具体内容吧。
在写样式中,我们可以经常看到这样的情况
& lt; div 风格=翱矶?,300 px;边界:,4 px solid # 000;保证金:,20 px;填充:,2 px;“比;
,,,父元素
,,& lt; div 风格=氨呔?,1 px solid 蓝色;高度:,100 px;空白:,nowrap;}“比;
,,,,& lt; span>子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素& lt;/span>
,,& lt;/div>
,& lt;/div>
如果你仔细思考过这个现象的话,为什么?可能会问子元素不应该撑开父元素的宽度吗?就想撑开父元素的高度一样,为什么?那么如何让这个子元素的父元素撑开这个宽度呢?这里提供两种解决方案。
<强> 1。显示:inline-block
布局样式如下
结果如图,box3和box4撑开了box2的宽度
<强> 2。显示:inline-flex
布局样式如下
效果如下图
感谢你的阅读,希望你对“纯CSS如何让子元素突破父元素的宽度限制”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注行业资讯频道!
