css一些美化页面的方法

伪类：

很常用的hover

鼠标移动到父元素时子元素变色

写父级元素：hover 子元素{}这样直接对子元素进行操作。

还有就是对他的兄弟元素发生改变：用+加兄弟元素，如果让所有的兄弟元素发生变化那就把+变成"~"

鼠标划过出现大图:

先做一个盒子盒子里置入img，然后将盒子隐藏:直接用display：none

display：none隐藏时候不占用空间，而visibility：hidden隐藏的时候会占用空间只是不显示（visible显示）

然后添加伪类：hover 后面加大图的盒子{

display：block}

将它变成块级元素就可以显示了，注意hover要加在父级元素里面，就能做到鼠标移动到小图弹出一个高清大图的效果。

纯css来写一个多级菜单

多级菜单nav

看起来就是盒子套盒子然后用到了咱们上面写的鼠标划过出现大图，相当于鼠标经过一级导航出现二级导航们，估计也得用上display：none；

大概加入超链接所以就能使用a标签直接写文字导航吧。

注意一级导航是二级导航的父级。

当浮动的时候将为父级导航添加浮动。

也就是说直接加一个hover在为二级导航的list添加了display：none之后要在一级导航的样式下添加block属性。

浮动且只让box浮动

纯css实现一个点击切换的效果

先创建框架，就是利用<a>标签的链接特性，将需要跳到的元素位置加个id，然后在a标签直接链接到id<a href="#id名"就能时间页面内跳转。

纯css实现滚动图片

自己试了一下感觉其实做一个简单的图片滚动很简单

主要注意几个点，在父级元素下增加box-sizing: border-box;可以使溢出的元素不显示

然后子元素那里的高度设置为100%可以避免出现竖着的滚动条。

overflow-x: scroll;可以出现横向滚动的效果，这里为什么没有考虑overflow-hidden因为这个会使溢出的元素直接不显示并且无法滑动。同理如果想做一个纵向的图片滑动就将考虑改成y。

注意了就是float浮动添加到需要浮动的元素上了，变成一个横条，这种在手机端上看起来会更加美观。将图片设置为块状元素可以设置宽高不过我还是觉得直接写100%更好受。

最好是显示的窗口正好等于一个图片或者是至少能放下一张图片，不然影响美观。

还有就是网页中经常用的标签ul li可以用来代替div标签，进行分块也是特别好用，但是由于懒所以使用了a标签。

在网页中尽量避免使用过多的div可以使用

header footer article aside section nav等

图文小块的介绍可以用ul li加上figure 和 figuration。

css文本溢出部分显示成省略号

white-space:nowrap;不换行的意思。其中white-space空白-空格其实就是白色的空格就有换行的意思，wrap有包裹的意思，将nowrap写在其中就相当于不包裹就会不换行。

在显示框中不显示溢出的部分用到我们overflow：hidden；

将文字超出部分变成省略号，也就用到text-overflow，文字溢出，加特性ellipsis就是溢出文字显示为省略号。

然后我们遇到了一个新的没有了解过的属性text-overflow，这个属性并不会强制的使文字溢出，让文字溢出还是需要加overflow和white-space，将文字放到一行，并且溢出，溢出不显示可以写成overflow：hidden;

该属性只对块级元素溢出的内容才有效，因为如果没有宽和高是没办法形成一个只显示了部分的区域。下面是一些代码。

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

而且该属性可以被赋予两个值，第一个值指定左端的溢出行为，第二个值指右端的溢出行为。

clip：默认值；

ellipsis：省略号；

string：用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小以至于连字符串本身都容纳不下，那么这个字符串也会被截断；

fade：截断行内溢出文本并在边缘添加一个淡出特效，fade(<length> | <percentage>)这个函数将会截断行内溢出文本并在完全透明的行边缘添加一个淡出特效。参数决定淡出特效的距离。<percentage> 以行宽而定。小于 0 的值视为 0。大于行宽的值视为行宽。

inherit从父元素继承该属性值。

initial设置为属性默认值；

ok就这样。

css'实现隔行填色，就很像美化表单，

不过美化表单中更美观，这可能就相当于表单的基础美化；

也是相当简单child孩子属性，可以用来选择你想选择的同级标签中的某一行或者某几行。

比方说一堆p标签我们实现隔行填色就可以用p：nth-child(2n)就可以实现一个简单的隔行填色。

这里也说一下nth-child() 选择器的特性:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

有点像面临数学一堆方程式时的样子。

(n)或者(an+b)，来选择我们想选择的，以达到美化效果。

讲用矢量图标渲染一个漂亮的搜索框

矢量图标(icon)可以直接在矢量图标库搜索，比方阿里巴巴矢量图标库，就不需要请美工画，不过也都大同小异。

可以将将两个按钮分别放在两个盒子里，浮动的时候更加简单。

比方说我们一个块写input text 和一个input button按钮。

矢量图标也是样式文件，一般命名为icon里面的iconcss文件，当然样式也是具有专门的名字的。

class="iconfont 类名（就是图标名）"矢量图标就像修改字体一样就能改变大小颜色。

可以使用position相对定位relative 和绝对定位absolute定位来控制图标位置。

主要是要注意矢量图标的引用

单行精灵图制作（雪碧图）

取消背景平铺background：url() no-repeat 设置顶点 ;

顶点：X Y/宽高;比方说直接在左上角就定位到左上角就写一个0 0/300% 100%；（3张图片的情况），第二张就用50% 0/300% 100%；

单列精灵图

上面的是横着的，下面的是竖着的，三张图片将三个盒子铺满，后面的两个背景图宽写100%占满整个盒子，背景图的高度那就是几个盒子就几00%。

也要注意50%和100%的位置。

注意最后一张照片的上部或前部是100%

css多行多列精灵图

就是注意XY。

弹性盒子-display-flex

在父级元素加弹性盒子使子元素的发生类似浮动的状态，设置弹性盒子是对父元素进行操作。

弹性盒子主轴：

在我们设置完弹性盒子之后子元素就变成了弹性元素，这时候就可以自由的操作排列，比方说添加flex-direction:row;flex-direction:row-reverse;flex-direction:column;flex-direction:column-reverse;reverse:反向。

还有交叉轴的概念

交叉轴和水平轴交叉垂直

弹性盒子在主轴上的对齐方式

justify-content:flex-end;在主轴上进行一个结束方向的对齐。这是在不改变主轴的情况下改变排列方式。

end/start/center/space-between两端对齐/space-around环绕对齐，盒子平分宽并且平均分

一共五种；

弹性盒子在交叉轴上对齐方式

align-items:flex-end;在交叉轴结束方向对齐。align-items:center;中间；align-items:baseline;沿基线对齐。

基线对齐；

还有一个默认值stretch：如果子元素弹性盒子没有高，这个默认值就会自动把高给搞成100%这个样子。

弹性盒子的对齐方式和巩固加深：

类似于子元素在父元素的那个位置，其实就是沿着主轴/交叉轴的start center end方向位置来改变位置。可以将主轴和交叉轴视为XY坐标轴来定位。

弹性盒子弹性元素的顺序

在子元素加order属性order:序号;序号值越大越靠后。

弹性元素的拓展比率

flex-grow:n;所以将弹性元素的拓展比率的总和设为a，父级盒子宽度/a*拓展比率加上弹性盒子原有宽度等于新的宽度。

总而言之拓展比率会改变弹性盒子的宽度。

压缩比率

flex-shrink:n;压缩比率

flex-wrap：nowrap;换行的属性，不换行。

在设置了小弹性盒子的宽度之后，在不换行排列时会按照压缩比率而平均分父盒子宽度。

如果设置了换行的话就会到下面自动换行。

让元素水平居中的一些方法

行内元素text-aline:center;行内块级元素。

块级元素margin:0 auto;

垂直居中：line-height:高;vertical-align:middle;

当父级元素没有宽高的时候该如何设置：

用定位的方法还是先给父级添加相对定位relative；

在给子元素使用transform：translate（X，Y）;来定位，比方说居中垂直水平可以把X和Y设为-50%。

css线性渐变和径向渐变怎么做

其实也是使用background但是加了方向和颜色；linear-gradient(方向，颜色一，颜色二)；

可以实现一个简单的线性渐变。

,径向渐变radial-gradient(颜色一，颜色二)。径向渐变就是中间是一个颜色四周是一个颜色的渐变。

过渡效果

transition:属性名称时间时间曲线延时；

这种就是在元素变大或缩小的时候，让他有一个过渡的效果类似动画一样的相应，属性名称就是widtn height margin，color之类的，或者说他变化了的属性。

而且这个里面可以用逗号隔开来同时操作多个属性，操作全部属性all。

时间曲线我们来拓展一下：

linear：

规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)

ease：

规定慢速开始，然后变快，然后慢速结束的过渡效果（cubibezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。慢快慢

ease-in：

规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。

css动画

animation: 动画名称时间;

动画的创建 @keyframes 动画名称{

from{} //怎样开始

to{} //怎样结束

}

这个动画的效果有些类似我们上面的过渡效果，也就是说过渡效果是需要我们用hover或action激活后产生的效果，而动画效果则偏向主动一点点。

过渡效果所影响的属性在动画里也能影响，大概也就是宽度，高度颜色，外边距内边距等能改变的效果了。

css的百分比动画

animation:动画名称时间;

@keyframes 动画名称{

0%{} //怎样开始

//中间可以任意加百分比，来控制进行到某一节点的时候的效果。

100%{} //怎样结束

}

理解的话可以想象一个一边变长一边变色的盒子。

::-webkit-input-placeholder

不属于任何规范。这个伪元素是专有的，并且特定于WebKit和Blink。

left:calc()