理解CSS【下】 | 青训营笔记

王水
77 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 二 天

2.8 选择器的特异度

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>

2.9 继承

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

image.png

2.10 初始值

  • CSS中，每个属性都有一个初始值
    • background-color 的初始值为transparent
    • margin-left 的初始值为0
  • 可以使用initial 关键字显式重置为初始值
    • background-color:initial

2.11 布局

2.11.1 布局是什么？

image.png

2.11.2 布局相关技术

image.png

image.png

2.12 width

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

2.12.2 height

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

image.png

2.12.3 padding

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

2.12.4 border

  • 指定容器边框样式、粗细和颜色

image.png

2.12.5 margin

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

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

2.12.6 box-sizing:border-box

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

image.png

2.12.7 overflow

visible：多出来的文字显示 hidden：多出来的文字隐藏 scroll：可滑动看全部文字

image.png

2.13 块级 vs 行级

Block Level BoxInline Level Box
不和其他盒子并排摆放和其他盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
生成块级盒子生成行级盒子 内容分散在多个行盒中
body,article,div,mainspan,em,strong,cite,code等
section,p,ul,h1-6,li等
dispaly: blockdisplay: inline

2.14 常规流Normal Flow

image.png

2.14.1 行级排版上下文

image.png

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" 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>

image.png

2.14.2 块级排版上下文

image.png

BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠
<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>

image.png

2.15 FlexBox是什么？

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向：上下左右
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行
<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>

image.png

2.15.1 flex-direction

image.png

image.png

2.15.2 justify-content

image.png

2.15.3 align-items

image.png

2.15.4 align-self

image.png

2.15.5 order

image.png

2.15.6 Flexibility

image.png

flex-grow | flex-shrink

image.png

2.16 Grid 布局

image.png

2.16.1 display: grid

  • display:grid 使元素生成一个块级的Grid容器
  • 使用grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

2.16.2 划分网格

image.png

2.16.3 grid area 网格区域

image.png

2.16.4 float 浮动

<section>
  <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
  </p>
</section>

<style>
  img {
    float: left;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

2.17 position 属性

image.png

2.17.1 positon: relative

image.png

2.17.2 positon: absolute

image.png

<nav>
  <a href="#">首页</a>
  <a href="#">导航1</a>
  <a href="#">导航2</a>
</nav>
<main>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</main>
<a href="#" class="go-top">返回顶部</a>

<style>
  nav {
    position: fixed;
    line-height: 3;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }
  
  .go-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    color: #fff;
  }

  nav a {
    padding: 0 1em;
    color: rgba(255, 255, 255, 0.7);
  }

  nav a:hover {
    color: #fff;
  }

  body {
    margin: 0;
    font-size: 14px;
  }

  a {
    color: #fff;
    text-decoration: none;
  }

  section {
    height: 100vh;
    color: #fff;
    text-align: center;
    font-size: 5em;
    line-height: 100vh;
  }

  section:nth-child(1) {
    background: #F44336;
  }

  section:nth-child(2) {
    background: #3F51B5;
  }

  section:nth-child(3) {
    background: #FFC107;
  }

  section:nth-child(4) {
    background: #607D8B;
  }

  section:nth-child(5) {
    background: #4CAF50;
  }
</style>

学习CSS的几点建议

  • 充分利用 MDN 和 W3C CSS 规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习，CSS新特性还在不断出现
avatar
文章
阅读
粉丝