CSS盒子装饰

盒子阴影

给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

box-shadow: rgba(0, 0, 0, 0.3) 0px 15px 30px;

过渡

让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名：transition

1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
   • 给默认状态设置，鼠标移入移出都有过渡效果
   • 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

.box {
  width: 200px;
  /* 过渡写到盒子身上。 谁做过渡给谁加 */
  transition: all .3s;
}
 
.box:hover {
  width: 220px;
}

溢出部分显示效果

指的是盒子 内容部分 所超出盒子范围的区域，控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

属性名：overflow

单行文字溢出显示省略号

text-overflow: ellipsis; /* 文字溢出显示省略号 */
white-space: nowrap; /* 文字不换行 */
overflow: hidden; /* 元素溢出时隐藏 */

多行行文字溢出显示省略号

display: -webkit-box; /* 旧版弹性盒子布局 */
-webkit-box-orient: vertical; /* 文本垂直排列 */
-webkit-line-clamp: 3; /* 限制显示行数 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 文本溢出显示省略号 */

元素整体透明度

让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字

• 1：表示完全不透明
• 0：表示完全透明

opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

精灵图

项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

1. 创建一个盒子
2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

基线

浏览器文字类型元素排版中存在用于对齐的基线（baseline）

当图片和文字在一行中显示时，其实底部不是对齐的

垂直对齐方式

属性名：vertical-align

可以解决的问题：

1. 文本框和表单按钮无法对齐问题
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题

光标类型

设置鼠标光标在元素上时显示的样式

属性名：cursor

隐藏

使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样。

使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置。

CSS布局