选择器优先级问题

多条选择器匹配同一语句

判断下列语句哪条规则生效？

通过特异度确定

<artical>
    <h1 class="title">嘻嘻嘻哈哈哈</h1>
   </article>
   
<style>
    .title{
        color:blue;
    }
    article h1{
        color:red;
    }
</style>

覆盖

举例，有两个style分别为.btn和.btn.primary，则多一个.primary的.btn特异度高，可以覆盖单纯.btn中的设置。

因此可以通过定义基础类，再定义额外的class样式去覆盖。

继承 某些属性会自动继承其父元素的计算值，除非显式指定一个值。

<p>This is a <red>test</red>of <strong>inherit</strong> 

<style>
    body{
    font-size:20px;}
    p{
    color:blue;}
    red{
    color:red;}
    }</style>

运行结果如下：

显式继承

*{
    box-sizing:inherit;
    }
 html{
     box-sizing:border-box;
 }
 .some-widget{
     box-sizing:content-box;
  } 

上述代码含义为：

*为通配符，box-sizing为显式继承；html中box-sizing均为border-box，而在some-widget里的box-sizing为特殊设置的content-box.

初始值

CSS中每个属性都有一个初始值，可以使用initial关键字显式重置为初始值

例如：background-color:initial即把背景色设置为初始值transparent透明的

布局

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

浮动

绝对定位

常规流

• 行级
• 块级
• 表格布局
• FlexBox
• Gird布局

盒模型

width

• 指定content box宽度
• 取值为长度、百分数、auto
• auto由浏览器根据其他属性确定
• 百分数相对于容器的content box宽度

height

• 指定content box高度
• 取值为长度、百分数、auto
• auto取值由内容计算而来
• 百分数相对于容器的content box高度
• 容器有指定的高度时，百分数才生效

padding

• 指定元素四个方向的内边距
• 百分数相对于容器宽度

border边框

• 三种属性：
  • border-width
  • border-style
  • border-color
• 四个方向：
  • border-top
  • border-right
  • border-bottom
  • border-left

属性与方向通常结合使用，例如border-left-width

其中可以使用边框制作各类图形。例如边框完全填充然后取消左右下三个边框可以设置三角形

margin

• 指定元素四个方向的外边距
• 取值可以是长度、百分数、auto
• 百分数相对于容器宽度

当margin-left和margin-right均取auto时，会产生居中效果

overflow

可以考虑到内容超出box之后的形式

• visible
• hidden
• scroll