第二篇:前端开发-css盒模型简介
程序员文章站
2024-01-06 10:38:04
css盒模型简介 1、css盒模型是网页布局的基石!盒模型从内到外一共包含四个区域: 内容区 、内填充(补白)、边框、外间距。其中内填充和外边距得以实现的途径要依靠padding和margin两个属性。 2、padding用法: 1、padding长在内容区与边框之间,在盒子内部; 2、paddin ......
css盒模型简介
1、css盒模型是网页布局的基石!盒模型从内到外一共包含四个区域:
内容区 、内填充(补白)、边框、外间距。其中内填充和外边距得以实现的途径要依靠padding和margin两个属性。
2、padding用法:
1、padding长在内容区与边框之间,在盒子内部;
2、padding是为了调整子元素在父元素里面的位置关系;
3、padding的特点:padding的值会把盒子撑大;
4、如果盒子要想保持原来的大小,需要在原来宽高的基础上减去padding值;
5、给与一个方向设定padding值:padding-left/right/top/bottom;
6、padding不能设置负值;
7、padding不会对背景图位置有影响;
8、如果一个盒子没有设定固定的宽高,加上padding值以后可以不用减。
3、margin用法:
1、margin长在元素之外;
2、margin控制同级元素之间的位置关系;
3、margin不会对盒子本身造成影响;
4、给单一方向添加margin值:margin-left/right/top/bottom;
5、margin可以设置负值;
6、控制子元素在父元素之间的位置关系,用padding最合适;
7、margin常出现的bug:
a、当父元素在第一个子元素没有设置浮动的状态下,如果第一个子元素添加margin-top/bottom会错误的把间距加到父元素上面;
b、上下相邻两个元素之间的margin值,不会叠加,按照最大值来设定。左右相邻两个元素之间的margin值会叠加
8、margin:0 auto;即上下0,左右auto,会让子元素在父元素中居中。