如何让网页布局稳定性和标准性?

1.站在标准流的角度看padding 和 maring 、width等属性稳定性

我们知道页面布局的时候,控制盒子位置距离等,有盒子本身大小,padding和margin来做。

因此,再这里我们会根据稳定性来看这三者的先后顺序:

其中稳定性最好的就是盒子本身的高度和宽度了,我们优先考虑这个。 因此,很多情况下,我们会考虑利用高度剩余法,宽度剩余法来做,而不是padding和margin。

**这个评论和下面的文本域框有个小距离, 此时,我们给这个评论一个h2标签,高度正好从评论上方,到文本域上的高度就好了。

h2 里面文字内容默认是靠左上对齐的,高度用不了,就剩下了,这就是高度剩余法。**

其次,我们才考虑padding ,因为padding也可以看做特殊的盒子高度和宽度,最后我们再用margin来做。因为margin会有边距合并的问题。

2.标准流、浮动流和定位的稳定性

标准流再里面是最稳定的,就是块级元素上下显示,行内一行显示,都是最稳定的。

浮动和定位都"脱标"了,稳定性没那么稳定,所以,我们应该遵循如下原则:

页面布局,能用标准流去做的不用浮动去做,如果要用浮动做的,就不用定位去做。

3.清除内外边距

cpp 复制代码
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
相关推荐
brzhang3 分钟前
实时通信的那些事儿:短轮询、长轮询、SSE 和 WebSocket 到底怎么选?
前端·后端·架构
玄魂8 分钟前
开源之夏2025-VisActor 社区题目及参赛者选/培介绍
前端·开源·资讯
浪裡遊8 分钟前
TypeScript中的函数类型定义与类型约束
javascript·ubuntu·typescript
camellia9 分钟前
SpringBoot(二十四)SpringBoot集成redis哨兵集群
java·前端·后端
YH丶浩12 分钟前
React 实现爱心花园动画
前端·react.js·前端框架
啵啵学习19 分钟前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
Mintopia25 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia26 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
独立开阀者_FwtCoder41 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
Frankabcdefgh1 小时前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展