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难点解析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程