how2j.cn


工具版本兼容问题
结合边框 内边距 外边距的学习 理解边框模型


示例 1 :

边框模型

真正决定一个元素的表现形式,是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离,即为内边距 5px
灰色框,是指边框与其他元素之间的距离,即为外边距:10px

.box{
width:70px;
padding:5px;
margin: 10px;
}
运行效果
边框模型
<style> .box{ width:70px; padding:5px; margin: 10px; } div{ border:1px solid gray; font-size:70%; } </style> <div> 其他元素 </div> <div class="box"> 内容宽度70px <br><br> 内边框:5px <br> <br> 外边距:10px <br> </div> <div> 其他元素 </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-12-19 第二个图没答案
87626380
没答案啊老铁




1 个答案

152634 答案时间:2018-01-01
那个不是练习例子的图,而是解释本知识点的一个图




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2016-12-07 上题求答案
靜心
站长溜了,没解决问题




1 个答案

how2j 答案时间:2016-12-08
好嘛,被你抓住了。在这个模型图里没有把边框的宽度1px表示出来。 这个模型图在简历在没有border的基础上的。 但是为了视觉上的可观察性,我给div都加上了1px像素的边框,这样才好观察到内边距和外边距。 而模型图里是没有考虑到这1px像素的。




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2016-06-02 关于边框那1px*2




提问之前请登陆
关于 前端基础-CSS-边框模型 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图