1.注意点
css中类的命名采用长名称和—
font-size默认为14px 尽量使用偶数px，奇数在ie中有BUG
font-weight设置字体粗细，常设置为normal，数值为400
text-indent：首行缩进1em等于一个汉字的宽度
行内元素不可以直接设置宽高，padding和margin可以设置
行内块元素：可以设置宽高，不会直接换行
css继承：text-，font-，line-这些元素开头的都可以继承，以及color属性
背景透明：background: rgba(0,0,0,0.3);最后一个参数是alpha透明度，取值0-1
圆形：border-radius：50%
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
normallize.css 初始化样式，解决跨浏览器问题
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
icon图标转换 http://www.bitbug.net/
2.浮动
浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
清除浮动：主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
1.W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style="class:both"></div>
2.父级元素添加overflow：hidden 通过触发BFC的方式，清除浮动
3. :after 伪元素
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
3.版心和布局
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
4.Photoshop的基本使用
1.Alt+鼠标左键点击目标图层 右下角工具栏选中图层
2.切片：左侧工具栏选择，选中之后文件—>存储为web应用格式，注意选着 所选切片
切图插件;cutterman http://www.cutterman.cn/zh/cutterman(注意PS版本)
5.定位
1.盒子水平垂直居中:left:50%,margin-left:自己盒子一半的距离(-)
2.z-index取值越大越居上，参数不能加单位，只有relative，absolute，fixed有这个属性
3.设置图片上的鼠标经过效果：a：hover .mask{ display:block }
（设置毛玻璃效果：background：rgba(0, 0, 0, .4)）
img和mask都应该在a标签中
4.vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
6.溢出文字显示省略号
white-space:warp;
overflow:hidden;
text-overflow:ellipsis;
7.字体图标
1.最早的自定义图标字体生成器：http://www.iconfont.cn/
2.font-awesome
3.定义@font-face{
font-family:"first-font"
src:url("");}
使用：span { font-family: "icomoon"; }
盒子里面添加结构：span::before { content: "\e900";}或者<span></span>
8.网站优化：title,description,keywords
title:首页标题：网站名（产品名）- 网站的介绍
description:作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。
Keywords:页面关键词,Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。
9.浏览器前缀
浏览器前缀
10.CSS3新增选择器
伪类选择器：:first-child :last-child :nth-child(n)
:target 目标伪类选择器 :选择器可用于选取当前活动的目标元素
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）E::first-line 文本第一行；
E::before和E::after，在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
11.背景
background-size
设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
12.CSS3盒模型
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode（标准盒子模型）
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的（IE盒子模型）
13.过渡&动画
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
谁做动画给谁加transition属性，动画内容写在class：hover{}
定位的盒子居中： position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); 走的自己的一半
transform：rotate旋转，通过transform-origin来控制旋转原点；
CSS3中的3D坐标系和一般不同Y轴是反的
perspective：视距；给父元素设置，值越大3D转换效果越不明显。
backface-visibility 属性定义当元素不面向屏幕时是否可见。
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
播放次数：infinite; 无限循环播放
flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
justify-content调整主轴对齐（水平对齐）
flex-flow是flex-direction、flex-wrap的简写形式， flex-flow: 排列方向 换不换行;
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
网友评论