从左往右 从上到下依次排序 flex css_CSS知识总结

查看浏览器是否支持某个样式

Can I use... Support tables for HTML5, CSS3, etc​caniuse.com

Border调试法用来调试哪个地方的样式出现了错误
使用方法：怀疑那个元素出现了问题就在此元素的附近添加border,观察是否出现了预期的效果，定位出错元素的位置

CSS常见错误

• 选择器拼写错误
• 属性名拼写错误
• 属性值拼写错误
• 大小写错误
• 没写分号
• 中文冒号
• 没写反花括号
• 没加单位

---

查资料的方式

• 搜索 关键词时加 MDN ，比如：float mdn
• 搜索 css tricks
• 搜索css大牛 张鑫旭的博客

练习素材

Freepik | Discover the best free graphic resources about web, 17,705 results​www.freepik.com

免费的UI套件免费psd | 365PSD​cn.365psd.com

重要概念

1. 文档流：就是文档流动的方向

• inline元素从左到右，到达最右边才会换行;宽度为内部inline元素的和，不能用width指定,高度由line-height间接确定，跟height无关
• block元素从上到下，每一个都另起一行;block默认自动计算宽度，可用width指定,高度由内部文档流元素决定，可以设height
• inline-block也是从左到右;inline-block结合前两者特点，可用width,和block一样也可设置高度

2. 脱离文档流： 可以控制元素不在文档流中，不按照文档流的规则进行布局，脱离文档流的方法有：

• • float:left | right;进行左浮动或者右浮动
  • 使用psoition进行定位

3. overflow溢出：当内容的宽度或高度大于容器时，内容会超出容器

• • 利用overflow设置属性值：hidde是超出部分隐藏，auto是灵活设置

4. 盒模型

• • content-box内容盒模型：宽度=内容的宽度，如果后期添加了border或padding就会使盒子向外扩张
  • border-box边框盒模型：设置的宽度就等于=内容宽度+padding+border；添加的padding和border就在原先设置的width里

• margin合并问题：父子盒子和兄弟盒子的margin会出现重叠部分 解决办法：
  • 父子合并用padding/border挡住
  • 父子合并用overflow：hidden挡住
  • 父子合并用display：flex
  • 兄弟合并可以用inline-block消除

布局

布局就是把页面分成区域，按照左中右，或者上中下等

float布局:
就是在子元素上加上 float：left | right;
一定要在父元素上加上clearfix清除浮动

.clearfix::after { 
        content: ''; 
        display: block; 
        clear: both;   
  }

IE6/7存在双倍margin的bug,解决方法就是

• 方法一：把margin减半，margin前面要加_

 _margin:减半； 
 

• 方法二：添加一个display:inline-block;

flex布局
flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间
首先先让一个元素变成flex容器

 .container{        
 display:flex;     
} 

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

A Complete Guide to Flexbox | CSS-Tricks​css-tricks.com

Flexbox Froggy​flexboxfroggy.com

grid布局
这一片使详细的图文教程

A Complete Guide to Grid | CSS-Tricks​css-tricks.com

Grid Garden​cssgridgarden.com

定位position
分层：div是有分层的，文字高于边框高于背景

position就是让元素脱离文档流

---

浏览器的渲染过程

浏览器渲染的过程主要包括以下五步：

• 浏览器将获取的HTML文档解析成DOM树。
• 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。构建css树
• 将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
• 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。（文档流、盒模型、计算大小和位置）
• 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。（把边框颜色、文字颜色、阴影等画出来）

最后进行Compose合成，根据层叠关系展示画面

当元素改变或者样式改变时，页面会进行更新，更新方式也有三种

如果移除某个元素，页面会进行从新布局，他就进行第一种更新方式
如果只改变背景颜色修改文字大小等，会进行第二种更新方式，会不重新布局，跳过了layout,直接进行绘制和合成
如果有元素进行transfrom进行动画改变位置，就会进行第三种更新，直接合成

两种动画的做法 第一种transation
transfrom通过位移变形进行改变元素的位置

• 四个常用功能
  • 位移translate
  • 缩放scale
  • 旋转rotate
  • 倾斜skew

一般都需要配合transition过渡inline元素不支持transform ，需要先变成block
transation是控制动画移动的方式，时间。

案例：鼠标经过让盒子在1s内向右移动100像素

.div{  
 width: 100px;   
height: 100px;   
margin:100px;   
border:1px solid red;   
transition:all 1s; 
} 
.div:hover{     
transform:translateX(100px);
 }

第二种方式是animation
通过@keyframs控制移动的元素位置

 @keyframs 动画名{  
   0%{         
           位置和形状     
    }     
   20%{         
          位置和形状2   
    }    
    ...... 
} 

通过animation来调用动画

 animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名; 

css的知识还有很多，不会时可以查阅mdn文档
下图是我学习css的思维导图