盒子模型[CSS][web前端]

盒子模型(box model)

盒子模型有称之为盒模型,框模型

CSS将页面中的所有的元素都设置为了一个矩形的盒子,将元素设置为矩形的盒子之后,对页面到的布局就变成了将不同的盒子放到不同的位置

• 每一个盒子都由以下几部分组成:
  1. 内容区(content)
  2. 内边距(padding)
  3. 边框(border)
  4. 外边距(margin)

内容区(content): 元素中的所有子元素和文本内容都在内容区中排列

• 内容区的大小由width和height两个属性来设置
  • width设置内容区的宽度
  • height设置内容区的高度

边框(border): 边框属于盒子边缘,边框里面属于盒子内部,除了边框就是盒子的外部

• 注意: 边框的大小会影响整个盒子的大小

• 要设置至少需要设置三个样式:

  1. 边框的厚度(也就是边框的宽度) : border-width

     • 单位为像素
     • eg: border-width:3;

  2. 边框的样式 : border-style

     • 样式可以为:
       ①solid(实线)

       ②dotted(点状线)

       ③double(双线)

     • eg:border-style:dotted;

  3. 边框的颜色 : border-color

     • eg: border-color:blue;
  • 这三个样式我们可以使用一个border样式来解决
    • border
      • eg: border:3px dotted blue

我们设置边框的时候还可以分别对四个边界进行单独处理:

1. border-top 上边界
   • eg: border-top:3px dotted blue
2. border-right 右边界
   • eg: border-right:3px dotted blue
3. border-bottom 下边界
   • eg: border-buttom:3px dotted blue
4. border-left 左边界
   • eg: border-left: 3px dotted blue

外边距(margin): 使用margin样式可以设置外边距

1. margin-top 表示上外边距
   • eg: margin-top:100px;
2. margin-right 表示右外边距
   • eg: margin-top :100px;
3. margin-bottom 表示下外边距
   • eg: margin-bottom:50px;
4. margin-left 表示左外边距
   • eg: margin-left:100px;

上面的四种边距样式也可以合并为一个样式来完成:

• margin
  1. 如果为一个值,那么就是四个方向统一为这一个值大小的外边距
  2. 如果为两个值,那么第一个值为上下,第二个值为左右
  3. 如果是三个值,那么第一个值为上,第二个值为左右,第三个值为下
  4. 如果是四个值,第一个值为上,第二个值为右,第三个值为下,第四个值为做
     • 我们可以发现是按照顺时针的顺序(上 , 右 , 下 , 左)

内边距(padding) : 内边距,也叫做填充,使用padding可以设置内边距

1. padding-top 表示上内边距
   • eg: padding-top :100px;
2. padding-right 表示上内边距
   • eg:padding-right:100px;
3. padding-bottom 表示上内边距
   • eg:padding-bottom:50px;
4. padding-left 表示上内边距
   • eg: padding-left:100px;

同样的上面的四种内边距样式也可以合并为一个样式来完成,就和上面的外边距的设置方式是一样的

补充:

标签大小: 内容区 + 内边距 + 边框

设置边框的时候有一个样式为: border-radius 用于设置边框的半径(其实就是将边框设置为圆角)

外边距: 是一个标签和另一个标签之间的距离:, 外边距不会影响标签的大小,但是会影响标签的位置

左右外边距可以设置为auto, 并且当左右外边距都设置为auto的时候标签就会水平居中

一般成熟的前端工程师在开始设置样式的时候都可以先执行一个如下操作:

*{
    margin : 0;
    padding : 0;
}

浮动后的标签不会占用原来的空间大小,也不会撑开父级标签

• 解决方法一: 给父标签设置宽和高
• 解决方法二: 清除浮动

浮动之后的标签会变成块级标签,并且标签的宽和高都是被内容撑开