CSS3学习笔记

1.文档换行

a.强制一排显示文本，多出的地方切割文本，并加上省略号，"三句真言"

text-overflow:ellipsis; /*实现溢出时产生省略号的效果, 或者clip表示剪切*/
overflow:hidden;        /*溢出内容为隐藏*/
white-space:nowrap;    /*强制文本在一行内显示,连续的空白符会被合并，换行符会被当作空白符来处理*/

b.强制换行

word-break: break-all; /*只对英文起作用，以字母作为换行依据。*/
overflow-wrap: normal|break-word; /*只对英文起作用，以单词作为换行依据。*/
white-space: pre-wrap; /*只对中文起作用，连续的空白符会被保留。强制换行。*/

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行，它们的区别在于：

word-break:break-all
假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

overflow-wrap:break-word
例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。

2.设置元素背景图片的原始起始位置

background-origin ： border-box | padding-box | content-box; /*参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示*/

3.用来将背景图片做适当的裁剪以适应实际需要。

background-clip ： border-box | padding-box | content-box | no-clip
/*参数分别表示从边框、或内填充，或者内容区域向外裁剪掉背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。*/

4.设置背景图片的大小：

background-size: auto | <长度值> | <百分比> | cover | contain

1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比与自身以填满整个容器会溢出但不会显示；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

5.CSS3通配符

E[att^="val"]:选择匹配元素E，且元素定义了属性att，其属性值以val开头的任何字符串；
E[att$="val"]:选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串。
E[att*="val"]:选择匹配元素E，且E元素定义了属性att，其属性值任意位置包含了val。换句话说，字符串与属性值中的任意位置相匹配。

6.:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>

7.否定选择器

input:not([type="submit"]){  /*表单中除submit按钮之外的input元素添加红色边框*/
  border:1px solid red;
}
div:not([id=footer]){  /*除页脚”div#footer”之外的所有div设置橙色背景色*/
        background:orange;
}

9.空选择器

p:empty {      /*如果是空格也不会被选中*/
  display: none;
}

10.:target选择器称为目标选择器
匹配文档(页面)的url的某个标志符的目标元素, 用CSS表达对点击事件的反应
HTML代码：

<h2><a href="#brand">Brand</a></h2>  <--点击链接-->
<div class="menuSection" id="brand"><--显示段落-->
    content for Brand
</div>

CSS代码：

.menuSection{
  display: none;
}
#brand:target{/*这里的:target就是指id="brand"的div对象,如果有多个target,用#brand:target*/
  display:block;
}

11.list列表去装饰

list-style:none;
text-decoration:none;

12.nth-last-child(n)
从某父元素的最后一个子元素开始计算，来选择特定的元素。

13.:only-child, :only-of-type
父元素中只有一个子元素，而且只有唯一的一个子元素。

14.状态选择器“:checked”配合其他标签实现自定义样式

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}

15.::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。

::selection{
  background: orange;
  color: white;
}

16.:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”,
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

17.变形--旋转 rotate()
transform: rotate(45deg);

18:变形--扭曲 skew()
将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
transform:skew(45deg);

19:变形--缩放 scale()
scale(X,Y)使元素水平方向和垂直方向同时缩放
transform: scale(1.5);

20:变形--位移 translate()
使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
transform:translate(-50%,-50%);

21.变形--原点 transform-origin
transform-origin: left top;

22.过渡属性 transition
通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

23.过渡函数 transition-timing-function

24.动画定义关键帧

@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}

div:hover {
  animation: changecolor 5s ease-out .2s;
}

25.animation-iteration-count属性主要用来定义动画的播放次数

26.animation-direction属性主要用来设置动画播放方向，其语法规则如下：

animation-direction:normal | alternate [, normal | alternate]*

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

27.设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态。其主要有两个值：running和paused。

28.animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards 表示动画在结束后继续应用最后的关键帧的位置
backwards 会在向元素应用动画样式时迅速应用动画的初始帧
both 元素动画同时具有forwards和backwards效果

29.多列布局——Columns

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。
<column-width>主要用来定义多列中每列的宽度
<column-count>主要用来定义多列中的列数
要显示2栏显示，每栏宽度为200px，代码为：columns: 200px 2;

30.column-gap主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length>

31.列表边框column-rule
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。跟border一样
column-rule: 2px dotted green;

32.跨列设置column-span
column-span主要用来定义一个分列元素中的子元素能跨列多少,即跨越所以列

33.Responsive设计

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

对应的CSS代码：

@media (min-device-width:600px){
img[data-src-600px]{
  content: attr(data-src-600px,url);
  }
}
@media (min-device-width:800px){
  img[data-src-800px] {
  content:attr(data-src-800px,url);
  }
}

34.自由缩放属性resize
resize: none | both | horizontal | vertical | inherit

35.外轮廓线: 外轮廓线不占用网页布局空间,offset要单独写

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

 {
      outline: red solid 2px;
      outline-offset:2px;
  }

36.CSS生成内容

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {
  content:attr(title);
  color:#f00;
}

37.CSS长度单位
em: 相对于父元素的字体大小
ch: 数字“0”的宽度, 1ch表示此字体下的0的宽度
ex: 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
rem: 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
vmax: 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin: 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

38.hsla颜色
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。

39.border-shadow
/ offset-x | offset-y | blur-radius | spread-radius | color /
可以用逗号隔开，多重投影

40.background-position
指定背景图片距离任意角的偏移量，

background-position: right 20px bottom 10px;

background-origin
有两个值，一个是content-box，即以内容为基准，一个是padding box

background-origin: content-box;

42.渐变色的处理

background: linear-gradient(#fb3 20%, #58a 80%); /*容器顶部的20% 区域被填充为#fb3 实色，而底部20% 区域被
填充为#58a 实色*/

1)20%表示色标，表示从上到下20%的地方开始渐变成#58a,并在80%的地方停止渐变.
2)如果我们把第二个色标的位置值设置为0，那它的位置就总是会被浏览器调整为前一个色标的位置值
3)background: linear-gradient(to right, / 或 90deg /
#fb3 50%, #58a 0); 第一个值可以设置为方向，从下往上是0°，顺时针方向
4)整版无缝对接:

 background: linear-gradient(45deg,
                              #fb3 25%, #58a 0, #58a 50%,
                              #fb3 0, #fb3 75%, #58a 0);
                              background-size: 30px 30px;/*有三个地方有颜色过度*/

5)重复渐变:

background: repeating-linear-gradient(60deg,
              #fb3, #fb3 15px, #58a 0, #58a 30px);/*表示从#fb3开始，#fb3的15px开始渐变，每次差值为（15px-0）

43.background-size:为background-image中的每一个背景设置size，background-image中可以有多个图形，第一个的优先级最高，然后依次降低，就如font一样，

background-image:
    linear-gradient(90deg, red 10px, transparent 0),
    linear-gradient(90deg, blue 20px, transparent 0),
    linear-gradient(90deg, pink 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color
分别表示X轴方向的偏移量，Y轴的偏移量，使用高斯模糊算法（或类似算法）将它进行4px 的模糊处理，这在本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模

糊半径的两倍，使用4px 的模糊半径意味着投影的尺寸会比元素本身的尺寸大约8px，
因此投影的最外圈会从元素的四面向外显露出来，扩张半径，一个-5px 的扩张半径会把投
影的宽度和高度各减少10px（即每边各5px）。

给图片加滤镜的几种方式, 滤镜是可动画的，而混合模式则不是
1) 加滤镜:

img {
  transition: .5s filter;
  filter: sepia(1) saturate(4) hue-rotate(295deg);
}
img:hover,
img:focus {
  filter: none;
}

sepia()，它会给图片增加一种降饱和度的橙黄色染色效果,用saturate() 滤
镜来给每个像素提升饱和度,hue-rotate() 滤镜，把每个像素的色相以指定的度数进行偏移

2) 基于混合模式的方案,控制了上层元素的颜色与下层颜色进行混合的方式:
(1)mix-blend-mode

<a href="#something">
  <img src="tiger.jpg" alt="Rawrrr!" />
</a>

a {
  background: hsl(335, 100%, 50%);
}
img {
  mix-blend-mode: luminosity;
}

luminosity 混合模式会保留上层元素的HSL 亮度信息，并从它的下层吸取色相和饱和度信息。如果在下层准备好我们想要的主
色调，并把待处理的图片放在上层并设置为这种混合模式

(2)background-blend-mode

<div style="background-image:url(http://csssecrets.io/images/tiger.jpg)" class="tinted-image"></div>

.tinted-image {
  width: 640px; height: 440px;
  background-size: cover;
  background-color: hsl(335, 100%, 50%);
  background-blend-mode: luminosity;
  transition: .5s background-color;
}
.tinted-image:hover {
  background-color: transparent;
}

使用backgroundblend-mode 属性则可以让每层背景跟它的下层背景进行混合

用border制作三角形
高度和宽度都设置为0，上下左右的border都分割为小三角形，设置为透明，只留下一个自己想要的

#triangle-left {
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid #fff;
}

47.clip:rect属性
"auto"就是不剪裁之意，重置rect的作用外
rect(top right bottom left):最终剪裁的矩形的上边距离原始元素的上边缘30像素；剪裁矩形的右边缘距离原元素左边缘的距离是200像素；剪裁矩形的下边缘距离原元素顶部的距离为200像素；剪裁矩形的左边缘距离原元素左边缘的距离时20像素。
注意: clip:rect矩形剪裁只能作用于position:absolute的元素上

CSS3学习笔记

偶是大禹

引用和评论

前端面试之闭包

CSS团队协作规范

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？