网页制作 
首页 > 网页制作 > 浏览文章

css 调试方法与经验总结

(编辑:jimmy 日期: 2024/11/16 浏览:3 次 )
本总结不断更新,主要记录本人调试过程中所终结的经验与方法。

毕竟本人不是做浏览器前端的,所以如有不详敬请见谅。

css关系到界面的美观,有时候功能实现了。界面确丑到没人用,终归还是一件失败的产品,所有好的产品不仅需要实用的功能,更加需要贴心美观的外观。

1.如果遇到整体布局工整,个别布局偏移的。

可以使用浏览器取道偏移的组件(放大镜),然后得到应用到这个组件的css文件中的css效果进行修改即可,如下图所示:

css 调试方法与经验总结 

可以再右边获取到css样式,以及css详细信息:

查看到样式后,还可以看到对应样式所属于的文件,找到这个文件再进行样式修改即可。

css 调试方法与经验总结 

以及css详细信息:

css 调试方法与经验总结 

如上右图所示:

这里可以观测到这个组件的大小:宽:177+10+10,高:18+8+8

组件的内边距:padding:10

组件的边界:border:组件的边界表示这里外边就不是这个组件的组成部分了。

如上左图:

在边界外边还可以有外边界:margin:表示这个组件空出的长和宽
上一篇:CSS控制图片和文字在同一行显示且对齐的3种方法
下一篇:CSS3实现超慢速移动动画效果非常流畅无卡顿
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。