欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

第二篇:前端开发-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,会让子元素在父元素中居中。

 

上一篇:

下一篇: