css3的一些总结

display:flex

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员

在 Flexbox 模型中，有三个核心概念：
– flex 项（注：也称 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向

box-sizing

属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高

–themeColor

定义主题颜色

Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

& 表示当前选择器的父级

calc()

运算

padding

margin

box-sizing

box-sizing: border-box;

font-size

width

height

justify-content

justify-content: center

justify-content: space-around;

justify-content: space-between;

align-items

align-items: center;

background-color

border-radius

border-radius: 15rpx;

color

border-bottom

border-bottom: 5rpx solid currentColor;

margin-top

padding-bottom

text-align

font-style

flex-direction

flex-direction : column;

overflow

overflow : hidden;

-webkit-box-orient

-webkit-box-orient: vertical;

-webkit-line-clamp:

-webkit-line-clamp: 2;

position

position: fixed

flex-wrap

flex-wrap: wrap;

opacity

opacity: 0;

font-weight

float

float:hidden;

border-radius

transform

transform : translateX(-50%);