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