CSS核心技术详解-核心概念

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(记录中...)