CSS零碎知识整理

布局

1. 三列布局，左右侧栏固定300px，三列高度统一给定，中间自适应

此简单问题，答上三种及格，答上五种优秀，分别为：

1. float
2. position: absolute
3. tablecell
4. flexbox
5. grid

重点：

• 块级元素默认宽度为父容器100%无需多余设置。
• flex-direction默认为row，flex-wrap默认nowrap。
• grid布局务必要掌握，可查阅grid实现布局, https://gridbyexample.com/examples/
  响应grid布局,张鑫旭 display: grid布局教程, Grid入门精通教程 、 A Complete Guide to Grid (需科学上网) 或 Grid布局指南 -

答案：

    
    
    
    
    


    

        
        

            

            

            

                
浮动解决
                
1. 三栏布局中间部分
                
1. 三栏布局中间部分
                
1. 三栏布局中间部分
                
1. 三栏布局中间部分
                
1. 三栏布局中间部分
                
1. 三栏布局中间部分
                
1. 三栏布局中间部分
            
        
    
    

        
        

            

            

                
绝对布局
                1. 三栏布局中间部分
                2. 三栏布局中间部分
            
            

        
    
    

        
        

            

            

                
flexbox
                1. 三栏布局中间部分
                2. 三栏布局中间部分
            
            

        
    
    

        
        

            

            

                
table-cell
                1. 三栏布局中间部分
                2. 三栏布局中间部分
            
            

        
    
    

        
        

            

            

                
grid
                1. 三栏布局中间部分
                2. 三栏布局中间部分
            
            

        
    

ps： tablecell也可以实现带多行文本的div垂直居中。

.parent {
     display: table;
     width: 300px;
     height: 300px;
     text-align: center;
}
.son {
     display: table-cell;
     height: 200px;
     background-color: yellow;
     vertical-align: middle;
 }

image

2. 三列布局，上下固定高度，中间自适应（移动端常见）

目前实现了三种，分别为：

1. position：absolute
2. flexbox
3. grid (稍微做了下变形）

答案：

    
    
    
    
    


    

        
        

            

            

                
绝对定位
                
1. 中间填充的文字
                
1. 中间填充的文字
            
            

        
    
    

        
        

            

            

                
flexbox
                
1. 中间填充的文字
                
1. 中间填充的文字
            
            

        
    
    

        
        

            

            

                
grid
                
1. 中间填充的文字
                
1. 中间填充的文字
            
            

        
    

3. 用flex和grid绘制带有hover高亮边框效果的九宫格

九宫格

  
  

    
1
    
2
    
3
  
  

    
4
    
5
    
6
  
  

    
7
    
8
    
9
  

  
  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
  

盒模型

1. 标准模型宽高不计算padding和border；IE模型宽高计算padding和border。
   box-sizing : content-box(标准模型-默认)/border-box(IE模型)
2. JS获取宽高
   dom.style.width 只能取内联宽高.
   window.getComputedStyle(dom).width 浏览器渲染之后的取值，兼容性更好. IE使用dom.currentStyle.width .
   dom.getBoundingClientRect().width/height/left/top/bottom/right ,返回所在ViewPort左顶点的绝对位置，常用于计算位置.

BFC (块级格式化上下文)

1. BFC布局规则：（引用自 - 关于CSS-BFC深入理解 )
   1.内部的Box会在垂直方向，一个接一个地放置。
   2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
   3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   4.BFC的区域不会与float box重叠。
   5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之如此。
   6.计算BFC的高度时，float元素也参与计算

2. 创建BFC
   1.position 为 absolute 或 fixed (position不为static或relative)
   2.浮动元素 (float不为none)
   3.display为inline-block | table | flex | grid
   4.overflow不为visible
   5.标签

零碎小技巧

1. 妙用background：background: url(...) no-repeat center 0;保持图片在父容器大小变化时，时刻保持水平居中。
2. 清除浮动时，mdn上最新推荐的clearfix写法：

/* new clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

动画

CSS3

SVG

Convas

多行文本省略号

.element {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 截断在第二行
    -webkit-box-orient: vertical; // 方向垂直
    // height: 50px;
}

字体

查看网站引用字体 开发者工具-Application-Frames-Fonts
.woff格式
字体文件
自定义字体
字体图标