网站图标
favicon.Ico转换: www.bitbug.net
markdown在线编辑网站
响应式布局meta标签
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1"">
IE兼容设置
IE 8中间要有空格
<!–[if lte IE 8]>
<p class=”browserupgrade”>到<a href=”http://[browsehappy.com](http://browsehappy.com/)“>
这里</a>体验</p>
<![endif]–>
单位
- px 精确单位
- em 相对的长度单位
参照物为父元素的font-size,具有继承特点.当没有设置font-size时,浏览器会有一个默认的em设置:1em=16px.缺点容易混乱. - rem
rem的相对参照物为根元素html,相对于参照固定不变,比较好计算
当没有设置font-size时,浏览器会有一个默认的rem设置:1rem=16px,这点是与em是一致的.
补充一个很重要的问题就是rem在chrome浏览器有个bug也就是它中文最小大小是12px.因此,当你设置font-size:62.5%时,你的字体是可以可以按照你设置的百分比计算,但是你的宽高等等都会按照12px去计算,所以你所写的样式都会1.2倍.因此,要想解决这个问题,要将html中的font-size:20px.此时1rem=20px,再根据比例进行设置即可.*
http://caniuse.com查找rem兼容
display和visibility的区别
display:none会挤占空间,visibility:hidden则不会
清除浮动的几种方法
方法一
在容器底部加入一个div空标签
<div style=”clear:both”></div>
违背了语义化的标准
方法二
给浮动元素的容器增加overflow:auto或hidden.
方法三
让浮动元素的容器也浮动,影响页面布局
方法四 best
.clearfix:before,
.clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
关于BFC
块级格式化上下文
只要触发BFC,就可以清除浮动.
:before的意义在于去除margin的叠加问题.
:after中table创建了匿名表格单元,触发BFC,可以实现清除浮动.
设置边框线技巧
header .top ul li + li{
border-left:1px solid #999;
margin-left:-3px; //不包含第一个li了
}
inline-block中元素的缝隙问题
方法一:删除空白符,但是不雅观
方法二:ul font-size设置为0,有很多副作用
方法三:li 不闭合
方法四:li设置负边距
背景透明,内容不透明
background-color:rgba(255,255,255,0.9)
calc计算属性
width:calc(33.3333333333333% – 3rem);
不增加外面高度
box-sizing:border-boxpadding将不会计算在高度内
文字省略号显示
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
滤镜
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
添加前缀:http://autoprefixer.github.io
媒体查询
@media only screen and (max-width: 800px) {
header .top{
background-color: green;
}
}
@media only screen and (min-width: 481px) and (max-width: 800px){
header .top ul li a{
color: red;
}
}
@media only screen and (max-width: 480px) {
header .top ul li a{
color: blue;
}
}
媒体查询单位的坑
因为@media级别非常高,并不是html的子元素
它所相对的并不是html中font-size的设置,而是浏览器默认的设置
rem在浏览器有兼容性问题,因此,即选用em.进行设置
@media only screen and (max-width: 50em) {
header .top{
background-color: green;
}
}
@media only screen and (min-width: 30.0625px) and (max-width: 50em){
header .top ul li a{
color: red;
}
}
@media only screen and (max-width: 30em) {
header .top ul li a{
color: blue;
}
}
http-server
npm install http-server -g
IE兼容html5
https://github.com/aFarkas/html5shiv
IE兼容媒体查询
https://github.com/scottjehl/Respond
主动兼容测试
同步测试服务器
npm install browser-sync -g
browser-sync start --server "src" --files "src"
