css

一 、盒子模型

1、盒尺寸四大家族

每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

• 一个元素实际占地宽度
  左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
• 一个元素实际占地高度
• 上外边距+上边框+上内边距+内容⾼度+下内边距+下边框+下外边距
  

2.元素内容

元素的内容可以是元素内的⽂字，也可以是元素的宽度和⾼度，⼤部分内联元素设置宽⾼⽆效，只
能依靠内容撑开，因此内容就是内联元素中的⽂字。

（1）内联元素盒模型

内联元素的宽⾼是auto，宽度⾼度只会⼀直随内容的宽度⾼度在同步变化。设置上下内边距和外边
距⽆效。

• 宽度⾼度是auto，靠内容撑开
• 设置宽度⾼度⽆效
• 设置上下内外边距⽆效
• 排列⽅式，从左⾄右

（2）内联元素盒模型块级元素盒模型

• 块级元素就可以设置宽度和⾼度，
• 只有⽂字内容不设置宽度⾼度，宽度为⽗元素的⼀⾏，⾼度为内容撑开的⾼度。
• 宽度⾼度可以设置
• 内外边距设置均有效果
• 排列⽅式，从上⾄下

3.内边距

（1）内边距的属性

• padding指盒⼦的“内补间”，宽⾼之外到边框以内的距离。-
• 可以设置⻓度，如px、em、rem等,且不⽀持负值
  • padding有四个⽅向分别是上、右、下、左
  • padding-top 上内边距
  • padding-right 右内边距
  • padding-bottom 下内边距
  • padding-left 左内边距

（2）内边距的值

    ###### padding:⻓度值;

• 1个值，将⽤于全部的四边。
• 2个值，第⼀个⽤于上、下，第⼆个⽤于左、右。
• 3个值，第⼀个⽤于上，第⼆个⽤于左、右，第三个⽤于下。
• 4个值，将按上、右、下、左的顺序作⽤于四边。

4.外边距

（1）外边距的属性

• margin指盒⼦的外边距，外边距是当前元素和其他元素之间的距离。
• 可以设置⻓度，如px、em、rem，%等,%取值都是⽗元素宽度的百分⽐取值。
• 正值时是增⼤该⽅向外边距，负值时是缩⼩该⽅向外边距。
  • margin有四个⽅向分别是上、右、下、左
  • margin-top 上外边距
  • margin-right 右外边距
  • margin-bottom 下外边距
  • margin-left 左外边距

(2)内边距的值

和内边距⼀样，外边距可以简写1～4个值，下和右不会产⽣效果的原因，是因为外边距其实是当
前元素与同级元素之间的距离。

• 1个值，将⽤于全部的四边。
• 2个值，第⼀个⽤于上、下，第⼆个⽤于左、右。
• 3个值，第⼀个⽤于上，第⼆个⽤于左、右，第三个⽤于下。
• 4个值，将按上、右、下、左的顺序作⽤于四边。

（3）margin的无效情形

外边距可以让元素发⽣位移效果，但只有左和上外边距会移动当前元素。下和右外边距，只能让当
前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去⽆效。因为， margin 是设
置同级元素间的间隔，并不是设置它在⽗元素中的位置。如果右侧和下⾯并没有元素，就不会出现
效果。

（4）margin的auto取值

margin有⼀个特殊的取值是auto，auto对上下外边距⽆效，左右取相同的值，使当前元素在⽗元
素内左右居中。

• 块级元素在⽗元素中⽔平居中 margin:上下距离 auto;
• 上下距离在没有的时候可以写0
• 内联素使⽤margin：auto，不能完成居中效果
  示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

[练习]

使⽤外边距和元素的特性完成完成咸蛋超⼈

代码如下

.tou {
width: 400px;height: 430px;
border-radius: 50%;
border:5px solid black;
}
.jian {
width: 60px;height: 200px;
border:5px solid black;
background-color: red;
border-radius: 25% 25% 50% 50%;
}

(5)自带外边距的元素

因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之
前使⽤

• css reset 进⾏样式统⼀ * {margin：0；padding：0;}
• body : 四个⽅向各8px
• ul ： 上下16px外边距，“左内边距”40px

（6）外边距合并现象

• 兄弟元素之外边距合并
  两个在⽂档流中（垂直相邻）兄弟之间外边距，同时- 存在的时候，取最⼤的值。
  注意：只有块级元素才会出现外边距合并,两者的举例取两者之间的最大外边距

（7）外边距溢出

• 外边距溢出是⽗元素中在⽂档流⾥的第⼀个和最后⼀个⼦元素会和⽗元素的上下边界产⽣合并
  现象。
• 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第⼀个和最后⼀个⼦元素的
  外边距⼒浏览器会认为你定义的是⽗级。
• 解决⽅案
  • ⽗元素增加 padding-top 缺点：增加了⽗元素实际⾼度
  • 增加⽗元素的边框，缺点：增加了⽗元素实际⾼度
  • ⽗元素增加 overflow: hidden/auto; ，缺点，⽗元素就不能溢出显示内容了
  • 使⽤空 放在第⼀个⼦元素前和最后⼀个⼦元素后，作⽤是分隔与⽗级
    的粘连，缺点：添加无意义标签，结构化差
  • 使⽤CSS3伪元素 ::before 给⽗元素添加内容,源于增加空
    强烈推荐最后一种方法，而且这对页面样式以及代码结构是没有任何影响的，所以大家可以放心使用这种方法。

.box::before{
	content:"";
	display:table;
}

二、盒子模型的运用

1.外边距的适用场合

• 元素的位置微调
• 元素之间的距离调整
  

.m {
width: 500px;
border: 3px solid black;
font-size: 0;
}
.m img {
width: 100px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
/*可以整合*/
margin: 20px 0 20px 20px;
}

2.内边距的使⽤场合

• 改变边框内到内容之间的范围，⽤户“感觉”元素变⼤
• ⽂本与边框增加距离，把元素撑开
• 某些时候内边距也可以增加元素的距离
• padding没有auto

.p {
width: 500px;
border: 3px solid black;
font-size: 0;
}
.p img {
width: 100px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
/*可以整合*/
padding: 20px 0 20px 20px;
}

3.盒子模型的计算方法

• box-sizing: content-box; 标准盒⼦模型
  • 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
  • 元素所占⾼度=上外边距+上边框+上内边距+内容⾼度+下内边距+下边框+下外边距
• box-sizing:border-box 改变盒⼦模型计算⽅式
  • 设置的宽度width = 左右border + 左右padding + 内容的宽度
  • 设置的⾼度height = 上下border + 上下padding + 内容的⾼度
    注意：可能会导致内容溢出，需要时再使⽤

三、背景

1.背景颜色

• background-color: 颜⾊⾊值;
• ⾊值可以使⽤英⽂、⼗六进制、rgba()等

2.背景图片

（1）背景图

• background-image: url(路径);
• 路径可以是绝对路径或者相对路径,注意外部css的路径
• 背景图必须要求元素具有宽度和⾼度
• 

（2）背景图和img的区别

• 尺⼨⻆度
  i - mg具有⾃⼰的尺⼨，不设置宽度⾼度，可以直接显示 （如同照⽚）
  • 背景图必须设置宽度和⾼度 （如同打印）
• 增加内容⻆度
  • img图⽚上不可以直接写⽂字，除⾮在img盒⼦外部定位
  • 背景图是可以在图⽚上写⽂字的，图其实和颜⾊⼀样
• 功能⻆度
  • img⼀般⽤于产品展示，可以根据素材更新
  • 背景图⼀般左⼤背景或者更新⼩图标icon

3.背景图平铺

背景平铺属性的前提是需要有 background-image属性，否则没有背景图⽚没有图⽚的平铺效果。
背景图较⼩，背景区域较⼤的时候，图⽚会重复显示，默认情况下x轴y轴都会重复。

• background-repeat:repeat; 默认值 横向纵向都
• background-repeat:no-repeat; 不平铺
• background-repeat:repeat-x; x轴平铺
• background-repeat:repeat-y; y轴平铺

4.背景图定位

背景图先设置⼤⼩，图⽚显示都是从元素的左上⻆开始，会导致图⽚位置不够美观，尤其是在元素
不平铺之后

• background-position 可以改变背景图的默认的位置，默认位置在元素的左上⻆。
• 调整背景图在元素中的位置，有2个⽅向：x轴⽅向和y轴⽅向。
  • background-position:x轴 y轴 两个⽅向
  • background-position-x 单独定义x轴
  • background-position-y 单独定义y轴
• background-position 取值
  • 可以使⽤⻓度单位，如：px、pt、em、%等
  • 关键字：top、bottom、center、right、left
  • 取值可以为正值和负值，正值向右移动负值向左移动