1. css的出现是为了是内容和表现分离。分为三种：

内联：不推荐

嵌入：没有利用浏览器缓存机制。

外联：

2. css优先级：①id优先级高于class②后面的样式覆盖前面的③指定的高于继承④行内样式高于内部或外部样式

总结：单一(id)的高于共用的(class)，有指定用指定，无指定继承离他最近的。

3. 块级元素：段落<p>、标题<h1><h2>…、列表<ul><ol><li>、表格<table>、表单<form>、DIV<div>、BODY<body>

行内元素：表单元素<input>、超链接<a>、图片<img>、<span>、斜体<em>

块级元素的特点是：每个块级元素都是从新的一行开始，而且其后的元素也需要新起一行显示。

可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

4. Ie6有一个著名的3像素bug：当浮动元素和非浮动元素相邻的时候，3pxbug就会出现。

要解决这个bug就要在#side这个div上加上_margin-right:-3px;这个前面加上下划线，只针对ie6生效，ie7和ff还正常。

5. Css选择器可以进行分组（比如把标题都设成加粗红色，二级黑色h1,h2,h3,h4,h5,h6 { color:red;font-weight:bolder;} ）

6. 伪类：目前ie6仅支持a的伪类，其他的不支持。

超链接的伪类：a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

（四种状态的顺序一定不能颠倒，否则有些不生效。）

7. 相对定位和绝对定位

定位标签：position 包含属性：relative（相对） absolute（绝对）

① position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

② position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

③ 父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角

④ 相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

8. 浮动后父容器高度自适应:

当一个容器内元素都浮动后，它的高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。如下图：

要解决这个问题，需要使用以下样式

overflow:auto; zoom:1;

overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写。

9. CSS Hack

由于不同浏览器对css的解析不一样，因此导致展示的效果也不一样，为了兼容不同的浏览器，就要针对不同的浏览器写不同的css代码，这个过程就叫做css hack 。上面的这个例子就是所谓的css hack.

10. IE6的双倍边距bug

这又是IE6一个著名的bug，也是我们经常遇到的。如上例，当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置为20，而在IE6下却显示40px，解决这个问题只需应用一个样式，记住就可以了。display:inline;

11. CSS Sprites技术

又叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。

12. 块状元素理论都是占一行的，但是如果你给了她float属性，这时候他的宽度是随着内容自适应的。利用这个原理可以制作自适应宽度按钮等。

13. label标签，合理利用会使页面的用户体验得到提升，可以对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了。

14. css样式不能以数字开头命名。否则浏览器不识别。

15. span一般都放在p中，尽量不要放在div中。

16.radio和汉字放在一起总是无法垂直居中，解决办法是在radio上加样式position:relative;top:2px;

CSS基础汇总的更多相关文章

  1. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  2. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  3. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  4. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  5. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  6. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  7. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  8. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  9. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

随机推荐

  1. Entity Framework后台采用分页方式取数据与AspNetPager控件的使用

    本文是一个对AspNetPager控件使用的笔记! 有关AspNetPager控件可以查看杨涛主页.这是一个开放的自定义ASP.NET控件,支持各种自定义的数据分页方式,使用很方便,而且功能也很强大, ...

  2. windows下安装mysql压缩包版[转]

    版本:5.6.17 1.将解压后的文件夹放到某个目录下,比如c:\software; 2.在环境变量中新建MYSQL_HOME=C:\software\mysql-5.6.17-winx64,然后在系 ...

  3. [数据库操作]Java中的JDBC的使用方法.

    前言:想必大家在实际编码中都遇到过JDBC的操作, 这里仅做自己的一个总结, 有错误和不完整之处还请大家提出来. 1,JDBC其实一套规范(接口)数据库厂商需要实现此接口(实现类)--数据库驱动 2, ...

  4. TF Boys (TensorFlow Boys ) 养成记（三）

    上次说到了 TensorFlow 从文件读取数据,这次我们来谈一谈变量共享的问题. 为什么要共享变量?我举个简单的例子:例如,当我们研究生成对抗网络GAN的时候,判别器的任务是,如果接收到的是生成器生 ...

  5. 祸福相依，大难之后的O2O迎来新福报？

    今天的O2O似乎已经成为了一个人人都不愿意提的名词,很多原本做O2O的创业者,如今都不提自己是O2O,只说是互联网+.创业者们实际上仍然是在干着O2O的事情,之所以不敢提不愿提,无非就是一提O2O,投 ...

  6. 更新日志 - BugHD 与你的应用一起成长

    上周 BugHD Android客户端上线了,下载地址在此,欢迎大家体验并提出反馈.本周增加 BugHD 和 fir.im 的新功能,同时也做出一些体验优化. BugHD 新增功能 1.新增安装量.启 ...

  7. 更新日志 - fir.im 新版管理后台邀请内测

    上周,我们对fir.im 新版管理后台的页面结构和样式进行了优化,现在新版的管理后台开始邀请内测,感兴趣的伙伴可以发邮件到 **beta@fir.im** 申请.为了保证服务质量和对问题进行有效追踪, ...

  8. PLSQL查询表是否被锁定（转）

    PLSQL查询表是否被锁定(转) http://blog.sina.com.cn/s/blog_70717ff00100qb85.html (2011-05-08 13:13:06) 转载▼ 标签: ...

  9. DES加密 java与.net可以相互加密解密的方法

    我.net程序员.今天和java的童鞋交互,单点登录的操作.采用了如下的加密和解密的方式.经过验证,完美结合.通过这个方法可以实现java和C#相互加密与解密 并能保持解密出来一致. 废话少说,上代码 ...

  10. RFID Exploration and Spoofer a bipolar transistor, a pair of FETs, and a rectifying full-bridge followed by a loading FET

    RFID Exploration Louis Yi, Mary Ruthven, Kevin O'Toole, & Jay Patterson What did you do? We made ...