深入CSS| 豆包MarsCode AI刷题

哪条规则生效?

怎么样去在多个选择器都匹配到一个元素的时候去决定这个元素，最终采用哪个选择器里边的这个样式，根据特异度，来决定，所谓的特异度是选择器它的特殊的程度，越特殊的选择器，它的优先级会越高

选择器的特异度(Specificity)

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

继承

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

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

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

显式继承

初始值

CSS 中，每个属性都有一个初始值

"background-color的初始值为 transparent

"margin-left 的初始值为 0

可以使用 initial 关键字显式重置为初始值

"background-color: initial

CSS求值过程

布局是什么

布局相关技术

width

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

height

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

padding

border

若四边框颜色不同

margin

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

使用 margin:auto 水平居中

#html
<div></div>

<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

#css
html {
  background: #333;
}

margin collapse

#html
<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

#css
html {
  background: #111;
    }

.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #111;
}

#js
const div = document.createElement('div');
div.className = 'mask';
div.addEventListener('click', e => {
  document.body.removeChild(div);
});
document.body.appendChild(div);

box-sizing:border-box

#html
<p class="a">
  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

#css
html {
  background: #111;
  color: #eee;
}

overflow

块级元素与行级元素

dispalays属性

常规流Normal Flow

行级排版上下文

#html
<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/13cbe2dccb4042feb16361840a8ddeab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgS0tLS0tLS29vbA==:q75.awebp?rk3s=f64ab15b&x-expires=1771489899&x-signature=r5keI5rxYu5lRc53v35xBniRwiI%3D" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

#css
html {
background: #111;
color: #fff;
}

div {
font-size: 20px;
}

块级排版上下文

BFC内排版规则

#html
<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>    
#css
 body {
  background: #111;
}   

Flex box

#html
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>    
#css
html {
  background: #111;
}

flex direction

Flexibility

Flex-grow Flex-shrink flex

grid布局

display:grid

划分网络

grid line网格线

grid area网格区域

float浮动

position属性