黄劲凯盒模型笔记

 盒子模型的概念:

所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子,也就是一个装内容的容器。每个矩形都由元素的内容、内边距、边框和外边框组成。

一个盒子占据的区域:

边框(border)+内边距(padding)+内容区域(weight和height)+外边距(margin)

背景色可以穿透边框

结论:

网页就是多个盒子嵌套排列的结果。

内边距出现在内容区域的周围,当给元素添加背景色或背景图像时,该元素的背景色或背景图像也出现在内边距中。

外边距是该元素与相邻元素之间的距离。

如果给元素定义边框属性,边框将出现在内边距与外边距之间。

ie6盒模型bug:

背景色不能穿透边框(需保证DOTYPE为HTML5的标准)

边框设置:


边框的妙用:

border: 0 none;    去掉默认边框,兼容所有浏览器

用border实线绘制圣诞树


内边距的使用:

padding合写:上 右 下 左顺序。背景色可穿透内边距

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

推荐阅读更多精彩内容