前端学习笔记

day04

一、盒子模型

1. 盒子模型：盒子即为容器 , 任何一个元素都可以称之为容器 , 只不过容器有大有小 , 区块划分的元素是比较大的容器 , 文本修饰的标签属于比较小容器 , 嵌套规则是大容器嵌套小容器。
2. 组成部分：内容区域（宽和高）、内边距区域、边框区域、外边距区域

内边距 ：
1.内边距指的是内容和和边框至今的距离, 也可以理解成边框里面的距离

2. 属性：
   padding-方向词

  1）padding-top：上边距
  2）padding-right：右边距
  3) padding-bottom：下边距
  4) padding-left：左边距

3. 给盒子增加padding时要注意会使盒子变大相应对的值

外边距：

1. 外边距指的是元素与元素之间 , 边框与边框之间的距离
2. 属性：
   margin-方向词

  1） margin-top：上外边距
  2） margin-right：右外边距
  3)  margin-bottom：下外边距
  4)  margin-left：左外边距

3. 关于盒子的两个问题：
   1）父子盒子：两个盒子是父子关系的时候 给子盒子增加margin-top值不会生效
   解决方法：1、让其中一个盒子浮动 2、给父盒子增加内边距 3、给父盒子增加边框再使用margin-top，但是要让边框使用transparent变成透明的 4、使用overflow：hidden；
   2）兄弟盒子增加边距，垂直的两个盒子的边距取两个盒子相邻外边距的最大值，水平的两个盒子的外边距取相邻两个盒子的和

边框：

1. 边框指盒子外部的边界
2. 边框可以更改颜色、宽度、样式…

border ：solid black 5px；solid是实线