继承

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

        em{
            color: red;
        }
    </style>
</head>
<body>
    <p>This is a <em>test</em> of <strong>inherit</strong></p>
</body>
</html>

初始值

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

布局（Layout）是什么？

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

布局相关技术

常规流：行级，块级，表格布局，FlexBox，Grid布局。浮动绝对定位

width

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

#height -指定content box 高度。 -取值为长度，百分数，auto。 -auto取值由内容计算而来。 -百分数相当于content box 高度。 -容器有指定的高度时，百分数才生效。

padding

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

border

-指定容器边框样式，粗细和颜色。

三种属性

border-width

border-style

border-color

四个方向

border-top

border- right

boder-bottom

border-left

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        
        }

        .one{
            /* margin-bottom: 50px; */
            margin-bottom: 60px;
        }

        .two{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

margin

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

<div class="b"></div>

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

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

overflow

        /* img{
            float: left;
        } */

        div{
            width: 100px;
            height: 100px;
        }

        .one{
            background-color: pink;
            float: left;
        }

        .two{
            background-color: skyblue;
            float: left;
        }
    </style>

块级	行级
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开成多行
适用于所有的盒模型属性	盒模型中的width，height不适用

块级元素	行级元素
生成块级盒子	生成块级盒子，内容分散在多个行盒中
display：block	display：inline

继承，初始值，布局|青训营

继承

初始值