CSS基础汇总

时间 2019-11-10

标签 css 基础汇总栏目 CSS 繁體版

原文原文链接

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

内联：不推荐浏览器

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

外联：服务器

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

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

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

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

块级元素的特色是：每一个块级元素都是重新的一行开始，并且其后的元素也须要新起一行显示。orm

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

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;