CSS 学习记录

给文字/盒子添加阴影效果，用以吸引用户注意，能够体现页面的制作细节；过渡效果可以让元素的样式慢慢变化，经常配合 hover 使用，增强网页的交互体验。

项目中将多张小图片放在一张大图上，合并成一张大图片，这张大图片称之为精灵图，项目中使用精灵图可以减少服务器发送的次数，减轻服务器的压力，提高页面的加载速度；我们也可以根据需要设置图片背景的大小

响应式网页顾名思义就是一套代码能够兼容不同的屏幕设备。根据条件的不同，设置不同的 css 样式，这样不论设备的宽度如何变化，都有差异化样式与其匹配。BootStrap是基于框架开发的，效率高

vw/vh 是相对单位，相对于视口的尺寸计算结果。 vw（viewport width） 是视口宽度； vh（viewport height）是视口高度；结尾有案例，留言发源码

在 px 单位转换到 rem 单位 的过程中，除法运算是最麻烦的，因为 CSS 不支持计算写法，需要自己计算完之后，再将结果写到 CSS 样式里面，这样做太浪费时间了，我们可以通过 less 来简化

移动适配要求网页元素的宽高都要随着设备的宽高等比缩放; rem 是目前多数企业在用的解决方案, vw / vh 是未来的解决方案;另外，可以使用 flexible.js`配合rem使用

使用 flex-direction 改变元素排列方式，主轴默认是水平方向，侧轴默认是垂直方向;默认情况下，多个弹性盒子沿主轴排列，都在同一行显示，子级尺寸默认弹性收缩

使用 flex 布局模型可以快速、灵活的开发网页。在此之前，我们学过，多个盒子横向排列可以使用浮动属性来实现，设置盒子间的间距用 margin 属性完成，但在这里需要注意浮动脱标问题

在网页布局上，PC 端网页与移动端网页不同，PC 端屏幕大，网页固定版心；手机移动端的屏幕小，网页宽度多数为 100% 。 可以用谷歌模拟器在电脑里边一边写代码，一边调试移动端的网页效果

走马灯图片循环播放的素材传不上来，要是有想实现效果的小伙伴，可以随便下载六张图片实现 CSS 学习要多动手，熟能生巧

过渡可以实现两个状态间的变化过程；动画效果能实现多个状态间的变化过程，且动画的过程是可控 的，如重复播放、是否暂停等。 动画的本质是快速切换大量图片时，这时在人脑中就会形成具有连续性的画面

空间是从坐标轴角度定义的，x、y、z 三条坐标轴构成了一个立体空间，z 轴位置与视线方向相同；空间转换也叫 3D 转换，同样用 transform 表示

平面转换是 2D 转换，可以改变盒子在平面内的形态； 在需要盒子居中项目中，通常使用百分比 ，因为如果盒子大小改变，不用去修改移动距离；渐变背景可以丰富网页效果

如果图标库没有我们想要的图标时，我们可以与设计师沟通（前提是公司有设计师），得到 SVG 矢量图，然后在图标网站上传图标，再下载来使用

opacity 可以让元素整体（包括内容）一起变透明，在 0 - 1 之间取值，0 表示完全透明，1 表示完全不透明。 用代码也可以实现小三角形

网页上，有的地方鼠标放上去，鼠标的形状会改变，这是因为设置了光标在元素上显示的样式。 边框圆角可以让盒子四个角变得圆滑，增加页面细节，提升用户体验。

overflow溢出部分是指盒子的内容超出盒子范围的区域，常见属性visibility:hidden和display:none，两者区别在于，前者在网页中占位置，后者不占位置

浏览器文字类型元素排版中，存在用于对齐的基线 ，一般情况下，默认是基线对齐，这就会产生一些元素对不齐、有缝隙之类的问题，面对这些问题，我们可以用垂直对齐方式来解决

还有一种定位叫固定定位 ，它可以让盒子固定在屏幕中的某个位置，俗称死心眼型定位，相对于浏览器可视区域进行定位、移动。 想要更改定位元素的层级，就要用到 z-index 了

标准流、浮动、定位都是常见的网页布局形式。 标准流布局方式中，块级元素独占一行，就是垂直布局；浮动可以让原本垂直布局的块级元素，变成水平布局；定位可以让元素自由的摆放位置，可以放在网页的任意位置