CSS技巧 - Githubissues

viviannow commented 8 years ago

@font-face { font-family: Blackout; src: url("assests/blackout.ttf") format("truetype"); } 用法： h2.singleMalta { font-family: 'SingleMaltaRegular' }

viviannow commented 8 years ago

清浮动可以对任何HTML元素单独使用这种方法 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

viviannow commented 8 years ago

@media screen and (max-width: 960px) {}

viviannow commented 8 years ago

小渐变线条： sce:after{ content:"";position: absolute;right: 0;top: 0; height: 100%;width: 1px; background: -webkit-linear-gradient(#fff, #919191,#fff); /* Safari 5.1 - 6.0 / background: -o-linear-gradient(#fff, #919191,#fff); / Opera 11.1 - 12.0 / background: -moz-linear-gradient(#fff, #919191,#fff); / Firefox 3.6 - 15 / background: linear-gradient(#fff, #919191,#fff); / 标准的语法 */ }

viviannow commented 8 years ago

弹性盒子模型 /设置容器为盒子/ .info-day-list { display: -webkit-box; padding: 1rem 0; } /设置item/ .info-day-item { -webkit-box-flex: 1; /设置item占据的比例/ \ width: 1%; font-size: 1.4rem; line-height: 3rem; text-align: center; } 需注意点 1、弹性盒子模型div块因为文字内容不同而不均分**

在开发的时候，我发现在使用弹性盒子模型时，如果涉及到文字的时候需要注意

由于天气的描述文字长度不同，如西南风和微风，分别是三个字和两个字。会有不同的宽度而导致不均分

如上面css所示，我设置了子元素width为1%（只有设置了item是统一的width就行，不一定需要是1%）就可以解决这个问题

以下为最兼容写法“

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }  
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

网址：http://www.w3cplus.com/css3/using-flexbox.html

viviannow commented 8 years ago

书写顺序： 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等)

也可以按字母顺序排列

viviannow commented 8 years ago

常用的CSS命名规则：头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签：tags 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner

id的命名: 1)页面结构容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center

(2)导航

导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary

(3)功能

标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标籤页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright

viviannow commented 8 years ago

老版本的IE不支持max-width,所以只好写成： img{width:100%;} 此外，window平台缩放图片时，可能出现图像失真的现象。这时可以尝试使用IE的专有命令： img{-ms-interpolation-mode:bicubic;}

viviannow commented 8 years ago

input IOS默认样式： -webkit-appearance: none;

viviannow commented 8 years ago

REM整体布局 rem 是什么 rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。rem计算的规则是依赖根元素。

基本写法如下面定义html的节点

/定义html根元素字体大小/ html{ font-size:10px;
} /定义子元素,采用rem作为单位/ .sonDom { width: 6rem; /_相当于 610=60px/ height: 3rem; /_相当于 310=30px/ line-height: 3rem; /_相当于 310=30px/ font-size: 1.2rem; /_相当于 1.210=12px/ border-radius: .5rem; /_相当于0.5_10=5px*/ }

如何动态更改根元素font-size值 为了实现分辨率适配，我们需要用根据屏幕的大小动态去计算根元素的font-size的值目前普遍的是两种方法：

1、通过媒体查询方式

通过媒体查询的方式，能够满足大部分场景，只需要把常用的屏幕宽度考虑进去即可

/默认为20px/ html { font-size : 20px; } /判断宽度设置不同的html font-size值去覆盖默认值/ @media only screen and (min-width: 320px){ html { font-size: 10px; } } @media only screen and (min-width: 375){ html { font-size: 16; } } @media only screen and (min-width: 414px){ html { font-size: 20px; } } 2、通过js设置

如果希望把所有屏幕大小给考虑进去，可以考虑使用js来计算（天气H5也是使用js来换算）,如下面的代码

//设置fontsize var doc = document, win = window; function initFontSize () { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; //window.innerWidth; if (!clientWidth) return; fontSizeRate = (clientWidth / 375); var baseFontSize = 15 * fontSizeRate; docEl.style.fontSize = baseFontSize + 'px'; };

    recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
};

在移动端使用rem的话，兼容性没问题的。但还是存在着一些需要注意的地方：

1、小数数值处理

不同浏览器计算rem转换为px数值时，对于小数点后的数值的处理是有所偏差，rem计算偏差的根源是浏览器内核数字类型的区别，如果浏览器的内核数字类型是float类型，能够较好地支持有小数点的数值。当浏览器内核数字类型是int类型，不支持小数点，会对数字进行四舍五入，这样就会有偏差。如果元素越大偏差得就越明显！

2、雪碧图rem

使用rem的同时又涉及到雪碧图时，由上面我们可以得知，rem的换算成px的尺寸非严格精确尺寸，如果雪碧图如果图标之间的距离过小，就可能导致图标过界，因此图与图之间的间隙需要留相应大一点。

3、单纯的rem没解决高度适配的问题。

单纯的rem没解决高度适配的问题，当然目前也没有特别多高度适配的场景，因此建议如果需要在使用rem基础上还做相应的高度适配，就要通过相应的js去辅助啦。

viviannow / autoProject

CSS技巧 #5