新技能get!判断盒子的实际大小及位置。。。

最近由于新学css，实践经验又太少了，对盒子模型的内外边距实在很难有形象的想象和理解，纠结了很久。。。

今天发现了一个好办法辅助布局时看到盒子的实际大小和位置，在此记录：

如例图（妙味课堂的例子）：

css代码是这样：

.top_menu li { float:left; /*左浮动，靠左侧*/background:url(../images/top_ico.png) no-repeat right 14px; /*背景图片，不平铺，水平方向靠每个li容器右侧，垂直方向向下14像素*/font-size:13px; /*文字大小13像素*/line-height:30px; /*行高30像素*/padding-right:18px; /*li容器内部文字距离容器右侧18像素*/margin-right:15px; /*右外边距*/}

查看盒子方法，加边框！！

结果：

css代码：

.top_menu li { float:left; /*左浮动，靠左侧*/background:url(../images/top_ico.png) no-repeat right 14px; /*背景图片，不平铺，水平方向靠每个li容器右侧，垂直方向向下14像素*/font-size:13px; /*文字大小13像素*/line-height:30px; /*行高30像素*/padding-right:18px; /*li容器内部文字距离容器右侧18像素*/margin-right:15px; /*右外边距*/border-style: solid ;/*辅助查询盒子大小*/border-color:green;}

转载于:https://www.cnblogs.com/wwHww/p/9023207.html

新技能get!判断盒子的实际大小及位置。。。相关推荐

AI时代，产品经理需要掌握的5项新技能
不同于传统的产品经理,AI时代的产品经理更加注重的如何将技术应用在业务问题上.AI时代,产品经理最重要的职责就是提供数据规范,所以这也要求产品经理对数据有足够的认识.文章对AI时代产品经理需要掌握的新 ...
20155332 如何获取新技能+c语言学习调查
如何获取新技能+c语言学习调查你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...
一文解锁华为云新技能-AIOT开发全流程【设备接入-ESP端侧数据收集[MQTT]-实时数据分析】（步步截图较详细）
一文解锁华为云新技能-AIOT开发全流程[设备接入-ESP端侧数据收集[MQTT]-实时数据分析](步步截图较详细) 在这篇你将会接触到:从物联网工程师从硬件层-通信层到应用层全流程:开发华为云最基本 ...
自制拖把机器人_连拖布都能自己清洗智能扫拖机器人再添新技能
文/姚华从前做家务活是一件非常令人头疼的事情.耗时耗力,但自从扫地机器人.洗碗机.干衣机等懒人神器出现后,人们在家居清洁方面的烦恼得到了有效解决.如今云鲸智能又发布了世界上首款可以自己洗拖布的拖地机 ...
非常适合程序员学习新技能的最佳网站
今天给程序员们整理了一份福利,想要学习新编程技能的朋友千万不要错过啦,针对程序员推荐了50个适合学习新技能的最佳网站,涵盖了各类编程语言.数据处理.艺术.科技等等.它们可以教会你实践练习任何技能,从 ...
38个学习新技能的最佳网站
忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练习任何技能,从制作豆沙到用 node.js 开发 app,而且它们都是免费 ...
学习新技能的37个最佳网站
忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练习任何技能,从制作豆沙到用 node.js 开发 app,而且它们都是免费的 ...
[转载] 学习新技能的37个最佳网站
原文: http://codecloud.net/the-37-best-websites-to-learn-something-new-4772.html 大部分都是英文课程, 对英文要求较高, 有 ...
[站点推荐]001.学习新技能的37个最佳网站(The 37 Best Websites To Learn Something New)
忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练习任何技能,从制作豆沙到用 node.js 开发 app,而且它们都是免费 ...

新技能get!判断盒子的实际大小及位置。。。

新技能get!判断盒子的实际大小及位置。。。相关推荐

最新文章

热门文章