CSS常用的一些总结

网站图标

favicon.Ico转换: www.bitbug.net

markdown在线编辑网站

dillinger.io

响应式布局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

主动兼容测试

https://modernizr.com/

同步测试服务器

http://www.browsersync.cn/

npm install browser-sync -g

browser-sync start --server "src"  --files  "src"