CSS初始化
@charset "UTF-8";
/*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 { 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";
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
-
S del删除线 -
I em倾斜 -
U ins下划线 - 字体加粗
font-weight: 700; - 让字体不加粗:
font-weight:normal; - 字体倾斜:
font-style:italic;基本不用 - 字体不倾斜：
font-style:normal; - 不下划线 不删除线:
text-decoration: none; - 定位：
position：static;静态定位 约等于标准流 - 浮动的不浮动:
float:none; | none | left | right - 定位的不定位:
position: static; |absolute | relative | fixed
网页稳定：
ｗidth 和height 最稳定
其次 padding
最后才考虑margin
浮动
正常流 : normal ，浮动流： flow
浮动 定位 都会 脱标 out of flow
浮动目的：可以让多个块级 元素 放到一行上。
Float: left | right | none;
清除浮动
- 清除浮动： 根据情况需要来清楚浮动 。
- 清除浮动的目的： 就是为了解决 父 盒子高度为0 的问题。
- 清除浮动：
- 额外标签法
- Overflow: hidden 触发 bfc 模式 就不用清楚浮动
- 伪元素
写法一：
.clearfix:after {
content:””;
visibility:hidden;
display:block;
height:0;
clear:both;
}
.clearfix{
zoom:1;
}
写法二： 双伪元素
.clearfix:before,.clearfix:after{
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
- 清除浮动： 真正的叫法 闭合浮动
鼠标样式
-
Cursor: pointer鼠标变成小手 -
Cursor: default;小白(默认的箭头) -
Cursor : move;移动 ，可拖拽 -
Cursor : text ;文本输入
网页布局：
给一个盒子 ： 宽度高度 背景边框 位置
圆角矩形
border-radius: 7px 7px 7px 0;
Border-radius: 左上右上 右下左下； 顺时针
宽度剩余法、高度剩余法
稳定性最好的就是盒子本身的高度和宽度了,我们优先考虑这个。 因此,很多情况下,我们会考虑利用高度剩余法,宽度剩余法来做,而不是padding和margin。其次，我们才考虑padding ，因为padding也可以看做特殊的盒子高度和宽度，最后我们再用margin来做。因为margin会有边距合并的问题。
z-index 层级 div 层
只有定位的盒子 （除了static）才有z-index,也就是只有position(除static外)的盒子设置z-index才生效
如果几个盒子都是定位(static除外)， 他们默认的z-index是0，最后的一个盒子在上面
- 定位
position: relative;提高层级
- 如果都是
position: relative;呢?
