css基础知识，温故知新1

 

border

border常用的属性有4个；
1、宽度：border-width
2、样式：border-stye dotted(点) dashed(曲线) solid(实线) none(没边框)
3、颜色：border-color
4、圆角：border-radius

小技巧

可以用border来实现小三角型，梯形等图案；
示例：

{
 font-size: 0;         /*浏览器默认有字体大小和行高*/
 line-height: 0;
 border-width: 5px;
 border-rigth-width: 0;    /*设置右边宽度为0*/
 border-style: dashed;    /*一定不能只设计左边border的style，否则其他默认为none，会出错，不能达到预期效果*/
 border-left-style: solid;
 boder-color: transparent;   /*设置其他边为透明*/
 border-left-color: #000;
}

可以把不同边的宽度设置的不同，以实现不同形状的三角行

position定位

有5种定位模式
*static：默认值，及没有定位，不受left，right，top，bottom的影响
*relative：相对布局（参照原位置），受left，right，top，bottom的影响
*absolute：绝对定位，经常以relative元素为父容器，不占空间，会出现重叠；
*fixed：固定位置，不受滑动窗口滑动影响
*sticky：可设置left，right，top，bottom之一作为阈值；
达到阈值前表现为relative，达到阈值后表现为fixed；

具体效果可看菜鸟教程。
应用：做滑动菜单等；

---

背景图

• background-image可以同时设置多个背景图片，写在前面的层级较高；
  当使用背景图时，一定要设置其size，否则图片不显示
• background-position ,用于确定背景图的位置，可以为数字，正表示右（下）移；
  也可以用right top表示从图片右上角开始显示；

当有多个背景图，属性之间用'，'分隔;

• background-repeat: repeat/no-repeat/repeat-x/repeat-y；

• background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

  • scroll 背景图片随页面的其余部分滚动。这是默认
  • fixed 背景图像是固定的
  • inherit 指定background-attachment的设置应该从父元素继承

---

文本格式

• 设置文本颜色 color

• 设置文本对齐方式 text-align

  • center居中
  • left 居左/right 居右
  • justify 每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）

• 文本的竖直对齐方式 vertical-align作用对象不为text，是img...

  • middle 位于父组件中部
  • text-top 把元素的顶端与父元素字体的顶端对齐
  • text-bottom 把元素的底端与父元素字体的底端对齐

• 文本修饰 text-decoration

  • 可以用来加下划线，删除线，或去除连接的下划线
• 指定文本第一行缩进 text-indent:50px;
• 设置行间距 line-height 可用于文本的竖直居中
• 设置单词间距/字符间距 word-space/letter-space
• 控制文本的书写方向 direction: rtl;

unicode-bidi 属性与 direction 属性一起使用，来实现文本的倒写

• unicode-bidi 文本是否倒着写
• white-space 常用于控制文本是否换行

---

css3新增属性：
background-size：设置背景图大小；可以设置像素大小，也可以用百分数；

background-Origin,用于指定背景图像显示的位置；
content-box;在内容部分显示；
padding-box；在内边距显示；
margin-box；在外边距显示；

background-clip,用于指定背景图像开始显示的位置；
content-box;从内容部分开始；
padding-box；从内边距开始；
margin-box；从外边距开始；

2D变换

*语法：transform：none | translate（）……

1. translate（x，y）方法，以x，y轴为参考进行平移操作；px
2. rotate（x）方法，在一个给定读书顺时针旋转，可以为负值；deg
3. scale（x，y）方法，规模的变化，宽度变为x倍，高度变为y倍；
4. skew（x，y），分别表示x轴，y轴倾斜的角度；
   （类似于极坐标，使用后以该座标系为标准）

上述方法均可以单独对一个坐标轴使用；（例：scale Y（））；

1. matrix（）方法。将所有的2D方法合并成一个；

3D转换类似

css3过渡

元素从一种样式改变为另一种样式的效果

• transition：width 2s；要指定添加效果的属性，指定效果持续时间
• 触发过渡的事件，比如鼠标移动到上面，或点击……
• Transition-delay,效果何时开始
• Transition-timing-function:过渡效果的事件曲线
  默认为ease，linear（查css文档）

css3动画

1. 在@keyframes里定义动画
2. 把动画绑定到一个选择器，否则不会有任何效果；

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}

    //from,to和0%，100%对应。常用下面选择器
    /* 
    0% {background: red;}
    25% {background: blue;}
    50% {background: yellow;}
    100% {background: green;} 
    */
}
div{
    animation: myfirst 5s;
}

常用属性（其他属性可查文档）

• animation-timing-function设置动画的速度曲线
• animation-iteration-countd动画的循环次数，默认为1，infinite为无限循环

css3多列

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写

滴水穿石,不是力量大,而是功夫深