深入CSS （上） | 青训营笔记

天琴
44 阅读4分钟

讲师：赵文博

学习资料

课程介绍

在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。

课程重点

  1. CSS 选择器的特异度
  2. CSS 继承
  3. CSS 求值过程解析
  4. CSS 布局方式及相关技术

选择器

image.png

<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>

当子元素没有设置 color 这个元素时,它就会从父级元素往上找,一层一层去继承,就像 em 里面有设置 color:red ,所以展示出来就是红色的,再看这个 strong 元素,里边没有color,就找strong的父级也就是p标签里面的color:blue,那么strong里面的颜色也是blue蓝色.

在CSS中一般和文字相关的属性都可以继承,但是和模型相关的一些属性是不可继承的,比如宽度,在一个容器或者div里设置500像素,然后里面有一个比如p标签,这个p标签不设置宽度的话,是不会从父级里面读取500像素这个值的,它是不可继承的

像这些不可继承的元素,想要它从父级继承,可以使用 inherit 这个关键字,通过那个星号就是动态选择器，就让所有的这个元素，它的 box sizing 默认指定成inherit，就是所有元素都从父级去继承

<style>
*{
	box-sizing : inherit; 
} 
html {
	box-sizing : border-box; 
}	
.some-widget {
	box-sizing : content-box;  
}
</style>

这样的好处就是这是我通过一个容器，我就可以改变这个容器内所有的元素。比如说给 html 标签默认的 box-sizing 设成 border-box，也就是页面上所有元素现在都是按照 border-box 这样的一个规则去计算这个宽度或者指数宽度或者高的一个计算。

但是有一些地方，比如说.som-widget，它就是这个容器内它的一些元素，由于它比如说是引入了第三方的一些样式，或者第三方的一些组件，那它这个时候它期望的是 content-box 这种计算方式，那我就直接

.some-widget {
	box-sizing : content-box;  
}

这样的话就是点 some-widget 这个容器里边所有的元素，它们的属性就是 content-box;

上面这些是显示继承,通过 inherit 关键词实现继承,当元素从父级往上找都没有找到时,元素会调用初始值,就是当一个元素不可继承又没被设置属性时,这这个初始值就会被使用到

  • background-color 这个属性背景颜色，它的初始值就是 transparent 透明的
  • marketing-left，它的初始值就是0。

初始值它对应的也有一个关键字叫initial，我们可以在任何就属性的这个值里边写initial，然后把这个当前这个元素的它的对应的属性值设置成初始值，比如 background-color:initial 相当于 background-color:transfer 一样，这个是就是初始值。

三种布局方式

image.png

模型

image.png

width

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

height

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

内边距

还有一个模型里边的概念,padding内边距,，padding相应的也是有 top、right、bottom、 left 四个方向的，我们可以指定这四个方向的这个类边距。

border

image.png

margin

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

margin:auto

<div>水平居中</div>

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

matgin collapse

<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>

box-sizing:border-box

image.png

<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>
avatar
文章
阅读
粉丝