CSS解析规则

• 对空格不敏感，因此每个样式后面都加一个分号，不然会把后面的css当做整体解析，直到遇到分号为止
• 最后一个属性的分号是可以不加的
• 当遇见不认识的属性或属性值的时候，将忽略此属性继续解析后面的属性,浏览器只会解析认识的属性
• 为什么浏览器兼容的时候可以添加前缀?

  -webkit-box-sizing:border-box
  box-sizing:border-boxbox-sizeing
  

  当浏览器认识 -webkit-box-sizing属性时，就会使用此属性，如果两个属性都认识，那么box-sizing属性就会覆盖上面的(层叠掉)

• 复合属性border:1px solid #dedede 如果其中有一个值是错误的，那么整个属性都不会解析
• 最后一对css规则的大括号可以不闭合
• 后代选择器中间必须加空格 div p
• 换行会被当成一个空格

      div.box{width:200px}//解析后div .box{ width:200px}
  

• 关键字不可以用引号 color:"orange"
• 多组选择器中，只要有一个选择器是错误，其他的都不会执行 如:#app 0box
• @import 'style.css'只能写在样式表的前面，写在后面的话会被忽略

替换元素和非替换元素

• 替换元素是指浏览器根据元素的标签和属性来决定元素的具体内容 img:src input:checkbox ...
• 非替换元素是指内容直接显示在浏览器的元素 h1 p span

属性值的计算规则

客户端解析文档并构建文档树之后，会给文档中的每一个元素的属性分配一个属性值，这个属性值最终可能进过指定值、计算值、使用值、实际值这四个步骤

1. 继承:存在继承的时候，子元素继承的是父元素的计算值

   • 某些属性会继承父元素的值 如color

   div{font-size:10px
   }
   .child{font-size:120%  //实际计算后是 10px*120%
   }
   

2. 可继承或不可继承都可以通过inherit属性来继承父元素的某个属性继承的值是父元素的计算值

   div{width:100px;height:200px;border:1px solid #dedede;
   }
   .child{width:50px;height:inherit;border:inherit
   }
   

可视化格式模型

我们熟知的盒子模型是由自身元素产生的，主要是对width、height、padding、border、margin的解释，而可视化格式模型规则是将这些盒子按照一定的规则拜访到页面上也就是规定每个盒子应该怎么去布局，所以可视化格子模型与一个元素的布局息息相关

• 文档树：html中每个元素都是由子元素，祖先元素，兄弟元素等组成，这种结构非常像树装
• 视口viewport: 也叫作可视窗口，根据屏幕百分比布局，可视区域改变，布局也会改变。每个页面只可能有一个可是窗口，并提供滚动条机制，但是iframe可以嵌入多个页面

包含块(重点强调:这只是一个概念)

元素的位置和尺寸都相对于一个父元素(矩形),那么这个矩形就是一个包含块。每个元素都会产生一个包含块，但是这个包含块是虚无的，只是个概念

• 如div>p>span，div生成一个包含块来包含p和span,p也会有一个包含块来包含span,主要作用是给他里面的元素做一个位置上的参照(应该从哪里开始摆放)
• 包含块不会限制里面元素的大小，若里面的元素超出，则超出的部分溢出,使用overflow:hidden

包含块创建

1. 根元素的包含块叫做初始包含块,具体有客户端创建
2. 定位值为fixed时，包含块有视口创建
3. 定位值为relative,static或者没有设置定位属性，包含块由最近的父元素或组件元素创建
4. 定位值为absolute 则包含块有最近的定位值relative,absolute,fixed创建，如果没有定位的祖先元素，则包含块是初始包含块 5.祖先元素是行内元素时，包含块取决于父元素或祖元素的direction属性

控制框(记录中...)

格式化上下文BFC/IFC(记录中...)