理解CSS命名规范--BEM

最近在写博客主题的时候发现一个很严重的问题,由于css的命名并不是很规范,导致自己在后期修改的时候很是头疼,有些样式需要在浏览器中打开开发者工具去找,很是无奈。所以决定在写完主题之后学习下CSS命名规范中大名鼎鼎的BEM命名规范。

查看全文
慕课网---深入理解vertical-align总结

看了张鑫旭在慕课网关于vertical-align的讲解,感觉讲的挺深,所以总结了一下
vertical-align的百分比值相对于line-height计算
IE6/7下line-height不支持小数

vertical-align起作用的前提

该属性应用于inline水平或者table-cell元素

inline水平

inline:img,span,strong,em等
inline-block:input,button(ie8+,ie6/7会把inline-block当作inline)

table-cell元素

td
所以默认情况下支持vertical-align的有:图片,按钮,文字,单元格

查看全文
text-algin:justify实现文本两端对齐

最近在写页面的时候遇到了一个问题—当行文本双端对齐,大家都知道CSS属性中有一个“text-align:justify”,但是这个属性使用的时候,要求还是挺多的,尤其是要实现单行文本双端对齐。关于两端对齐,大漠和张鑫旭的博客中都有文章讲,非常不错,推荐给大家:
display:inline-block/text-align:justify下列表的两端对齐布局
Text-align:Justify和RWD

text-align:justify与text-align-last:justify

1.text-align

MDN中这样介绍到:“text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐,只控制它的行内内容的对齐。”从这里可以看出,控制文本居中对齐直接写text-align:justify就可以。但是这对于多行文本(即有文本换行)除了最后一行都可以实现两端对齐,最后一行依旧左对齐。所以就需要控制最后一行文本对齐方式的CSS属性:text-align-last。

查看全文
利用CSS3新单位rem实现响应

做移动端的响应方法有很多,但是我喜欢用CSS3的新单位rem,这个单位非常好用(有个比它还好用的单位vh,不过兼容性太差,不考虑了),根据不同屏幕,设置不同的基准值,从而实现适配各个屏幕尺寸的移动设备。慕课网有一套非常不错的讲关于rem的视频,这里推荐给大家http://www.imooc.com/learn/494
rem—-CSS3中新增的单位,兼容性还不错,常用于移动端实现字体的响应,与em不同,rem根据根元素的font-size计算,所以要利用rem实现适配各个屏幕的大小,就需要根据不同的屏幕设置根元素不同的font-size的值。所以我们需要做下面的一些工作。

1.获取浏览器的宽高(对于移动设备就是设备的宽度)

代码如下:

1
2
3
4
5
6
7
8
9
10
11
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth !=='number'){
if(document.compatMode==='CSS1Compat'){
pageWidt=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidt=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}

查看全文