HTML+CSS(4)

1.BFC规范

• Formattion context（格式化上下文）是W3C CSS2.1规范中的一个概念。
  它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
• BFC即Block Formatting Contexts（块级格式化上下文），它属于上述中的其中一种规范，具有BFC特性的元素可以看作是隔离了的独立容器。容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

触发BFC

• 浮动元素： float除none以外的值
• 绝对定位元素： position(absolute、fixed)
• display: 为inline-block table-cells flex
• overflow: 除了visible以外的值(hidden auto scroll)

BFC特性及应用
触发BFC规范的元素，可以形成一个独立的容器，不受到外界的影响， 从而解决一些布局问题。触发的样式：float display position overflow

• 解决margin叠加问题

• 解决margin传递问题

• 解决浮动问题

• 解决覆盖问题

• margin取两者的最大值，为了叠加，可以使用BFC规范。

.div1{width: 100px;
		height: 100px;
		background-color: red;
		margin-bottom: 30px;}
.div2{width: 100px;
		height: 100px;
		background-color: blue;
		margin-top: 30px;}
.box{display: flex;}
   
   <div class="box">
       <div class="div1"></div>
   </div>
   <div class="box">
       <div class="div2"></div>
   </div>

• 解决margin传递问题(出现在嵌套当中)
  问题如下

.div1{width: 200px;height: 200px;background-color: red;}
.div2{width: 100px;height: 100px;background-color: blue;margin-top: 50px;}
   <div class="div1">
       <div class="div2"></div>
   </div>

父元素随着子元素也往下移动，可以采用BFC规范解决

.div1{width: 200px;height: 200px;background-color: red;overflow: hidden;}
.div2{width: 100px;height: 100px;background-color: blue;margin-top: 50px;}
   <div class="div1">
       <div class="div2"></div>
   </div>

• 解决浮动问题（嵌套浮动问题，需要清浮动）

.div1{width: 200px;border: 1px solid black;display: inline-block;}
.div2{width: 100px;height: 100px;background-color: blue;float: left;}  
   <div class="div1">
       <div class="div2"></div>
   </div>

• 解决覆盖问题

.div1{width: 100px;height: 100px;background-color:green;float: left;}
.div2{width: 200px;height:200px;background-color: red;overflow: hidden;}
    
   <div class="div1">绿色浮动盒子</div>
   <div class="div2">红色盒子</div>

2.CSS浏览器前缀

CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。
浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式语法还在波动的时候，他们提出来针对浏览器的前缀。

浏览器	内核	前缀
IE	Trident	-ms-
Firefox	Gecko	-moz-
Opera	Presto	-o-
Chrome	Webkit	-webkit
Safari	Webkit	-webkit
Opera、Chrome	Blink

3.transition过渡

• transition-property: 规定设置过渡效果的CSS属性的名称。
• transition-duration: 规定完成过渡效果需要多少秒或毫秒。
• transition-delay: 定义过渡效果何时开始。(既可以延迟，也可以提前，提前为负)
• transition-timing-function: 规定速度效果的速度曲线。
  • liner(匀速)
  • ease(默认值,速度慢下来)
  • ease-out(加速)
  • ease-in-out(减速)
  • cubic-bezier (http://cubic-bezier.com)
    格式：cubic-bezier(.17,.67,.16,1.45)

      div { 
        width: 100px;
        height: 100px;
        background-color: red;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0.5s;
        transition-timing-function: linear;
      }
      div:hover {
        width: 200px;
        height: 200px;
        background-color: blue;
      }

注意： 不要把transition写在hover中
复合写法： transition:1s 2s liner;
顺序无所谓，不写默认为all,ease，第一个时间是duration,第二个为delay

4.transform变形

• translate: 位移
  单一样式translateX translateY translateZ(3d)
• scale: 缩放(值是一个比例值，正常大小就是1,会以当前中心点进行缩放) scaleX scaleY scaleZ
  宽高比例相同，可以只写一个值 scale(2)与scale(2,2)效果相同
• rotate: 旋转
  (旋转的值，单位为角度deg,弧度rad) rotateX(3d) rotateY(3d) rotateZ（和rotate是等价关系）
  正数是顺时针旋转，负数是逆时针旋转
• skew: 斜切
  skewX skewY 单位也是角度，正值向左倾斜，负值向右倾斜 ``

.box2{width: 100px;height: 100px;background-color: red;transition: 2s;}
.box1:hover .box2{/* transform: translate(100px,0); */ /* transform: scale(2,2); */
 /*  transform:rotate(45deg) */ transform: skew(45deg);} 
/* 给box1加hover效果去移动box2 */
    <div class="box1">
        <div class="box2"></div>
    </div>

transform的注意事项：

1. 变形操作不会影响到其他元素
2. 变形操作只能添加给块元素，但是不能添加给内联元素
3. 复合写法： 可以同时添加多个变形操作
   执行是有顺序的，先执行后面的操作，再执行前面的操作
   translate会受到rotate scale skew的影响
4. transform-origin: 100px 100px; 基点，默认是中心点即
   transform-origin:center center;

5.animation动画

• animation-name: 设置动画的名字（自定义的）
• animation-duration: 动画的持续时间
• animation-delay: 动画的延迟时间
• animation-iteration-count: 动画的重复次数，默认值为1，infinite无限次数
• animation-timing-function: 动画的运动形式

【注】运动结束后，默认情况下会停留在起始位置
@keyframes : from->0% to->100% 可以分很多帧
复合形式写法： animation:myBox 4s 2s infinite linear;
第一个时间是持续时间，第二个为延迟时间，其他顺序无所谓

      .box1{width: 300px;height: 300px;border:1px solid black;margin: 30px auto;}
        .box2{width: 100px;height:100px;background-color: red;
        animation-name: myBox;
        animation-duration: 4s;
        animation-delay: 2s;
        animation-iteration-count:3;
        animation-timing-function: linear;}

        @keyframes myBox {
            from{transform: translate(0,0);}
            to{transform: translate(200px,0);}            
        }
    <div class="box1">
        <div class="box2"></div>
    </div>

animation动画扩展语法
animation-fill-mode: 规定动画播放之前或之后，其动画效果是否可见

• none(默认值)： 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
• backwards: 在延迟的情况下，让0%在延迟前生效
• forwards: 在运动结束之后，停到结束位置 0% 是在延迟之后生效
• both: backwards和forwards同时生效, 停到结束位置 0% 是在延迟之前生效。

animation-direction: 属性定义是否应该轮流反向播放动画。

• alternate: 一次正向(0%-100%),一次反向(100%-0%)
• reverse: 永远都是反向，从100%-0%
• normal(默认值): 永远都是正向，从0%-100%

 div{width: 100px;height: 100px;
	background-color: red;
 	animation: 1s move infinite;
        animation-direction: alternate;}

        @keyframes move {
            0%{transform: translate(0,0);}
            100%{transform: translate(100px,0);}
        }

animate.css
一款强大的预设css3动画库
点击进入官网

基本使用：
animated: 基类(基础的样式，每个动画效果都需要加)
infinite: 动画的无限次数
直接引入进来，然后添加class属性，animated是必有的，然后选择样式

<link rel="stylesheet" href="./animate.css">
    <img src="./image/01.png" alt="" class="animated tada">

6.transform3D相关属性

• rotateX(): 正值向上翻转
• rotateY(): 正值向右翻转
• translateZ(): 正值向前，负值向后
• scaleZ(): 立体元素的厚度

perspective: 离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin: 景深-基点位置，观察元素的角度。
transform-origin: x y z z轴只能写数值，不能写单词
transform-style: 3D空间
flat(默认值2d) preserve-3d(3d 产生一个三维空间)
backface-visibility: 背面隐藏 hidden visible(默认值)

3d写法？

• scale3d(): 三个值 x y z
• translate3d(): 三个值 x y z
• rotate3d(): 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

7.CSS3提供扩展背景样式

背景尺寸—位置—剪裁

• background-size: 背景图的尺寸大小 也可以自定义
  cover:覆盖（放大后截取） contain:包含（放大到容纳不了） 等比放大
• background-origin: 背景图的填充位置
  padding-box(默认) border-box content-box
• background-clip: 背景图的裁切方式
  padding-box border-box(默认) content-box

复合样式： 第一个为填充位置，第二个为裁切

8.CSS3渐变

• linear-gradient: 线性渐变，是值，添加到background-image属性上
  point ||angle color percentage
  渐变的0°是在页面的下面，正值会按照顺时针旋转，负值按逆时针旋转
• radial-gradient: 径向渐变 point color percentage

9.字体图标：

font-face是CSS3中的一个模块，它主要是把自己定义的Web字体嵌入到你的网页中。
好处：

1. 可以非常方便的改变大小和颜色 font-size color
2. 放大后不会失真
3. 减少请求次数和提高加载速度
4. 简化网页布局
5. 减少设计师和前端工程师的工作量
6. 可使用计算机没有提供的字体
   使用：@font-face

字体图标：
点击进入阿里巴巴矢量图标库
提供了大量免费的字体图标
点击进入自定义字体图标： 在线生成字体图标

10.文字阴影

text-shadow: x y blur color

text-shadow:10px 10px 20px blue, -10px -10px 20px yellow ;

x轴向右偏移10px,y轴向下偏移10px,阴影模糊值20px，值越大越模糊，可以设置多阴影，用逗号隔开
阴影默认颜色与文字颜色相同

11.盒子阴影(针对盒子)

box-shadow: x y blur spread(阴影的扩散范围如10px) color inset(内阴影，不写默认为外阴影) 多阴影
注：盒子阴影的默认样式是黑色,默认是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影

12.遮罩 mask

mask: url repeat x y w h 多遮罩

• mask还未标准化，需要加浏览器前缀
• 默认x y都平铺

-webkit-mask: url(’./image/mask.png’) no-repeat 100px 100px /100px 100px;
前面的是移动坐标，后面的指定遮罩层的大小

13.倒影 box-reflect

box-reflect: above below left right 距离 遮罩|渐变
需要加浏览器前缀 渐变只能针对透明度的渐变，不能支持颜色的渐变
注：利用scale为-1能实现翻转

14.模糊与计算

blur模糊 filter:blur()
calc计算 四则计算

 img{filter: blur(10px);}
.parent{width: 800px;height: 300px;
	border: 1px solid black;}
.box{height: 100px;width:calc(100% - 100px) ;
	background-color: red;}

<img src="./image/03.jpg" alt="">
<div class="parent">
        <div class="box"></div>
</div>

15.分栏布局

column-count:分栏的个数
column-width:分栏的宽度 
column-gap:分栏的间距
column-rule:分栏的边线
column-span:合并分栏
注：column-count与column-width不要一起设置

16.伪类与伪元素

• CSS3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后为伪元素的名称。
• 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息。
• 伪类通常表示获取不存在与DOM树中的信息，或获取不能被常规CSS选择器获取的信息。:hover :focus :empty …
• 伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
  ::selection ::first-line/ first-letter ::before / after