关于Web前端div中<p>等块状标签位置问题

项目场景:

项目场景:web前端开发时div盒子中p等块状标签位置错误的问题

问题描述:

在web前端网页样式的制作时,常常会出现在div盒子中用p等块状便签,文本的位置会出盒子的边界,而且与padding和margin等内外边距问题的冲突。在盒子中写文本时,文字常常不会因为内外边距改变位置,如
.one{
wigth: 100px;
hight: 100px;
background-color: red;
margin:50px;
}
<div class="one">
<p> hello&nbsp;world</p>
</div>

文字会超出边界,无论怎么移动盒子的位置都调整不对,语法没有问题但一直调试不好。


原因分析:

在html文件的书写时,有两个特殊的标签类型

  1. 内联便签:如等标签,特点是不会自动换行
  2. 块状便签:如

    等标签 ,特点是独占一行,在显示中呈块状

故在编写代码时在div盒子中的p标签同为块状标签,所以在显示上会产生冲突
div独占一块,p也独占一块在应用上就产生了冲突,在盒子较小时会非常明显 如:
关于Web前端div中<p>等块状标签位置问题_第1张图片
在粉色盒子的上端会有空隙
无论你怎么去调试都无法避免
关于Web前端div中<p>等块状标签位置问题_第2张图片

即使是把div缩小,也只会溢出不会去填满


解决方案:

在解决问题之前眼先了解一个css中的属性。

在css(层叠样式表中)有一个display属性 他的三个常见值为

关于Web前端div中<p>等块状标签位置问题_第3张图片
这也是常见的隐藏元素的做法,在css中设置display 的值为none这个元素也就不会被看到,例如隐藏h1标签等。
另外两个值也是本次的重点
block块级元素
inline内联元素
在解决本次的问题中,我们可以把块级元素div中产生冲突的p标签更改为内联元素,然后通过css来控制内容的位置,这样就更好的操控div中的元素了
也避免了块级元素间的冲突问题
如:

 
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<style type="text/css">
	.div{
		width: 200px;
		height: 200px;
		/*margin: 20px;
		padding:20px;*/
		background-color: yellow;
	}	
	.div1{
		width: 100px;
		height: 100px;
		background-color: pink;
	}
	.div p{
		display: inline;
	}
style>
<body>
<div class="div">
<p>onep>
	<div class="div1"><p>hello worldp>div>
	div>
body>
html>

这样,div中的p标签为内联元素,不会占用块。

关于Web前端div中<p>等块状标签位置问题_第4张图片
感谢阅读,如果觉得对自己有帮助的话也请不要吝啬点赞和评论哦!
以后我也会分享更多编程中遇到的问题。谢谢啦!

你可能感兴趣的:(html,前端,css,html,css3)