码迷,mamicode.com
首页 > Web开发 > 详细

【轻松前端之旅】CSS盒子模型

时间:2017-10-10 10:04:57      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:盒子模型   div   padding   公众   cti   har   一个   fail   -name   

盒子模型,也叫框模型,在CSS里是很重要的概念。

每个元素都可以看做一个盒子。盒子包含四个部分:外边距(margin)、边框(border)、内边距(padding)、元素内容(element content)。

我们知道html元素可以嵌套,所以,元素内容还可以包含其它元素。

盒子模型如下图所示:

技术分享

注意:

1、height和width属性,指的是元素内容的宽度和高度!元素的总宽度=width+padding+border+margin!

2、background背景属性,应用到元素内容、内边距和边框,不应用到外边距!

 

微信公众号链接:

https://mp.weixin.qq.com/s?__biz=MzAxNTg0MDg5OA==&mid=2649676340&idx=1&sn=a7bdcfc62619e9b2233520969607193a&chksm=83e799d9b49010cfaacc4be3be6e0d57240a86b78cf64dd2096df673f2a53352fd0da0bcc0f7&mpshare=1&scene=23&srcid=1010bxXxiHlhORzvb4UYuxv0#rd

【轻松前端之旅】CSS盒子模型

标签:盒子模型   div   padding   公众   cti   har   一个   fail   -name   

原文地址:http://www.cnblogs.com/xjxz/p/7643878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!