【轻松前端之旅】CSS盒子模型
2017-10-10 08:39
543 查看
盒子模型,也叫框模型,在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
相关文章推荐
- 十款让 Web 前端开发人员更轻松的实用工具
- css3帮你轻松实现圆角效果,不一样的前端页面。
- 【轻松前端之旅】<!DOCTYPE>标签
- 十款让 Web 前端开发人员更轻松的实用工具
- BugHD for JavaScript上线,轻松收集前端 Error
- 还要多少年, 前端开发才能像后端那样轻松
- BugHD for JavaScript上线,轻松收集前端 Error
- 【转】十款让 Web 前端开发人员更轻松的实用工具
- 前端轻松破解支付宝AR抢红包
- 十款让 Web 前端开发人员更轻松的实用工具
- 前端基础——CSS盒子模型
- 集成5.5-8的IE版本的IETester让WEB前端的兼容轻松调试
- 前端小白如何轻松学习JavaScript
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别?
- 十款让 Web 前端开发人员更轻松的实用工具
- 支付宝AR抢红包?前端轻松就破解~
- 支付宝AR抢红包?前端轻松就破解~
- 会前端就可以轻松建网站
- 【轻松前端之旅】<a>元素妙用
- ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar