项目场景：

项目场景：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文件的书写时，有两个特殊的标签类型

内联便签：如<a><span>等标签，特点是不会自动换行
块状便签：如<div><p>等标签，特点是独占一行，在显示中呈块状

故在编写代码时在div盒子中的p标签同为块状标签，所以在显示上会产生冲突
div独占一块，p也独占一块在应用上就产生了冲突，在盒子较小时会非常明显如：

在粉色盒子的上端会有空隙
无论你怎么去调试都无法避免

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

解决方案：

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

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

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

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</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>one</p><div class="div1"><p>hello&nbsp;world</p></div></div>
</body>
</html>

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

感谢阅读，如果觉得对自己有帮助的话也请不要吝啬点赞和评论哦！
以后我也会分享更多编程中遇到的问题。谢谢啦！

关于Web前端div中＜p＞等块状标签位置问题相关推荐

web前端开发中需要掌握的技术：
web前端开发中需要掌握的技术: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和表格,DIV,表也可以用于 ...
Web前端开发中的表单练习
在web前端开发中,练习table的使用是非常重要的,通过表单的练习可以很好的帮助我们掌握表单的使用方式. 效果如图所示: 代码如下: css采用了外部样式 HTML部分: <!DOCTYPE ...
表单html遇到的问题及处理,Web前端开发中常见问题及解决方案
Web前端开发中常见问题及解决方案时间:2017-04-24 来源:web前端开发小赢家作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...
web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
J2EE平台WEB组件开发中如何使用定制标签
J2EE平台WEB组件开发中如何使用定制标签 J2EE PLATFORM WEB组件开发涉及SERVLET 和JSP技术,SERVLET和JSP各有其优缺点.JVAVABEAN和定制标签对 ...
Query实现将div中滚动条滚动到指定位置的方法，html中offsetTop、clientTop、scrollTop、offsetTop各属性的解释
TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...
关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）...
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

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

项目场景：

问题描述：

原因分析：

解决方案：

关于Web前端div中＜p＞等块状标签位置问题相关推荐

最新文章

热门文章