关于CSS的一些个人笔记（自学）

<!--整理了一些笔记，做一些归纳-->

CSS的权重

默认样式<标签选择器<类选择器<id选择器<行内样式<!important

可对应理解权重为：

0<1<10<100<1000<1000+(这只是一个概念，实际上10*标签选择器<类选择器）

关于权重的叠加问题：

继承的权重为0

权重会叠加。

例如： .top_banner div > div

CSS的初始化（前置内容，清楚浏览器的影响）

/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}
fieldset, img, input, button {             /*fieldset组合表单中的相关元素*/
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}
ul, ol {
    list-style: none;                /*清除列表风格*/
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}
select, input {
    vertical-align: middle;
}
select, input, textarea {
    font-size: 12px;
    margin: 0;
}
textarea {
    resize: none;
}
/*防止多行文本框拖动*/
img {
    border: 0;
    vertical-align: middle;
}
/*  去掉图片底侧默认的3像素空白缝隙*/
table {
    border-collapse: collapse;            /*合并外边线*/
}
body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53";    /*宋体，Unicode，统一码*/
    color: #666;
    background: #fff
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE/7/6*/
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #C81623;
}
h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}
s, i, em {                
    font-style: normal;
    text-decoration: none;
}
.col-red {
    color: #C81623 !important;
}
/*公共类*/
.w {
    /*版心 提取 */
    width: 1210px;
    margin: 0 auto;
}
.fl {
    float: left
}
.fr {
    float: right
}
.al {
    text-align: left
}
.ac {
    text-align: center
}
.ar {
    text-align: right
}
.hide {
    display: none
}

关于CSS的静态定位和绝对定位

position:static;   静态定位。*默认值

position:absolute;   绝对定位

特点：

元素使用绝对定位后不占据原来的位置。（脱标）

元素使用绝对定位，位置是从浏览器出发。

嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子的位置是从浏览器出发。

嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子的位置是从父元素位置出发。

position:relative;    相对定位

特点：

位置从自身出发。

设置相对定位后还占据原来的位置。

子绝父相，子元素绝对定位，父元素相对定位。

嵌套的盒子，父元素相对定位，子元素绝对定位，子元素从父元素出发设置自身位置。

不能将行内元素转成行内块。

position:fixed;    固定定位

特点：

位置从浏览器出发。

不占据原来位置，会脱标。

可将行内元素转成行内块。

其余两种定位方式

float:left/right;    浮动

特点：

不占据原来的位置，会脱标。

可以让块元素在一行显示。

可以将行内元素转成行内块。

margin:0 auto;

只能让标准流的盒子居中对齐。

在应用中规避脱标流：

1.尽量使用标准流；

2.标准流解决不了的使用浮动；

3.浮动解决不了的使用定位。