盒模型

笔记整理自
学堂在线的刘强老师的视频教学 课程十分清晰、课件简明且附件可以自由下载 超赞！适合初学者也适合有经验开发者查漏补缺
Web前端攻城狮(2021春)

1. 有几种盒模型
   • IE盒模型(border + padding + content)
   • 标准盒模型(content)
     通过box-sizing可以修改盒模型计算方式
2. 块盒和行盒
3. margin collapse:

垂直方向的margin会被合并
同号: 取绝对值大的
异号: 两者相加
两正的垂直方向margin 实际两个元素的间距是根据 两个值中大的那一个
两负的垂直方向margin 两个元素会重叠 重叠部分是根据 两个值中绝对值大的那一个 (盒模型的属性中只有margin可以设为负值)
一正一负的垂直方向的margin 两个元素的间距 是两个值相加

4. 圆角:

圆角是用半径为x的正圆 截取盒子
可以是椭圆 border-radius: 10px 20px 30px / 20px 10px 20px 30px;(椭圆水平方向半径分别是 10px 20px 30px 20px;椭圆垂直方向半径是20px 10px 20px 30px。)

5. 阴影:

不会占据空间

box-shadow: 10px 6px 12px 2px gray; // 水平|垂直|模糊程度|扩张大小|颜色

6. 背景:

background: clip|color|image|repeat|position|size  

background-size

• 默认图片大小 不缩放
• 100px auto;
• contain 缩放图片 使容器能包含图片(有一个边(水平或垂直方向)达到容器的值)
• cover 按比例缩放图片 直至图片能覆盖容器 (图片的部分内容可能在容器外 被裁剪) background-clip
• border-box;
• padding-box;
• content-box; background-repeat
• no-repeat
• repeat(default)
• repeat-x
• repeat-y
  background-position
• 设置边缘
  1. 设置单个边缘, 另一方向会居中, 例:

     background-position: top; /*吸顶且水平居中*/  
     background-position: right; /*吸右且垂直平居中*/
     

  2. 水平垂直居中

     background-position: center; 
     

  3. 设置两个边缘, 例:

     background-position: top right; /*右上角*/
     

• 设置值
  1. 设置具体的值,例:

     background-position: 20px 30px; /*较左上角顶点 水平方向20px 垂直方向30px;*/  
     background-position: 50% 50%; /*水平方向50%, 垂直方向50%(容器的50%和图片的50%重合)*/
     

• 设置边缘和值

  background-positon: bottom 20px right 20px;