盒子模型

盒子模型

网页上的每一个标签都是一个盒子

每个盒子都有四个属性

  • 内容（content）

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

  • 填充（padding，内边距）

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

  • 边框（border）：盒子本身

  • 边界（margin，外边距）

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

    [图片上传失败...(image-60790c-1513748065468)]

标准盒子模型

nonboxModel.png

内容（content） – 属性

box.png
box.png

填充（padding，内边距） – 属性

3.png
1.png
2.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS入门笔记 － 认识盒子模型
    引言 这次给大家带来了CSS－盒子模型部分的笔记，大家一同交流😊 认识盒子模型之前，先来了解一下CSS元素的分类吧...
    zhaolion阅读 4,426评论 9赞 85
  • CSS的盒子模型
    网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)...
    feelinghappy618阅读 300评论 0赞 0
  • 从CSS盒子模型说起
    前言 总括： 对于盒子模型，BFC，IFC和外边距合并等概念和问题的总结 原文地址：从CSS盒子模型说起 知乎专栏...
    秦至阅读 859评论 0赞 3
  • HTML5中盒子模型的基础知识
    本章摘要 : 主要是了解盒子模型的基础知识,了解相关的概念. 1, 什么是盒子模型?网页上的每一个标签都是一个盒...
    Alexander阅读 8,017评论 0赞 1
  • HTML5-8(盒子模型)
    一.简单的介绍下盒子模型 网页上的每一个标签都是一个盒子,每个盒子都有四个属性 1.内容（content）盒子里装...
    IIronMan阅读 597评论 0赞 1

友情链接更多精彩内容