CSS基础

1.文档流

1.1 流动方向-display

• inline元素从左往右，到达最右边才换行，比如<span>标签。
• block元素从上到下，每一个都会另起一行，比如<div>标签。
• inline-block也是从左到右，但是与inline不同之处是元素不会被断开。

比如：inline与inline-block的区别：

1.2 宽度

• inline的宽度，默认为内部inline元素的和，不能用width指定。需要注意：不要在inline元素中，增加block元素。
• block默认自动计算宽度，可用width指定。需要注意：1.block的默认宽度为auto而不是100%。2.尽量不要使用width:100%。

举例说明二者区别：

<div style="border: 1px solid red;width: 100%">这是宽度100%</div>
<div style="border: 1px solid red">这是div默认</div>

可以看到，二者宽度并不相同，auto会减去边框的2px。

• inline-block结合前两者特点，不设置宽度情况下为内部元素的宽度，但是可用width设置。

1.3 高度

• 1.3.1 inline高度由line-height间接决定，跟height无关。

举例说明：

<span style="height: 100px">
    inline元素的高度由行高间接确定
</span>
<div style="border: 1px solid green">
<span style="line-height: 100px">
    inline元素的高度由行高间接确定
</span>
</div>

显示效果： 可以看出：
$$ 1.inline元素的高度无法用height设定。2.div包住的宽度是span的行高。

• 1.3.2 block高度由内部文档流元素决定，可以设置height。

例如： 正常情况下：

<div style="border: 1px solid green">
    block元素的行高由其内部的文档流元素决定
    <div style="border: 1px solid red;height: 50px">
        block元素的行高由其内部的文档流元素决定
    </div>
</div>

但是如果让其内部元素脱离文档流：

<div style="border: 1px solid green">
    block元素的行高由其内部的文档流元素决定
    <div style="position: absolute;background: red">
        block元素的行高由其内部的文档流元素决定
    </div>
</div>

可以看到，内部的div没有被外部div包住。

• 1.3.3 inline-block跟block类似，可以设置height。

2.overflow溢出

$$ 当内容的宽度或高度大于容器时，会溢出。例如这种情况：

可以通过css中的overflow：设定，常用可选项：

• visible-默认选项，超出不处理。
• hidden-超出部分隐藏。
• scroll-无论超出不超出，都滚动展示。
像这样：



• auto-超出的时候才滚动，不超出则原样展示。
• overflow还分为overflow-x与overflow-y

3.脱离文档流

$$ 如何让元素脱离文档流：

• float:left/right
• position:absolute/fixed

4.盒模型

盒模型有两种：

• content-box 内容盒：内容就是盒子的边界。
• border-box 边框盒：边框才是盒子的边界。

举例说明：

<div class="content-box">内容盒</div>
<div class="border-box">边框盒</div>

.content-box{
    margin: 15px;
    border: 5px solid red;
    padding: 10px;
    box-sizing: content-box;
    width: 100px;
    height: 100px;
}

.border-box{
    margin: 15px;
    border: 5px solid red;
    padding: 10px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
}

上面的盒子最终是130×130的，下面的盒子是100×100的。所以最终可以得出结论：

• content-box width=内容宽度
• border-box width=内容宽度+padding+border

4.1 margin合并

何谓margin合并，还是以上面两个div为例，举例说明：

.content-box{
    margin-bottom: 30px;/*设置底部外边距为30px*/
    border: 5px solid red;
    padding: 10px;
    box-sizing: content-box;
    width: 100px;
}

.border-box{
    margin-top: 30px;/*设置顶部外边距为30px*/
    border: 5px solid red;
    padding: 10px;
    box-sizing: border-box;
    width: 100px;
}

按道理，两个div之间的空隙应该为60px，但是实际上：

哪些情况下会合并：

• 父子margin合并(父亲和第一个以及最后一个儿子会合并)
• 兄弟margin合并

如何阻止合并：

• 父子合并用padding/border挡住
• 父子合并用overflow:hidden挡住
• 父子合并用display:flex
• 兄弟合并可用display:inline-block消除

5.基本单位

长度单位

• 1.px-像素
• 2.em-相当于自身font-size的倍数，但是注意em会继承父亲字体的大小。
• 3.rem-与em类似，但是不会继承。
• 4.百分数
• 5.整数

颜色单位

• 1.十六进制：#FF6600(淘宝色)，对于这种两两相同的十六进制颜色，可以缩写为#F60。
• 2.RGB颜色：rgb(0,0,0)或者rgba(0,0,0,1)-最后一位设置透明色,1表示完全不透明，0表示完全透明。
• 3.hsl颜色：hsl(360,100%,100%)或者hsla与rgb相同，最后一位表示透明度。

6.实现用CSS画一个彩虹

代码：

<div class="rainbow">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

* {
    box-sizing: border-box;
}

.rainbow {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

.rainbow > div {
    width: 200px;
    height: 200px;
    border: 1px solid hsl(0, 80%, 50%);
    background: hsl(0, 80%, 50%);
    border-radius: 50%;
}

.rainbow > div > div {
    margin: 10px;
    height: 180px;
    border: 1px solid hsl(30, 80%, 50%);
    background: hsl(30, 80%, 50%);
    border-radius: 50%;
}

.rainbow > div > div > div {
    margin: 10px;
    height: 160px;
    border: 1px solid hsl(60, 80%, 50%);
    background: hsl(60, 80%, 50%);
    border-radius: 50%;
}

.rainbow > div > div > div > div {
    margin: 10px;
    height: 140px;
    border: 1px solid hsl(100, 80%, 50%);
    background: hsl(100, 80%, 50%);
    border-radius: 50%;
}

.rainbow > div > div > div > div > div {
    margin: 10px;
    height: 120px;
    border: 1px solid hsl(150, 80%, 50%);
    background: hsl(150, 80%, 50%);
    border-radius: 50%;
}

.rainbow > div > div > div > div > div > div {
    margin: 10px;
    height: 100px;
    border: 1px solid hsl(210, 80%, 50%);
    background: hsl(210, 80%, 50%);
    border-radius: 50%;
}

.rainbow > div > div > div > div > div > div > div {
    margin: 10px;
    height: 80px;
    border: 1px solid hsl(270, 80%, 50%);
    background: hsl(270, 80%, 50%);
    border-radius: 50%;
}