2020年5月2日总结
一、盒子模型
1.1.CSS属性-outline
-
outline表示元素的外轮廓
- 不占用空间
- 默认显示在border的外面
-
outline相关属性有：
- outline-width
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color
- outline：outline-width、outline-style、outline-color
-
应用实例：
- 去除a元素、input元素的focus轮廓效果
1.2.CSS属性-box-shadow
- box-shadow属性可以设置一个或者多个阴影
- 每个阴影用<shadow>表示
- 多个阴影之间用逗号,隔开，从前到后叠加
- <shadow>的常见格式如下：
- <shadow> = inset? && <length>{2,4} && <color>?
- 第一个<length>：水平方向的偏移，正数往右偏移
- 第二个<length>：垂直方向的偏移，正数往下偏移
- 第三个<length>：模糊半径
- 第四个<length>：延伸距离
- <color>：阴影的颜色，如果没有颜色，就跟随color属性的颜色
- inset：外框阴影变成内框阴影
1.3.CSS属性-text-shadow
- text-shadow用法类似于box-shadow，用于给文字添加阴影效果
- text-shadow同样适用于::first-line、::first-letter
1.4.CSS属性-box-sizing
-
box-sizing用来设置盒子模型中宽高的行为
-
content-box：padding、border都布置在width、height外边
-
border-box：padding、border都布置在width、height里边
-
1.5.元素的水平居中显示
-
在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
-
行内级元素、inline-block元素
- 水平居中：在父元素中设置text-align: center
-
块级元素
- 水平居中：margin: 0 auto
二、背景设置
2.1.background-image
-
background-image用于设置元素的背景图片
- 会盖在(不是覆盖)background-color的上面
-
如果设置了多张图片：
- background-image: url("../img/bd_logo1.png"),url("../img/timg.jpg");
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
-
注意：如果设置了背景图片后，元素没有具体的宽高，背景图片时不会显现出来的
2.2.backgroud-repeat
-
backgroud-repeat用于设置背景图片是否平铺
-
backgroud-repeat可以取4个值：
- repeat(默认)
- repeat-x(水平方向平铺)
- repeat-y(垂直方向平铺)
- no-repeat(不平铺)
2.3.CSS属性-background-size
- background-size用于设置背景图片的大小
- auto：以背景图本身大小显示
- cover：缩放背景图，以完全覆盖铺满元素
- contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
- <percentage>：百分比，相对于背景区(background positioning area)
- length：具体大小
2.4.CSS属性-background-position
- background-position用于设置背景图片在水平、垂直方向上的具体位置
- 水平方向还可以设值：left、center、right
- 垂直方向还可以设值：top、center、bottom
- 如果只设置了1个方向，另一个方向默认是center
2.5.CSS Sprite
-
什么是CSS Sprite
- 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
- 有人翻译为：CSS雪碧、CSS精灵图
-
使用CSS Sprite的好处：
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减少图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
-
Sprite图片制作(雪碧图、精灵图)
- 方法1：Photoshop
- sprite-generator
