HTML5-8(盒子模型)

盒子模型

一.简单的介绍下盒子模型

网页上的每一个标签都是一个盒子,每个盒子都有四个属性

  • 1.内容(content)

    盒子里装的东西
    网页中通常是指文字和图片

  • 2.填充(padding,内边距)

    怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料

  • 3.边框(border):盒子本身

  • 4.边界(margin,外边距)

    盒子摆放的时候的不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出

下面是一个标准的盒子模型

标准的盒子模型

下面是IE盒子模型

下面是IE盒子模型

二.内容(content)属性

内容(content)属性

三.填充(padding,内边距) – 属性

填充(padding,内边距) – 属性
padding属性的解释

例如下面的分析

padding的分析

四.边框(border) –属性

边框(border) –属性

五.边界(margin,外边距) –属性

边界(margin,外边距) –属性**
margin属性的解释

例如:

边界(margin,外边距) –属性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...
    zhaolion阅读 9,764评论 9 85
  • 盒子模型简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CS...
    IOLG阅读 4,991评论 0 0
  • 前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏...
    秦至阅读 4,147评论 0 3
  • 文/HC麦子 半部残卷,一杯香茗,任岁月荏苒,花落成阵,独守一纸墨染,游离在寂寞的边缘,悠然品茗静谧韵味。 柔柔的...
    六小麦子阅读 2,806评论 0 7

友情链接更多精彩内容