前端入门系列--一些总结（便于查找复习）

1、CSS属性书写顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
   
   
   
   

2、CSS的复用样式

把一些项目中能够连续出现可以复用的样式写到一个公有css中，再于相应的html中复制相应部分的布局，在头部中引入公共css后再引入本页面独有的css。

3、ico图标的使用

通常在打开页面时会看到如下的图标：

我们将.ico的图标放入文件夹后，在html的head中写入以下语句：

<link rel="shortcut icon" href="路径"  type="image/x-icon"/>  

且.ico图标可以由正常图片转换而来，网上有在线转换的网站；

4、搜索引擎优化

SEO（搜索引擎优化）是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。

1、title首页标题：网站名（产品名）- 网站的介绍 （直接在title标签中写）
2、description描述：Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作
为…”“电话：010…”之类语句；搜索完网站结果的显示中会出现；
在head中写：

<meta name="description" content="描述内容!" />

3、keywords关键字：是搜索引擎的关注点之一

<meta name="Keywords" content="关键字内容" />

5、字体图标

网站推荐阿里的iconfont以及国外的icomoon；
字体图标是文字，可以进行文字类的操作；
注意引入操作即可；

6、居中相关

1、块级盒子水平居中对齐：在有宽度的前提下margin：auto;
2、绝对定位的盒子水平居中对齐：

（这个方法也可以用于垂直居中）
3、文字内容、行内元素、行内块水平居中对齐：text-align:center;
4、文字内容、行内元素、行内块垂直居中对齐：vertical-align:center;

7、布局

1、块级盒子需要在一行上排列（如展示商品等），或者左右对齐，一般用浮动；
2、大图上的一些小图（如商品图片边角上的hot小图）则用绝对定位，注意要给父级用上相对定位（相对定位很多情况下都可以写不会有影响）
3、

8、其他

1、logo优化：logo放在h1标签中进行提权，且h1中需放一个a标签（图片可以点击跳转的场合都是用a包裹图片，注意a标签有没有被转成其他元素否则不能设置大小）用于点击时返回首页，然后在a标签中必须给文字让搜索引擎收录（但不要让a标签的文字显示出来，直接设置文字大小为0即可），最后即可给链接title让鼠标放到上面时有提示；


2、两行文字间的距离一般通过给行高（行高从一行的顶部给到另一行的顶部），如下：



3、特定场合下(父盒子没给高度子盒子又浮动导致父盒子高度为0)注意给父盒子清除浮动overflow:hidden
，或用其他清除浮动方式；


4、在一个大盒子里装ul下有很多小li，如果小li在一行上稍微超出了大盒子的宽度则会往下一行掉，可以通过给ul比大盒子更大的宽度克服该问题；


5、美工给的图中，在一个大盒子中一行排列小盒子，如果小盒子边框之间两两的边框线不是贯穿整个盒子的，则小盒子的height不要给的和大盒子一样，稍微小一点再给左或右边框即可；


6、CSS3中的过渡效果
一般配合hover来使用，哪个元素需要渐进过渡样式变化，则在该元素的css中写transition: 要过渡的属性 花费时间 运动曲线 何时开始;然后再写一个

该元素:hover{改变后的样式}

即可


7、一些元素与元素之间一行排列，如果之间有小缝隙，可直接用行内块来做；


8、类似于:hover，：focus常用于表单元素获取了焦点之后的样式变化；


9、实际中很多时候用i、em标签来包裹内容，但是使用之前要先用font-style将其默认倾斜效果给去掉；