CSS:CSS难点解析
2021/11/13 6:10:32
本文主要是介绍CSS:CSS难点解析,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
CSS难点解析
一、CSS的盒子模型:用“盒子模型”封装了“html的元素”,这就是CSS的原理。
1、盒子模型示意图:
2、盒子模型一共有4部分:content;padding;border;margin
2.1、content(内容):content区域是蓝色部分;这个区域封装了html的元素;这个区域能被看见;
2.2、padding(内边距):padding区域是“content”和“border”之间的部分;复合属性;这个区域为透明区域,不能被看见;
2.3、border(边框):border不能看作一条线,它是一个区域;border设定了content的最大范围(content区域不能超过border区域);这个区域能被看见;
2.4、margin(外边框):margin区域是"border"到“盒子模型”边界的距离;复合属性;这个区域不能被看见;
2.5、width和height:仅仅设置的是"content"区域大小;
2.6、盒子模型的高度和宽度
2.6.1、盒子模型的高度= content.height + padding-top + padding-bottom + border + margin-top + margin-bottom;
2.6.2、盒子模型的宽度= content.width + padding-left + padding-right + border + margin-left + margin-right;
3、margin和padding的区别:
3.1、margin(外边距):设定了“两个同层级且相邻的两个盒子”之间的距离;margin用于设定一个盒子模型和另一个盒子模型的位置关系;
3.2、padding(内边距):在本盒子模型中,content和border之间的距离为padding;padding主要设定content相对于border的位置关系;
二、
这篇关于CSS:CSS难点解析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南