9.14学习笔记

#线性渐变（linear-gradient）

tips:注意渐变是以北京图的形式存在的，不能用background-color

兼容情况：IE10+

background:linear-gradient(red,blue); /*从上到下*/

background:linear-gradient(to left，red,blue); /*从右到左*/

background:linear-gradient(to left top,red,blue); /*从右下到左上*/

background:linear-gradient(red 50%,blue 90%); /*0-50%是红色，50%-90%是红到蓝的渐变色，90%-100%是蓝色*/

background:repeat-linear-gradient(red,blue); /*重复2次*/

#径向渐变

background:radial-gradient(red,blue); /*从内到外*/

background:radial-gradient(at 30% 30%,red,blue);/*调整圆心到左上角*/

background:radial-gradient(at center center,red,blue);/*圆心在中间*/

background:radial-gradient(40px 50px;red,blue); /*圆的宽40px，高50px*/

background:radial-gradient(ellipse|circle;red,blue); /*ellipset椭圆（前提是当前元素是长方形的）;circle正圆*/

background:repeat-radial-gradient(red,blue 50%); /*重复2次=2圈*/

#css

Cascading Style Sheets

#单行文本溢出用...

overflow:hidden; /*文本溢出，溢出的部分隐藏*/

white-spae:nowrap; /*内容不换行*/

text-overflow:ellipsis; /*文本溢出的时候采用...代表被修剪的文本*/

#word-wrap:break-word与word-break:break-all的区别

后者会将非亚洲文本断开来实现换行，所以不会出现大片空白

#@font-face（自定义字体）

1.下载字体文件（不用安装）

2.编写一段css代码：

@font-face{

font-family:'龚老师体';

src:url(xxx.ttf);

}

body{

font-family:'龚老师体';

}

#图形字体库（iconfont，awesome）

iconfont:

1.www.iconfont.cn（新浪微博，github）

2.选择图标，然后点击PNG下载

3.选择图标，加入购物车，在我的购物车中"下载代码"

4.<link rel="stylesheet" href="iconfont.css">

<i class="iconfont icon-xiaomi"></i>

awesome:

1.下载Awesome压缩包

2.找到里面的css和fonts文件夹

3.<link rel="stylesheet" href="awesome.css">

<i class="fa fa-apple"></i>

#PPI(像素密度，每英寸所拥有的像素（Pixels）数目越高越清晰)

PPI：只存在于计算机显示领域

DPI：只出现在打印或印刷领域

#适配横竖屏

<link rel="stylesheet" href="../css/landscape.css" media="screen and (orientation:landscape)"><!--横屏-->

<link rel="stylesheet" href="../css/portrait.css" media="screen and (orientation:portrait)"><!--竖屏-->

#适配手机端的常用的几个标签

<!-- 用来设置web页面适应移动设备的屏幕大小 -->

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<!-- 确保IE浏览器采用最新的渲染模式 -->

<meta http-equiv="X-UA-compatible" content="IE=edge">

<!-- 用谷歌webkit内核：360 浏览器 6.5+ -->