盒子模型

image.png

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

内容(content)
盒子里装的东西
网页中通常是指文字和图片

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

边框(border):盒子本身

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


标准盒子模型

image.png

IE盒子模型

image.png

内容(content)- 属性

image.png

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

image.png

image.png

image.png

边框(border) – 属性

image.png

image.png

border-radius 设置边框圆角
border-image 属性,可以使用图片来创建边框

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

image.png

image.png

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

推荐阅读更多精彩内容

  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...
    zhaolion阅读 9,758评论 9 85
  • 盒子模型简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CS...
    IOLG阅读 4,983评论 0 0
  • 前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏...
    秦至阅读 4,134评论 0 3
  • 一.边框 (上) 1.什么边框? 边框就是环绕在标签宽度和高度周围的线条 2.边框属性的格式 2.1连写(同时设置...
    壹点微尘阅读 2,860评论 0 0
  • 感恩嫂子,通过她我又回到这个正能量的大家庭,学习更多的东西。 感恩我的客户们,没有你们的到来,我也不会有那么多的收入。
    孔美荣阅读 923评论 0 1