在实际项目中总结的一些CSS的使用技巧和重要知识点。

这么久没有写博客了，一来是因为项目工期赶得紧，二来是精力有限，感觉没有太多好的干货分享给大家。今天我就把最基础的HTML和CSS在实际项目中，比较重要的地方给大家写一下，希望对大家的学习和工作有所帮助。废话不说，直接上干货。

1.定义多个class的目的在于：一般一个class抽取为公共样式，然后用另外一个class定义单独的样式。

2.对于id和class，我们总结一下：对于页面关键结构，建议使用id。对于小地方，建议使用class。

3.浏览器标题栏的小图标，想实现这个效果，我们只需要在head标签添加一个link标签即可。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

4.对于img标签，我们一定要添加alt标签，以便于搜索引擎识别图片的内容，alt属性在搜索引擎优化中也很重要。

5.label标签的for属性有两个作用：一是语义上绑定了label元素和表单元素。二是增强了鼠标可用性。

6.如果图片作为HTML的一部分，并想被搜索引擎识别，则应该使用img标签。例如常见的各种图片列表，如果图片仅仅是修饰作用，并不想搜索引擎识别，则应该使用背景图片。

7.css具有两个特征：继承性和层叠性。

8.css的层叠性指的是相同的属性，后来者会居上。符合这个需要三个条件：元素相同，属性相同，权重相同。

9.css的优先级：important>行内样式>id选择器>class选择器>元素选择器

10.@import方式引入css我们不是很提倡，是因为。这种方式先加载HTML在加载css，页面用户体验性非常差。

11.css的书写方式：外部样式表多用于公共样式，内部样式表多用于私有样式，而行内样式更多的用于小修改或者优先级方面。

12.css规范：命名规范，书写规范，注释规范，CSS reset

13.对于命名规范，主要有两个方面：css文件命名，id和class命名。

14css文件命名有reset重置  global全局 themes主题 module模块等等

15.在class和id命名，我们有几个建议：使用英文名而非中文名。尽量不要缩写。为了避免class命名重复，命名一般取父元素的class作为前缀。具有语义化和可读性。

16.css书写规范：属性书写的顺序：影响文档流属性的（布局属性），自身盒模型属性，文本属性，装饰性属性，其他属性。这样的顺序一眼就很明白。

17.在css中的关键位置添加注释很有必要。方便理解和查找。

18。关于css reset文件的使用，需要注意一下：css reset文件的位置必须放在其他css之前。并不是每个项目都是用这个文件，需要根据自己的开发需求来决定。

19.css盒模型：所有的元素都可以看做一个盒子。border元素边框，margin外边距，padding内边距，content内容。对于盒模型，我有过专门的书写。此处不再详细介绍

20.border：0和border：none区别：主要体现在性能差异和兼容差异。border：none，并不渲染，不需要占用内存。

21.css中外边距叠加：在同级元素和父子元素还有空元素。水平外边距永远不会叠加。外边距叠加之后的高度取得是两者之间的较大的值。外边距叠加针对的是block和inline-block元素，不包括inline元素。因为inline元素的margin-top和margin-bottom设置无效。

22.在实际的项目中，会使用margin为负数的情况：常用于图片和文字的对齐，自适应两列布局，元素垂直居中，tab选项卡这些地方。比如图片常用的是img{margin：0 3px -3px 0}

23.overflow的使用。

24.HTML中元素根据表现形式，可以分为块元素和行内元素。常见的inline-block元素有两个：img元素和input元素。

25.display：none和visibility：hidden的区别：前者是彻底消失，后者是看不见摸得着。

26.display：table-cell非常强大：图片垂直居中于元素，等高布局，自动平均划分元素。在实际中，我们常常使用display：table-cell和vertical-align：middle来实现大小不固定的图片的垂直居中的效果。

27.自动平均划分元素：父元素：{display：table}；子元素：{display：table-cell}

28.在css中，我们可以使用“font-size：0”,来去除inline-block元素的间距。语法：父元素：{font-size：0}

29.关于text-indent的使用：一是首行缩进使用：text-indent：2em，另一个是常见于logo部分的text-indent：-9999px。一般h1标签背景图片使用logo的图片，让他的文字使用这个属性。

30.关于页面水平居中的实现：text-align:center;和margin：0 auto；两者的区别是：

前者实现的是文字，inline元素以及inline-block元素的水平居中。后者实现的是块元素的水平居中。

前者是在父元素中定义，后者是在当前元素上。

31.表单元素的radio和checkbox的布局，只要遵循一条：单选框复选框于文字垂直居中对齐。可以设置vertical-align的像素值了调节。

32.对于textarea文本域元素，我们要做的就是固定大小禁用拖动。设置它的max宽高并设置：resize：none，禁止拖动。

33.浮动和定位（排除绝对定位）都会脱离正常的文档流。

34。一旦元素设置了浮动，都会变成block类型。

35.浮动带来的负作用：父元素高度塌陷，布局错乱。

36.z-index的属性，只有在元素定义了position：relative和absolute或者fixed，才会被激活。

37.css图形的使用。我们在开发中，一直秉着少用图片的原则，一是图片比较大，传输量比较大，二是一张图片会引发一次http请求。大家有时间可以去学习和收藏一些css图形的实现代码块。

38.css的性能优化：高性能和可维护性。下一次在好好写这一部分内容。