Day4(以前css+html)
Day4
5-display:none 和 visibility:hidden 的区别
6-less 的作用？Scss（sass），stylus 的作用？
1-如何设置一个元素垂直居中？
......有待更新
php中文网上 segmentfault网上居中实例 居中方案
2-图片懒加载的实现？
函数判断元素是否出现在可视范围内
https://segmentfault.com/a/1190000025156924
边框
border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；
box-shadow：向框添加一个或多个阴影。box-shadow: 10px 10px 5px #888888;
border-image：设置边框图像，该属性是一个简写属性，用于设置以下属性：-
border-image-source：边框的图片的路径； -
border-image-slice：图片边框向内偏移； -
border-image-width：图片边框的宽度； -
border-image-outset：边框图像区域超出边框的量； -
border-image-repeat：图像边框是否应平铺(repeate)、铺满(round)或拉伸(stretch)。
background-size：背景图片的尺寸background-size: 100px 100px;/* 第一个值设置宽度，第二个值设置高度 */ background-size: 50% 50%;/* 以父元素的百分比来设置背景图像的宽度和高度 */ background-size: cover;/* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */ background-size: contain;/* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 */
background-origin：规定 background-position 属性相对于什么位置来定位。background-origin: padding-box;/* 背景图像相对于内边距框来定位（默认值） */ background-origin: border-box;/* 背景图像相对于边框盒来定位 */ background-origin: content-box;/* 背景图像相对于内容框来定位 */
background-clip：规定背景的绘制区域。background-clip: padding-box;/* 背景被裁剪到内边距框 */ background-clip: border-box;/* 背景被裁剪到边框盒（默认值） */ background-clip: content-box;/* 背景被裁剪到内容框 */
渐变
linear-gradient()：线性渐变。
语法：background: linear-gradient(方向, start-color, ..., last-color);
background: linear-gradient(red, blue); /* 省略方向默认从上到下 */ background: linear-gradient(to right, red , blue);/* 从左侧开始的线性渐变，从红色开始，转为蓝色 */ background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角的线性渐变 */
radial-gradient()：径向渐变。语法：background: radial-gradient(圆的类型 渐变的大小 at 渐变的位置, start-color, ..., last-color);
/* 椭圆形渐变 */ background: radial-gradient(red, yellow, green); /* 圆形渐变 */ background: radial-gradient(circle, red, yellow, green); /* 颜色结点不均匀分布 */ background: radial-gradient(red 10%, green 50%, blue 100%); /* 圆心在中间 */ background: radial-gradient(at 50% 50%, blue, green, yellow); /* 圆心在离左侧60%，离上侧50%的地方，半径长度为从圆心到离圆心最近的边 */ background: radial-gradient(closest-side at 60% 55%, blue, green, yellow);
文本效果
word-break：定义如何换行。
word-wrap：允许长的内容可以自动换行。
text-overflow：指定当文本溢出包含它的元素，应该发生什么。
text-shadow：文字阴影。
语法：text-shadow: 水平位移 垂直位移 [模糊半径 阴影颜色];
转换
transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：transform: none（默认)|transform-functions;
rotate(angle)：定义 2D 旋转，在参数中规定角度。
translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。
translateX(n)：指定元素在X轴中的位移。
translateY(n)：指定元素在Y轴中的位移。
scale(n)：定义 2D 缩放转换。
过渡
transition：设置元素当过渡效果，四个简写属性为：
-
transition-property：过渡属性名。 -
transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）。 -
transition-timing-function：指定切换效果的速度。
动画
animation：为元素添加动画，是一个简写属性。
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-
animation-name：为 @keyframes 动画名称。
-
animation-duration：动画指定需要多少秒或毫秒完成。
-
animation-timing-function：设置动画将如何完成一个周期。
- animation-delay：设置动画在启动前的延迟间隔，可以是秒或毫秒。
- animation-iteration-count：定义动画的播放次数。
-
animation-direction：指定是否应该轮流反向播放动画。
-
animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。该属性可重写该行为。
-
animation-play-state：指定动画是否正在运行或已暂停。
四、颜色与透明度
rgba（）
R:Red、G:Green、B:Blue、A:Alpha，R、G、B 取值范围0~255，A的取值范围是0-1。
RGBA可以用于所有使用颜色的地方
rgb三个值越小，颜色越黑
如果是纯色的背景，可以是使用rgba
如果是图片，可以脱离父子关系，让后用定位的方式来做。
hsla（）
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度取值范围0~1
例：
1
background-color: hsla(120,100%,50%,1);
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
6-less 的作用？Scss（sass），stylus 的作用？
sass(scss) 、less、 stylus等都是css预处理器
变量：sass(scss)，less，stylus等让人们收益的一个重要特性就是变量的引入，我们可以把经常使用的css属性值，定义成一个变量，然后通过变量名来引用他们。
sass(scss) 变量必须以$开头，变量和值之间用：隔开，如：
$color:#fff；
h1{
border:1px solid $color
}
less变量必须以@开头，已经被赋值的变量及其他常亮（如像素，颜色等）都可以参与运算。
@color:#fff;
h1{
border:1px solid @color
}
stylus：可以以$开头或其他任何字符，但是不能以@开头。
$color = #ddd;
borderwidth = 1px;
h1{
border:borderwidth solid $color
}
嵌套：
sass(scss)，stylus，less等都支持嵌套
div {
ul{
li{
......
}
}
}
运算符：sass，less，stylus中都支持运算+ - * / %等。
body {
margin: (14px/2);
top: 50px + 100px; //150px 不能写100% - 10px sass stylus中不兼容 less中会计算成90%
right: 80 * 10%;
}
less中,calc以下两种方式都可以：
@width:10px;
calc(100% - @width)
calc(~"100% - 10px")
sass中，
cacl(100% - #{$width})
calc(100% - 10px)
stylus中：
calc(100% - 10px);
'calc(100% - %s)' % width;
'calc(100% - %s)' % width;
区别：
1）编译环境不一样：
sass需要Ruby服务，是在服务端支持的
Less需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用less，编译成css，直接放到项目中。
stylus需要安装node，然后安装最新的stylus包即可。
2）变量符号不一样:
less是@， scss是stylus中的变量没有任何限制，可以stylus中的变量没有任何限制，可以开头，结尾的;可有可无，但变量名和变量值之间的=是需要的。stylus变量不要使用@符号开头。
变量的调用方法是完全相同的。
3）变量的作用域不一样
sass中，变量分为局部作用域（嵌套规则内定义的变量）和全局作用域（不在嵌套规则内定义的变量）
$width:3px; // 全局作用域
.message{
$width:2px; // 局部作用域
border:$width solid red;
}
