AdiHuang

Posted 2018-08-07Manual

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

.box{
  display: -webkit-flex;  /* -webkit */
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;  /* row */
  flex-wrap: nowrap | wrap | wrap-reverse;  /* nowrap */
  flex-flow: <flex-direction> || <flex-wrap>;  /* row nowrap */
  justify-content: flex-start | flex-end | center | space-between | space-around;  /* flex-start */
  align-items: flex-start | flex-end | center | baseline | stretch;  /* stretch */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;  /* stretch */
}

.item {
  order: <integer>;  /* 0 */
  flex-grow: <number>;   /* 0 */
  flex-shrink: <number>;  /* 1 */
  flex-basis: <length> | auto;  /* auto */
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];  /* 0 1 auto */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;  /* auto */
}

Posted 2017-04-28Note

自定义字体 @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Posted 2016-12-06Note

sass - Retinal屏border显示1px

@mixin border($top, $right, $bottom, $left, $color:#f00) {
  content: " ";
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  color: $color;
  $position: '';
  $transform-origin: '';
  $scale: '';
  @if $top == 'auto' or $bottom == 'auto' {
    height: 1px;
    $scale: 1, .5;
  }
  @else if $left == 'auto' or $right == 'auto' {
    width: 1px;
    $scale: .5, 1;
  }
  @if $top == 'auto' {
    $position: bottom;
    $transform-origin: 0 100%;
  }
  @else if $right == 'auto' {
    $position: left;
    $transform-origin: 0 0;
  }
  @else if $bottom == 'auto' {
    $position: top;
    $transform-origin: 0 0;
  }
  @else if $left == 'auto' {
    $position: right;
    $transform-origin: 100% 0;
  }
  border-#{$position} : 1px solid $color;
  -webkit-transform-origin: $transform-origin;
  transform-origin: $transform-origin;
  -webkit-transform: scale($scale);
  transform: scale($scale);
  z-index: 1;
}
.demo {
  position: relative;
  &:before {
    @include border(0, 0, auto, 0, #666);  // top, right, bottom, left, color
  }
}

Posted 2016-10-10Note

base.css

常用的base.css初始化样式


@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

html, body {
  color: #333;
  background: #fff;
  line-height: 1.2;
}

a {
  color: #D7171F;
}

a:hover {
  color: #D7171F;
  text-decoration: none;
}

html {
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

button,
input,
select {
  vertical-align: middle;
  outline: none;
}

textarea {
  outline: none;
  resize: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b3b3b3;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #b3b3b3;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #b3b3b3;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #b3b3b3;
}

/*::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background-color:#fff;}
::-webkit-scrollbar-thumb{background-color:#ccc; border-radius:4px;}
::-webkit-scrollbar-thumb:hover {background-color:#ccc}
::-webkit-scrollbar-thumb:active {background-color:#ccc}*/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
}

ol,
ul {
  list-style: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

Posted 2016-10-04Note

Retina屏幕下border 1px解决方案

retinal屏幕下@2x, @3x会使css设定好的border 1px变成2倍或者3倍。
以@2x为例，用css解决这个放大的问题（此方法能解决直线）

.scale{
  position: relative;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #ddd;
  -webkit-transform: scaleY(.5);
  -webkit-transform-origin: 0 0;
}

Posted 2016-08-16Manual

SASS用法指南

一、什么是SASS

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

二、安装和使用

2.1 安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

gem install sass

然后，就可以使用了。

Posted 2016-03-25Note

禁止复制、选中文本

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

Posted 2016-03-25Note

去除ios中input默认样式

input,textarea,select,button {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-radius:0;
}

Posted 2016-03-25Note

IE6 png图片透明的2种方法

一.图片当背景，CSS方法

img {
    _background:none;  
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='crop');
    }

但是测试发现当给background:red url(logo.png) no-repeat center;加了红色时，别的浏览器正常识别，ie6会出现依旧不识别的情况。
解决办法是在外面套的标签，或body加背景色。（background-color:red;单独写就可以了）
强调：IE6做了透明的背景，对他上面<A>便签会失效，也就是点有连接的地方没连接了，解决方案：
列<div class="top"><a>首页</a> <a>关于我们</a> <a>产品中心</a>...</div>，如果top这个class有PNG背景，而你又用了我那个代码，这个时候里面的链接会没反映的，解决就是:
.top a{position:relative}，这个很常用了

Posted 2016-03-25Note

div设置最小高度（兼容IE6）

.test {
  height:auto!important;
  height:200px;
  min-height:200px;
}

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义

一、什么是SASS

二、安装和使用

Tags