使用居中的 div 作为边距和过度使用 div

Posted 2023-03-29

【中文标题】使用居中的 div 作为边距和过度使用 div

【英文标题】：Using centered div as margin and the excessive use of divs

【发布时间】：2018-04-09 01:32:41

【问题描述】：

我对此很陌生，我发现自己使用 div 作为内部内容的绘制边距，而不是使用填充，如下所示：

<div class="container" style="width:100%; height:500px; positon:relative;">
    <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic html tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
	<div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
	<div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
	<div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;">
	    <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;">
		    <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
		</div>
		<div class="subcontainer" style="width:100%; height:60%; position:relative;">
		    <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;">
			    <h5>Build a website</h5>
				<h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6>
				<a href="#"><h6>Leer más</h6></a>
			    
			</div>
		</div>
	</div>
</div>

这是一个好习惯吗？它可以帮助我可视化我想要制作的页面的布局，但我不知道我是否不必要地弄乱了东西。对我来说很好理解。

【参考方案1】：

IMO，这不是一个好习惯，因为

代码长度增加 可读性降低 使用内联样式也不是一个好的选择。

仅使用根据您的页面设计有意义的 div。

例如。对于博客文章，将 div 用于页眉/页脚/主要内容区域，每个用于通过类进行样式设置的博客文章

【讨论】：

你能解释一下为什么我使用居中的 80% 宽度和高度 div 与使用 paddig:10% 时得到不同的结果吗？它应该给出相同的结果，但它没有，填充是否损坏？