CSS知识点

一.BFC

BFC全称 “block formatting context”,块级可视化上下文

这个名词真的是第一次听说，不过好像css中很多样式问题，都跟BFC有着关系。
比如，之前一直用的使用overflow：hidden 属性来使div高度自动扩展，就是利用了BFC的知识，创建了一个BFC。
作用：
1. 消除margin collapse
2. 容纳浮动元素
3. 阻止文本换行
详见：参考文章

二.css画三角形

这个问题之前了解过，故不再详述，只记录之前参考的文章
画三角形原理

三.动画属性

css3新特性

1. transform “变形”

   • 前置属性

     • transform-origin 设置变形中心
     • transform-style （舞台效果是2d还是3d，这个属性要设置在父元素上）
     • perspective
     • perspective-origin
     • backface-visibility

   • 2D变形

     • translte 平移
     • scale 缩放
     • rotate 旋转
     • skew 扭曲
     • matrix

   • 3D变形

     • translate3d
     • scale3d
     • rotate3d
     • matrix3d

   详细参见：CSS3 transform介绍

2. transition “过渡”

   • 四个子属性
     
     • transition- property （设置会造成过渡的属性）
     • transition-duration （过渡动画的时间）
     • transition-timing-function （，ease、linear、ease-in、….）
     • transition-delay （过渡的延迟时间）
   • 触发过渡的方式
   • 开关过渡和永久过渡
     

     永久过渡的代码：(即是把回复原来状态的transition-delay设置成很大)
     .transition{transition:all 1s ease 999999s;}
     .transition:hover{transform:scale(1.5);transition:all 1s ease-in}

   详细参见CSS3 transition介绍

3. animation “动画”

   • animation-name 动画名称，即keyframe
   • animation-duration 动画时间
   • animation-timing-function
   • animation-delay 延迟时间
   • animation-iteration-count 动画执行次数，infinite为无限次
   • animation-direction （noraml、alternate来回正反播放、alternate-reverse跟第二个相反）
   • animation-play-state（可以通过js控制动画的状态，dom.style.animationPlayState=”paused/running”）
   • aniamtion-fill-mode (none、forwards、backwards、both)
   • @keyframes （执行动画的每一帧设置）
     

     文字闪烁的效果，通过animation-direction可以实现
     @keyframes blink{to:{color:transparent}}
     .blink{
         animation:.5s blink 6; 执行了6次动画，但是由于设置了alternate，所以看起来是闪烁了3次。
         animation-direction:alternate; 灭-亮-灭-亮-灭-亮
     }

   animation跟transition和tranform不同的地方就在于，它能够控制动画的每一帧
   详细参见CSS3 animation介绍

4. 新增的选择器
   详细参见CSS3新增选择器

   属性选择器
   a[src^=”https”] 选择src值是以https开头的a标签
   a[src$=”.pdf”] 选择src值是以pdf结尾的a标签
   a[src*=”abc”] 选择src值包含有abc字段的a标签

5. @font-face
   font-face可以用来加载字体样式

   加载服务端的字体文件
   @font-face{
       font-family:BorderWeb;
       src:url(****)
   }
   @font-face{
       font-family:Ruby;
       src:url(***)
   }
   
   .border{
       font-size:15px;
       color:black;
       font-family:"BorderWeb"
   }
   .p{
       font-size:15px;
       color:white;
       font-family:"Ruby"
   }

6. word-wrap
   word-wrap设置或检索当前行超过指定容器的宽度时是否断开转行(对于长单词或者url)
   white-space:nowrap(不转行) 默认是normal、转行

   .clip{
       text-overflow:clip; //超过200px的部分直接切掉
       overflow:hidden; 
       white-space:nowrap; //超过部分不换行
       width:200px;    
   }
   .ellipsis{
       text-overflow:ellipsis; //超过部分使用省略号代替
       overflow:hidden;
       white-space:nowrap;
       width:200px;    
   }

7. 文本渲染
   text-fill-color:文字内部填充颜色
   text-stroke-color:文字边界填充颜色
   text-stroke-width：文字边界宽度

8. background-clip

   • border-box 背景图片被剪裁到边框盒
   • padding-box 背景图片被剪裁到内边距框
   • content-box 背景图片被剪裁到内容框

9. background-size
   background-size: length|percentage|cover|contain;

   • percentage：以父元素的百分比来设置背景图片的宽度和高度 （100% 100%）
   • cover：将图片扩展到足够大，使图片完全覆盖区域
   • contain：将图片扩展到图片的最大尺寸，使其宽度和高度完全适应区域

10. background-origin

    • border-box 背景图像相对于边框盒来定位。
    • padding-box 背景图片相对于内边距框来定位。
    • content-box 背景图像相对于内容框来定位。

11. 线性渐变
    background: linear-gradient(direction, color-stop1, color-stop2, …);
    background:linear-gradient(to right,red,black);
background:radial-gradient(red,blue,green);

四. flex属性

Flex 布局教程：语法篇

五. 可继承的属性

参考文章

继承就是指子节点默认使用父节点的样式属性。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承

所有元素可继承： visibility和cursor。
内联元素可继承： letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承： text-indent和text-align。
列表元素可继承： list-style、list-style-type、list-style-position、list-style-image。

六.清除浮动的方法

1. 在浮动元素后面增加一个空的标签<div class="div"><div>

   .div{
       clear: both
   }

2. 给父元素增加属性：overflow: hidden

3. 给父元素增加after伪类(据说最高大上的做法)

   .div:after{
       content: '';
       display: block;
       height:　0;
       clear: both;    
       visibility: hidden; 
   }   

七.三栏布局的方式

1. 流体布局

   最简单的布局，左右两边分别左右浮动，中间通过margin-left和margin-right来跟左右分隔
   缺点是中间的不能第一时间展示

2. BFC

   左右两边还是使用float，中间div使用overflow：hidden创建一个bfc，因为bfc不会跟浮动元素重叠。
   缺点也是中间的div不能第一时间展示

3. 圣杯布局

   html架构是：

       <div class="container">
           <div class="main">main</div>
           <div class="left">left</div>
           <div class="right">right</div>  
       </div>

   第一步：先让container里面的三个main、left、right向左浮动，此时会导致container坍塌，设置overflow：hidden清除浮动问题
   第二步：再让main的width为100%，此时left和right就被挤下去了
   第三步：让left和right通过设置margin-left为负值，可以让三个div都在同一行，不过此时left和right都覆盖在main的上方。

   .left{
       margin-left: -100%;
   }   
   .right{
       margin-left:-(width)    
   }   

   第四步：接下去就是解决如何使left和right能分布在main的两边了。先给container 设置左右padding，分别等于左右两个div的宽，就是给两个div留出空位了，再给left和right两个div设置相对位置属性，分别设置left和right 为负的宽度，从而实现三列布局。

4. 双飞翼布局

   跟圣杯布局的前三步是一样的，不同在于解决“中间栏div内容不被遮挡”的思路不一样。双飞翼布局是给mian新增了一个子div，将要展示的内容放在子div里里面。
   html结构：

   <div class="container">
           <div class="main">
               <div class="content">main</div> 
           </div>
           <div class="left">left</div>
           <div class="right">right</div>  
       </div>

   双飞翼的第四步，是直接给content设置一个margin-left和margin-right。

5. flex

   使用display：flex实现。
   (简单实用，未来的趋势，需要考虑浏览器的兼容性。）

   .container {
           display: flex;
   }
   .main {
           flex-grow: 1;
       height: 300px;
       background-color: red;
   }
   .left {
       order: -1;
       flex: 0 1 200px;
       margin-right: 20px;
       height: 300px;
       background-color: blue;
   }
   .right {
       flex: 0 1 100px;
           margin-left: 20px;
       height: 300px;
       background-color: green;
   }

   参考文章：
   CSS布局经典—圣杯布局与双飞翼布局
   详解 CSS 七种三栏布局技巧