css样式学习整理不断更新

4-21

盒模型：由于元素边看和内边距会撑开元素，以前的解决方法是元素实际宽度减去边框和内边距的宽度，

现在可以用

-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

支持IE8+

可以应用媒体查询@media来进行适配，当屏幕大于多少的时候横着排列，当屏幕小于多少的时候纵向排列

使用 inline-block 来布局。有一些事情需要牢记：

• vertical-align 属性会影响到 inline-block 元素，你可以把它的值设置为 top 。
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

• display: inline-block;
  vertical-align: top;
  width: 25%;

   

column可以实现文字的多列布局（是新标准，不兼容IE9及以下OperaMini）

-moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;

效果如图

清除浮动
1，让盒子负责自己的布局

2，overflow:hidden(auto)

3,::after{clear:both}
::after{
  height:0;
  clear:both;
  content:"";
  dispaly: table
}

table布局
.table {
   display:table
}
.table-row {
    display:table-row
}
.table-cell {
    display:table-cell
}
<div class="table">
    <div class="table-row">
        <div class="left table-cell">
          左
        </div>
        <div class="right table-cell">
          右
        </div>
    </div>
</div>

定位
relative（相对定位） 定位相对于本身
absolute（绝对定位） 相对于最近的absolute或relative
fixed 相对于屏幕或者说可视区域

float布局挺难的，没懂

inline-block布局，设置字体大小为0可清除间隙

background 通过bacground-position做雪碧图
border 可以做三角形
border-radius可以做扇形
box-shadow可以做哆啦A梦，
clip-path可以遮罩出各种图形
transform 旋转、缩放、移动或倾斜
tansition 补间动画（一般动画，动画曲线函数easing）
@keyframes 关键帧动画（可以直接指定动画）结合animation
    逐帧动画（通过设置animation-time-function:steps(1)去掉补间来实现）猎豹奔跑

居中
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

display:-webkit-flex;
-webkit-justify-content:center;
-webkit-align-items:center;

图片100*100，移动端设置background-size:50px可以显示清晰，如果设置100px，图片会模糊

postCSS工具 安装postcss-cli
    插件：autoprefixier自动加前缀
          postcss-import 合并@imort引入和clas单写样式
ExtractTextPlugin解决css modules 也可以用react-css-modules

http://envato.stammtec.de/themeforest/melon/charts.html
http://www.jc88.net/Article/wyzz/1395.html
前端开发编码规范： http://codeguide.bootcss.com。
http://www.2zzt.com/,http://uedfans.cn/
http://www.68design.net/

http://zh.learnlayout.com/position.html