盒子模型

盒子看作比如


内容是文字图片或者其他标签元素

padding盒子的内边距

margin外边距(两个盒中间的距离)

盒模型边框border

内填充外边距边框都有四个方向top left right buttom

e.g., padding-top

实际宽度是内容+左右的内填充+边框

块级标签都具备盒子模型特征

盒模型内的内容可以是文字,图片,标签等等。视频应该也可以,盒子与盒子内的内容之间的距离用 padding 表示,两个盒模型之间的距离用 margin 表示,盒模型的边框用 border 表示.内填充,外边距,边框都有四个方向top,left right,buttom.盒

块级元素标签具备盒子模型的特点.css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)=

左边界(margin)+左边框(border)+左填充(padding)+内容宽度(width)+右填充(padding)+右边框(border)+右边界(padding)


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...
    zhaolion阅读 9,758评论 9 85
  • 盒子模型简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CS...
    IOLG阅读 4,983评论 0 0
  • 前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏...
    秦至阅读 4,134评论 0 3
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 大家好,现在天气逐渐变热,那么在夏天到来时,汤mu哥现在就教大家做个——酸辣萝卜 准备材料:白萝卜、醋、辣椒。 那...
    12月32号阅读 1,891评论 0 0