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;提高层级
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{ width: 200px; height: 300px; border: 1px solid #cccccc; float: left; margin-left: -1px;
} .box:hover{ border: 1px solid #f40; /*改为相对定位后，z-index的层级就提高了*/
position: relative;
} </style></head><body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div></body></html>如果都是
position: relative;呢?
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{ width: 200px; height: 300px; border: 1px solid #cccccc; float: left; margin-left: -1px; /*position: relative;时z-index默认为0*/
position: relative;
} .box:hover{ border: 1px solid #f40; /*z-index提高层级*/
z-index: 1;
} </style></head><body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div></body></html>
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/1618ce873017
共同学习，写下你的评论
评论加载中...
作者其他优质文章
