深入理解CSS

用户4570268300413
122 阅读4分钟

深入理解CSS

1. CSS 选择器的特异性

2. CSS继承

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

显示继承

* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}
.some-widget {
    box-sizing: content-box;
}
复制代码

初始值

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

    • background-color 的初始值为 transparent
    • margin-left 的初始值为0

  • 可以使用initial 关

  • 键字显式重置为初始值

    • background-color:initial

3.CSS求值过程

  • ulting ->(指定值) resolving （计算值）-> formatting（使用值） -> constraing

4.CSS布局

  • 什么是布局（Layout）

    • 确定内容的大小和位置的算法
    • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流

  • 行级 块级 表格布局 FlexBox Gird布局
盒模型

  • width

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

  • height

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

  • padding

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

  • border

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

  • margin

    • 指定元素四个方向的外边距
    • 取值可以是长度、百分数、auto
    • 百分数相对于容器宽度
    • 使用 margin : auto 水平居中

  • box-sizing:border-box

  • overflow:visible hidden scroll

  • 块级

    • 不和其它盒子并列摆放
    • 使用所有的盒模型属性

  • 行级

    • 和其它行级盒子一起放在一行或拆分成多行
    • 盒模型中的width、height不适用

  • 块级元素

    • 生成块级盒子
    • body、article、div、main、section、h1-6、p、ul、li等
    • display:block

  • 行级元素

    • 生成行级盒子
    • 内容分散在多个行盒（line box）中 span、em、strong、cite、code等
    • display:inline

  • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为整体不会被拆散成多行

行级排版上下文

  • Inline Formatting Context(IFC)

  • 只包含行级盒子大的容器会创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素
<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>
复制代码
块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素

    • 浮动、绝对定位、inline-block

    • Flex子项和Grid子项

    • overflow 值不是visible 的块盒

    • display：flow-root

    • 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>
复制代码
Flex Box 是什么

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

    • 摆放流向 （-> <- 上下）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行
<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>
复制代码
Flexibility
  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；当容器不够时，会收缩。
  • flex-basis 没有伸展或收缩时的基础长度
  • flex-grow 有剩余空间时的伸展能力:
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>
复制代码
  • flex-shrink 容器空间不足时收缩的能力
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>
复制代码
Grid 布局
  • display : gird 使元素生成一个块级的Grid容积
  • 使用grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列
  • 划分网格：

浮动

  • 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>
复制代码

绝对定位

  • position属性

    • static 默认值，非定位元素
    • relative 相对自身原本位置偏移，不脱离文档流
    • absolute 绝对定位，相对非static祖先元素定位
    • fixed 相对于视口绝对定位

  • position:relative

    • 在常规流里面布局
    • 相对于自己本应该的位置进行偏移
    • 使用top、left、bottom、right设置偏移长度
    • 流内其它元素当它没有偏移一样布局

  • position : absolute

    • 脱离常规流
    • 相对于最近的非static祖先定位
    • 不会对流内元素布局造成影响
<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>
复制代码

<h1>页面标题</h1>
<div class="container">
  <div class="box"></div>
  <p>段落内容段落内容 1</p>
  <p>段落内容段落内容 2</p>
  <p>段落内容段落内容 3</p>
  <p>段落内容段落内容 4</p>
</div>
​
<style>
  .container {
    background: lightblue;
  }
​
  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
avatar
文章
阅读
粉丝