CSS知识整理

1、boder:wide style color(1px solid red)

2、boder-image

3、boder写三角

4、margin居中

方法一、

利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30

div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30

方法二、

利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来。

方法三、

方法四、

方法五、

5、display:flex 详诉弹性布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

6、transition与animation的区别

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。比如你有如下两个样式：

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

其中animate的transition的属性的意思说：当你的left属性发生变化的时候，执行动画效果（仅仅基于left的属性变化，其他的属性不会加入到动画变化里面去）；

首先你的元素的css为position。当你将其cssList 增加 animate 或者替换position 为animate的时候，元素的属性变化，触发webkit-transition，以指定属性变化前的值为起始值，变化后的属性为结束值，执行动画效果。这是一个简单的两点变化过程，大大简化了animation属性的复杂程度。

同时，如果在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

我在css编写的时候，因为变化的属性只有transform一个，因此在transtion属性里面指定响应属性为all，可以响应并执行元素所有属性的变化动画（能做动画的属性）。

Animation

在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。

做过Flash动画的人都会知道，Flash里面有两个基础武器：时间轴和关键帧。而css keyframes的出现，则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例：

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
	left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

7、行内元素折行产生间距的解决方法

1. 行内元素之间产生水平空隙的原因：代码中有意或无意的添加了换行符，tab（制表符）或者空格等字符引起的；

2. 解决方案：

删除引起问题的换行符，制表符或者空格等，但是缺点是会使代码结构混乱；
设置margin属性为负数，如：margin-left: -3px;缺点是负数的值不确定，得具体情况具体分析，不推荐；

在行内元素之间添加HTML注释注释符号；<!—->

1 <div>
2     <span>行内元素</span><!--
3     --><span>行内元素</span><!--
4     --><span>行内元素</span><!--
5     --><span>行内元素</span>
6 </div>

缺点是这样写会增加代码量，代码结构也会受影响；

设置font-size: 0; 用于消除换行符、tab（制表符）、空格等字符造成的影响，但需注意以下几点：

1. IE6，IE7浏览器当设置font-size：0时，换行符、tab（制表符）、空格始终存在1px的空隙；

2. 最新版本的Safari浏览器，Chrome浏览器不支持font-size: 0;；

解决方法如下：

1. 针对IE6、7浏览器，使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔），即： word-spacing:-1px;

2. 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px, html{-webkit-text-size-adjust:none;}

css代码如下：

html{
    -webkit-text-size-adjust: none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */
}
div {
    font-size: 0;/* 所有浏览器 */
    *word-spacing: -1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */
 }
span {
    font-size: 12px;
    letter-spacing: normal;/* 设置字母、字间距为0 */
    word-spacing: normal; /* 设置单词、字段间距为0 */
 }

8、CSS3:clip-path 了解

clip-path语法

W3C官方规范提供的clip-path语法：

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

其默认值是none。另外简单介绍clip-path几个属性值：

clip-source: 可以是内、外部的SVG的<clipPath>元素的URL引用

basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。具体的说明可以看CSS Shapes中有关于说明。另外在CSS Shapes 101一文中也有详细介绍。

geometry-box: 是可选参数。此参数和basic-shape函数一起使用时，可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何(由border-radius提供的)的角的形状。

开始使用clip-path

在开始使用clip-path绘制图形，或者说裁剪图形之前，有两点需要大家注意：

使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续线段，若线段彼此有交集，裁剪区域就会有相减的情况发生，当然如果你特意需要这样的效果除外。

如果绘制时采用比例的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有差距，使用像素绘制就不会有这样的现象。

9、opacity与Rgba的区别

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。两者的区别可以点击这里查看，也可以在codepen里修改属性值查看其它不透明度下的效果。

10、伪类和伪元素的区别

伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。

最为混淆的，可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类，而且即使在概念混淆的情况下，实际使用上也毫无问题——因为即使概念混淆，对真正使用也不会造成多少麻烦:)

CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分：

伪类用一个冒号表示 :first-child

伪元素则使用两个冒号表示 ::first-line

目前为止，伪元素在一个选择器里只能出现一次，并且只能出现在末尾。实则，伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

伪类的例子有：

:hover

:active

:first-child

:visited

等。

伪元素的例子有：

:first-line

:first-letter

:after

:before

11、calc

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能做什么？

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

12、position 属性