CSS个人集锦

⚡CSS个人集锦

1、使元素在一行显示：flex布局（display：flex），换行：（flex-wrap：wrap）
2、使元素靠向两边：（justify-content：space-between）

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

4、给文字加上横线：（text-decoration: line-through）、（text-decoration: underline）

5、设置文字间距：（letter-spacing:）
6、
文字溢出显示… :(text-overflow:ellipsis)
文字在一行显示：（white-space：nowrap）
文字超出隐藏：（overflow-hidden）
首行缩进：text-indent

vue父组件调用子组件里的方法

首先，引入子组件文件，然后用ref给子组件一个id标识，然后通过this.$refs.ref标识.子组件里的方法; 调用子组件方法

div中文字内容超出，可滚动显示

1、设置div宽度：width
2、设置文字一行显示：white-space
3、设置overflow：auto
4、文字超出自动换行word-break：word-break

flex布局

1、启动弹性布局：display:flex

flex-direction:

2、水平排列，起点在左：flex-direction：row
3、水平排列，起点在右：flex-direction:row-reverse
4、垂直排列,起点在上：flex-direction:column
5、垂直排列，起点在下：flex-direction：column-reverse

flex-wrap:

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

justify-content:

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items:

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content:

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

CSS3 transition 属性

作用：设置元素当过渡效果。
四个简写属性为：

transition-property
transition-duration
transition-timing-function
transition-delay
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
transition-property:属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。

提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。

注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
none :没有属性会获得过渡效果。
all :所有属性都将获得过渡效果。
property :定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

---

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

默认值： 0
继承： no
版本： CSS3
JavaScript 语法： object.style.transitionDuration=“5s”

语法
transition-duration: time;

---

transition-timing-function 属性指定切换效果的速度。

此属性允许一个过渡效果，以改变其持续时间的速度。

默认值： ease
继承： no
版本： CSS3
JavaScript 语法： object.style.transitionTimingFunction=“linear”

语法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic- - --bezier(0.25,0.1,0.25,1)）。
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

---

transition-delay 属性指定何时将开始切换效果。

transition-delay值是指以秒为单位（S）或毫秒（ms）。

默认值： 0
继承： no
版本： CSS3
JavaScript 语法： object.style.transitionDelay=“2s”

语法
transition-delay: time;

CSS3 filter(滤镜) 属性

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

默认值: none
继承: no
动画支持: 是。详细可查阅 CSS 动画
版本: CSS3
JavaScript 语法: object.style.WebkitFilter=“grayscale(100%)”

CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示: 使用空格分隔多个滤镜。
none 默认值，没有效果。

blur(px)给图像设置高斯模糊。
"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

brightness(%)给图片应用一种线性乘法，使其看起来更亮或更暗。
如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

contrast(%)调整图像的对比度。
值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：
(必须)
这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
(可选)
这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
(可选)
这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
(可选)
查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

grayscale(%) 将图像转换为灰度图像。
值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

hue-rotate(deg)给图像应用色相旋转。
"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

invert(%)反转输入图像。（负片）
值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

opacity(%)转化图像的透明程度。
值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

saturate(%) 转换图像饱和度。
值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

sepia(%) 将图像转换为深褐色。
值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

url() URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，
且可以包含一个锚点来指定一个具体的滤镜元素。
例如：
filter: url(svg-url#element-id)

initial 设置属性为默认值，

inherit 从父元素继承该属性，

---

CSS3 @keyframes 规则

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
语法
@keyframes animationname {keyframes-selector {css-styles;}}

示例：

{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
--------------------------------------------------------------
@keyframes loading16 {
	  0% {
	    -webkit-transform: rotate(0);
	    transform: rotate(0);
	  }
	  50% {
	    -webkit-transform: rotate(180deg);
	    transform: rotate(180deg);
	  }
	  100% {
	    -webkit-transform: rotate(360deg);
	    transform: rotate(360deg);
		ra
	  }
	}

CSS :after 选择器

:after 选择器向选定元素的最后子元素后面插入内容。

使用content 属性来指定要插入的内容。

示例：

<style>
p:after
{ 
	content:"ddd";
	background-color:yellow;
	color:red;
	font-weight:bold;
}
	div{
		width:50px;
		height:50px;
		background-color:red;
		color:#ffffff;
		content:"ddd"
	}
</style>
</head>

<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
	<div></div>

<p><b>注意:</b>:after作用于IE8 以及更早版本的浏览器,DOCTYPE 必须已经声明.</p>

</body>