2 - CSS的继承和布局（上）｜ 青训营笔记

LianQi
115 阅读4分钟

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

继承

可继承属性

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

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

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>
  • <p>的color属性值为blue
  • <em>的color属性值为red
  • <strong>未设置color属性，则继承其父标签<p>的color属性blue
  • 一般来讲，和文字相关的属性可自动继承，和模型相关的不会继承

显式继承（inherit）

* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

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

inherit：显式的继承该属性（从父级）

box-sizing属性是不可继承属性，通过指定inherit属性值，强制要求其继承父级的该属性

初始值

  • 当一个元素的属性是不可继承属性/可继承属性但无可继承属性值时，其会使用初始值
  • CSS 中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显式重置为初始值
    • backgroung-color: initial;

布局（Layout）

什么是布局

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

布局相关技术

  • 常规流（Normal Flow / Flow Layout）
    • 行级（块级）
    • 块级
    • 表格布局
    • Flexbox
    • Grid 布局
  • 浮动（Float）
  • 绝对定位（Position）

Box Model - 盒模型

image-20230120153651494

content - 内容框

  • width - 宽度
    • 指定content box宽度
    • 取值为长度、百分数、auto
    • auto由浏览器根据其他属性确定
    • 百分数相对于容器的content box宽度
  • height - 高度
    • 指定content box高度
    • 取值为长度、百分数、auto
    • auto由浏览器根据内容计算得来
    • 百分数相对于容器的content box高度
    • 容器有指定的高度是，百分数才会生效

padding - 内边距

  • padding具有以下四个属性：padding-top、padding-right、padding-botton、padding-left，分别用来指定元素内边距的四个宽度，接受值：<length>、<perent>
  • 百分数相当于容器宽度

image-20230120155054412

  1. 分开设置
```css

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
```

2. 集中设置

```css
div {
    /*top right bottom left*/
    padding: 25px 50px 75px 100px;
    /*top left&right bottom*/
    padding: 25px 50px 75px;
    /*top&bottom right&left*/
    padding: 25px 50px;
    /*all four padding*/
    padding: 25px;
}
```

border - 边框

  • 三种属性

    • 样式（border-style）

      属性值定义
      none无边框
      solid实现边框
      dashed虚线边框
      double两个相同边框
      groove沟槽边框
      ridge脊边框
      inset嵌入边框
      outset突出边框

    • 粗细（border-width）

    • 颜色（border-color）

  • 四个方向

    • 顶（border-top）
    • 右（border-right）
    • 底（border-bottom）
    • 左（border-left）
    {
    border: 1px solid #ccc;
    
    border-left: 1px solid #ccc;
    border-right: 2px dotted red;
    
    border-width: 1px 2px 3px 4px;
    border-style: solid;
    border-color: red green blue;
    
    border-left-width: 1px;
    border-bottom-color: rgb(112, 113, 145);
}

margin - 外边距

  • 指定元素四个方向的外边距（margin-top、margin-right、margin-buttom、margin-left）

  • 取值范围：<length>、<percent>、auto、inherit

    {
    margin: 1px 2px 3px 4px;
    margin-left: 1px;
}

  • 使用margin: auto水平居中

    <div></div>

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

    当左右两端均使用auto的时候，浏览器会自动均分两边的值，实现水平居中

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

    这时，容器a和容器b的垂直方向间距为100px，而不是200px，margin属性会自动合并两个容器的间距

    当两个margin不同值的时候，会取max

box-sizing - 容器尺寸计算方式

  • box-sizing属性用以定义容器的尺寸计算方式，即是否包含padding和border

    属性值说明
    content-boxwidth和height的计算边界为content，padding和border在此尺寸以外附加
    border-boxwidth和height的计算边界为border，padding和border在此尺寸以内

    即：假设width: 100px、border: 10px、padding: 10px

    属性值计算式
    content-box140px = 100px(content/width) + 2 * 10px(padding) + 2 * 10px(border)
    border-box100px = width = 60px(content) + 2 * 10px(padding) + 2 * 10px(border)

  • 一般推荐使用通配选择器，定义box-sizing: border-box

    * {
    boxsizing: border-box;
}

overflow - 内容溢出控制

  • overflow属性用以控制内容溢出元素框时的操作

    属性值定义
    visable默认值，内容不会被修剪，会呈现在元素框外
    hidden内容会被修剪，并且其余内容是不可见的。
    scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    {
    overflow: auto;
}
avatar
文章
阅读
粉丝