CSS3 -- 慕课学习笔记

边框效果

• border-radius 圆角效果
• box-shadow 边框阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小

• border-image 边框应用图片

border-image:url(borderimg.png) 70 repeat|round|stretch

---

颜色效果

• rgba 颜色加透明度

color：rgba(R,G,B,A)

• linear-gradient 渐变色彩

background-image:linear-gradient(to top left,red,yellow);

---

文字与字体效果

• text-overflow 设置是否使用省略标记

text-overflow: ellipsis; /*ellipsis表示显示省略标志 | clip表示剪切 */ 
overflow: hidden; 
white-space: nowrap;  /*强制文本在一行内显示*/

• word-wrap 控制连续文本是否换行

word-wrap: normal | break-word;  /* normal表控制连续文本换行 | break-word表内容将在边界内换行 */

• @font-face 嵌入字体

@font-face {
    font-family : "MOOC Font";
    src : 字体文件在服务器上的相对或绝对路径;
}
p {
    font-size :12px;
    font-family : "MOOC Font";
    /*必须项，设置@font-face中font-family同样的值*/
}

• text-shadow 文本阴影

text-shadow: X-Offset Y-Offset blur color;

---

背景相关样式

• background-origin 设置图片的原始起始位置

background-origin ： border-box | padding-box | content-box;

如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

• background-size

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

---

CSS3选择器

属性选择器

E[att^=“val”]开头匹配
E[att$=“val”]** 结尾匹配
E[att*=“val”] 任意匹配

伪类选择器

• :root 匹配根元素
• :not 除去元素
• :empty 找到空元素，有空格不算空元素
• :target 匹配文档url的某个标识符的目标元素

/* html */
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

/* css */
.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

多个url

/* html */
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>

/* css */
#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}

• :first-child 匹配第一个子元素

• :nth-child(n) 匹配多个子元素，n可以是整数、表达式(2n、2n-1、3n-1…)、关键词(odd、even)

• :last-child 匹配最后一个子元素

• :nth-last-child(n) 倒数匹配多个子元素

• :first-of-type 匹配第一个指定类型的子元素

• :nth-of-type(n) 匹配多个指定类型的子元素

• :last-of-type 匹配最后一个指定类型的子元素

• :nth-last-of-type(n) 倒数匹配多个指定类型的子元素

• :only-type 父元素只有一个子元素，匹配这个子元素

• :only-of-type 父元素有且仅有唯一这个类型的子元素，匹配这个子元素

• :enabled 匹配可用表单元素

• :disabled 匹配不可用表单元素

• :checked 匹配表单选中状态的元素

• ::selection 伪元素，在鼠标选择文本时所显示的样式

• ::before和::after

  这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

---

变形与动画

• transform: rotate(); 旋转，正值顺时针，负值逆时针

transform: rotate(20deg);

• transform: skew(X,Y); 扭曲，朝着x轴和y轴

transform:skew(45deg,45deg);

• **transform: scale(X,Y); ** 缩放，从中心原点进行缩放

transform: scale(1.5,0.5);

• transform:translate(); 移动

transform:translate(X,Y);
/* 或者 */
transform:translateX(X);
/* 或者 */
transform:translateY(Y);

• transition: transition-propert, transition-duration, transition-timing-function, transition-delay

  指定过渡或动态模拟的CSS属性，完成过渡所需的时间，过渡函数，开始出现的延迟时间

  注：当“transition-property”属性设置为all时，表示的是所有中点值的属性

  transition-timing-function：ease 由快到慢，逐渐变慢 | linear 恒速 | ease-in 加速(渐显) | ease-out 减速(渐隐) | ease-in-out 先加速后减速(渐显渐隐)

• @keyframes 关键帧

@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{
  animation: wobble 5s ease .1s;
}

• animation: animation-name , animation-duration , animation-timing-function , animation-delay;

  调用 @keyframes定义好的动画，播放时间，动画播放方式，动画开始播放的时间

animation-name: wobble;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: .1s;

• animation-iteration-count: infinite | 设置播放的次数
• animation-direction: normal | alternate 设置动画播放的方向
• animation-play-state: running和paused 用来控制元素动画的播放状态

---

布局样式

• columns： || 设置列宽和列数
• column-gap: normal || 设置列间距
• column-rule: || 设置列与列之间的边框宽度、边框样式和边框颜色 (类似于边框)
• column-span: none | all 设置是否跨越所有列

---

盒子模型

html元素都看成盒子，包括了margin、border、padding、content

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型

• W3C盒子模型 (标准盒子模型)

当我们对元素指定width、height时，只是设置了content，而盒子的总宽度/高度 = width/height + padding + border + margin

• IE盒子模型 (怪异盒模型)

当我们对元素指定width、height时，设置的是content + padding + border,合资的总宽度/高度 = width/height + margin

• 解决浏览器的兼容性问题：

不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式

• box-sizing: content-box | border-box | inherit

content-box : 让元素维持W3C的标准盒模型 (width = content)

border-box : 让元素维持IE传统的盒模型 (width = content + padding + border (怪异模式) )

 -webkit-box-sizing: border-box;     /* Safari| chrome */
       -moz-box-sizing: border-box;  /*firefox浏览器*/
        -ms-box-sizing: border-box;  /*微软IE浏览器*/
         -o-box-sizing: border-box;  /*Opera浏览器*/
            box-sizing: border-box;

---

Flexbox布局，即伸缩布局盒模型

可以轻松的实现屏幕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

Flexbox布局功能主要具有以下几点：

第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；

第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；

第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；

第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

第五，可以控制元素在页面上的布局方向；

第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

1.创建一个flex容器

.flexcontainer{ 
    display: -webkit-flex; 
    display: flex; 
}

2.Flex项目显示

flex-direction: row | column 主轴方向，水平轴或垂直轴

3.Flex项目移动到顶部

justify-content: flex-start; 水平方向

align-items: flex-start; 垂直方向

将flex项目移动到顶部，取决于主轴的方向

4.Flex项目移到左边

flex项目称动到左边或右边也取决于主轴的方向。

如果flex-direction设置为row，设置justify-content控制方向；

如果设置为column，设置align-items控制方向。

5.Flex项目移到右边

justify-content: flex-end; 水平方向

align-items: flex-end; 垂直方向

6.水平垂直居中

设置justify-content或者align-items为center。

另外根据主轴的方向设置flex-direction为row或column。

7.Flex项目实现自动伸缩

给每个flex项目设置flex属性设置需要伸缩的值，使得Flex项目相对于flex容器实现自动的伸缩

---

媒体类型

媒体类型的引用方法有: link标签、@import和CSS3新增的**@media**

• link标签

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

• @import

<style type="text/css">
    @importurl(reset.css) screen;   
    @importurl(print.css) print;
</style>

• @media

  @media 媒体类型and （媒体特性）{你的样式}

  媒体特性：max-width | min-width | device width(设备屏幕的输出宽度)

  not | only 关键词

<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
    }
</style>

在Responsive布局中，可以毫无保留的丢弃：

第一， 尽量少用无关紧要的div；

第二，不要使用内联元素（inline）；

第三，尽量少用JS或flash；

第四，丢弃没用的绝对定位和浮动样式；

第五，摒弃任何冗余结构和不使用100%设置。

帮助Responsive确定更好的布局的有：

第一，使用HTML5 Doctype和相关指南；

第二，重置好你的样式（reset.css）；

第三，一个简单的有语义的核心布局；

第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

---

其他重要属性

• resize 自由缩放属性

resize: none | both | horizontal | vertical | inherit

不允许拖动 | 可以修改宽度和高度 | 只可以修改宽度 | 只可以修改高度 |继承父元素属性值

• outline 外轮廓属性

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

outline-offset：定义轮廓边框的偏移位置的数值

• 生成内容

content配合CSS的伪类或伪元素

content: “” | attr() | url() | string

不生成任何内容 | 插入标签的属性值 | 插入外部资源 | 插入字符串