HTML5和CSS3（四）

浮动

浮动的简介
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置于元素的浮动
● none 默认值，元素不浮动
● left 元素向左浮动
● right 元素向右浮动

注意
● 元素设置浮动以后，水平布局的等式便不需要强制成立
● 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

浮动的特点
浮动元素会完全脱离文档流，不再占据文档流中的位置 ，设置浮动以后，元素会向父元素的左侧或右侧移动 ，浮动元素默认不会从父元素中移出

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        float: left;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        float: left;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）

<style>
    .box1 {
        width: 300px;
        height: 300px;
        background-color: orange;
        float: left;
    }

    .box2 {
        width: 400px;
        height: 400px;
        background-color: red;
        float: left;
    }

    .box3 {
        width: 300px;
        height: 300px;
        background-color: yellow;
        float: right;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

简单总结：
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

脱离文档流的特点

块元素：
块元素不在独占一行，脱离文档以后，块元素的宽度和高度都会被内容撑开

<style>
    .box1 {
        background-color: orange;
        /* float: left; */
    }
</style>

<div class="box1">hello</div>

简单布局

目的

1. 熟悉布局（块元素、浮动）
2. 公共css部分复用
3. 复习语义标签

<!-- 页眉 -->
<header></header>
<!-- 主体 -->
<main>
    <!-- 左边栏 -->
    <nav></nav>
    <!-- 中心 -->
    <article>
        <!-- 内容上 -->
        <div class="top"></div>
        <!-- 内容下 -->
        <div class="bottom">
            <!-- 内容左 -->
            <div class="left"></div>
            <!-- 内容中 -->
            <div class="middle"></div>
            <!-- 内容右 -->
            <div class="right"></div>
        </div>
    </article>
    <!-- 右边栏 -->
    <aside></aside>
</main>
<!-- 页脚 -->
<footer></footer>

/* 公共部分 */
header,
main,
footer {
    width: 1000px;
    margin: 10px auto;
}

main nav,
main article,
main aside {
    float: left;
    /* 虽然设置浮动了，但整体大小是被内容撑开的，所以设置一个高度 */
    height: 100%;
}

.bottom .left,
.bottom .middle,
.bottom .right {
    float: left;
    width: 220px;
    height: 100%;
}

/* ==========整体布局-上========== */
header {
    height: 100px;
    background-color: silver;
}

/* ==========整体布局-中========== */
main {
    height: 400px;
    background-color: #bfa;
}


/* ------左边栏------ */
main nav {
    width: 150px;
    background-color: red;
}

/* ------中心------ */
main article {
    width: 680px;
    background-color: green;
    margin: 0 10px;
}

/* ---上--- */
article .top {
    height: 190px;
    background-color: yellow;
    margin-bottom: 10px;
}

/* ---下--- */
article .bottom {
    height: 200px;
    background-color: orange;
}


/* 左 */
.bottom .left {
    background-color: lightblue;
}

/* 中 */
.bottom .middle {
    background-color: gray;
    margin: 0 10px;
}

/* 右 */
.bottom .right {
    background-color: wheat;
}

/* ------右边栏------ */
main aside {
    width: 150px;
    background-color: blue;
}

/* ==========整体布局-下========== */
footer {
    height: 100px;
    background-color: tomato;
}

高度塌陷与BFC

高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
那么怎么处理呢？

BFC

BFC（Block Formatting Context）块级格式化环境
● BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
● 开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点：
● 不会被浮动元素覆盖
● 父子元素外边距不会重叠
● 可以包含浮动的元素

如何开启？
可以通过一些特殊方式来开启元素的BFC：
● 设置为浮动（不推荐）：很明显下方元素被覆盖了，总不能让所有元素都浮动吧
设置为行内块元素（不推荐）：不再独占一行，宽度变了，同时与下方元素产生了一点空隙
设置overflow为非visible值：既没有覆盖元素，也保持了独占一方的特性（保持了宽度），与下方元素也保持了最初的间隙
常用的方式为元素设置overflow:hidden（overflow:auto也是ok的） 开启其BFC， 以使其可以包含浮动元素
overflow:scroll 会有滚动条，可能并不需要的，所以不太推荐

总结
● 可以通过变成浮动元素，来防止自身被浮动元素覆盖（有点“以毒攻毒”那味了）
● 可以设置行内块，来防止自身及其他元素被浮动元素覆盖（如果说浮动是“独善其身”，那行内块就有点“兼济天下”的意思）
● 可以设置overflow属性，包含浮动元素（既“独善其身”，又“兼济天下”，但仍有缺陷）

定位

定位（position）
定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位
可选值 含义
static 不开启定位，元素是静止的，默认值
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

相对定位

偏移量（offset）
当元素开启相对定位以后，可以通过偏移量来设置元素的位置
offset属性 含义
top 定位元素和定位位置的上边距离
bottom 定位元素和定位位置的下边距离
left 定位元素和定位位置的左侧距离
right 定位元素和定位位置的右侧距离

定位元素垂直方向的位置由top和bottom两个属性控制，通常情况下只会使用其中之一
● top值越大，定位元素越靠下
● bottom值越大，定位元素靠上
定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其中之一
● left越大，定位元素越靠右
● right越大，定位元素越靠左

.box2 {
    width: 200px;
    height: 200px;
    background-color: yellow;
    /* 开启相对定位 */
    position: relative;
    top: -200px;
    left: 200px;
}

可以看出，使用了相对定位后，只会移动自身的布局位置，而不会对已存在的其他元素产生任何影响

绝对定位

绝对定位的特点
开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
开启绝对定位后，元素会从文档流中脱离
绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
绝对定位会使元素提升一个层级
绝对定位元素是相对于其包含块进行定位的（与相对定位不同）

包含块（containing block）
正常情况下：
● 包含块就是离当前元素最近的开启了定位的祖先块元素
● 如果所有的祖先元素都没有开启定位，则html（根元素、初始包含块）就是它的包含块

<body>
    <!-- 如果box1开启定位，则box2的包含块是box1，否则就是body -->
    <div class="box1">
        <div class="box2"></div>
    </div>

    <!-- 如果box3开启定位，则em的包含块是box3，否则就是body -->
    <div class="box3">
        <span>
            <em>hello</em>
        </span>
    </div>
</body>

水平居中

<style>
    .box1 {
        width: 500px;
        height: 500px;
        background-color: #bfa;
        position: relative;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 左右外边距设置为auto */
        margin-left: auto;
        margin-right: auto;
        /* 绝对定位 */
        position: absolute;
        left: 0;
        right: 0;
    }
</style>

<div class="box1">
    <div class="box2"></div>
</div>

垂直方向布局

垂直方向布局的等式的也必须要满足
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* 左右外边距设置为auto */
    margin-top: auto;
    margin-bottom: auto;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
}

水平垂直居中

目前，我们可以根据绝对定位进行元素的水平垂直双方向居中，所以这个方法只是其中之一

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    /* 左右外边距设置为auto */
    margin: auto;
    /* 绝对定位 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

小结

● 水平布局等式：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的宽度
● 垂直布局等式：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + top = 其父元素的高度
● 上述等式的过度约束规则与《06-盒模型》中介绍的规则基本一致
● 只是在没有auto时，会自动调整top/bottom/left/right

固定定位

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是，固定定位永远参照于浏览器的视口（viewport，可视窗口）进行定位，不会随网页的滚动条滚动

粘滞定位

粘滞定位的特点
● 粘滞定位和相对定位的特点基本一致（视频中说是和相对定位一致，不过我对比了一下，很多特点是不同的，感觉倒是和固定定位更相似，这里存疑）
● 不同的是粘滞定位可以在元素到达某个位置时将其固定

几种定位的对比

我们通过上面的学习，知道position属性有五个可选值
但static是默认值，即不开启定位，所以我们只需要对比4种定位方式即可
定位方式 是否不设置偏移量，元素不会发生改变 是否脱离文档流 是否改变元素性质 是否提升元素层级 参考系
relative（相对定位） √ × × √ 参照于元素在文档流中的位置
absolute（绝对定位） × √ √ √ 参照于其包含块
fixed（固定定位） × √ √ √ 参照于浏览器的视口
sticky（粘滞定位） × √ √ √ 参照于浏览器的视口

补充

字体相关样式
color ：用来设置字体颜色
font-size：字体大小，em相当于当前元素的一个font-size，rem相当于根元素的一个font-size

行高line height
文字占有的实际高度，可以通过line-height来设置行高，可以直接指定一个大小 px/em，也可以直接为行高设置一个小数（字体大小的倍数），行高经常还用来设置文字的行间距：行间距 = 行高 - 字体大小

水平对齐

text-align 文本的水平对齐
text-align属性值 对齐方式说明
left 左侧对齐
right 右侧对齐
center 居中对齐
justify 两端对齐

垂直对齐

vertical-align 设置元素垂直对齐的方式
vertical-align 属性值 对齐方式说明
baseline 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐

背景
● background-color 设置背景颜色
● background-image 设置背景图片
○ 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满
○ 如果背景图片大小大于元素，则背景图片一部分会无法完全显示
○ 如果背景图片大小等于元素，则背景图片会直接正常显示
● background-repeat 设置背景图片的重复方式
○ repeat 默认值，背景图片沿着x轴和y轴双方向重复
○ repeat-x 背景图片沿着x轴方向重复
○ repeat-y 背景图片沿着y轴方向重复
○ no-repeat 背景图片不重复
● background-position 设置背景图片的位置
○ 通过top left right bottom center几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
○ 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量
● background-clip 设置背景的范围
○ border-box 默认值，背景会出现在边框的下边
○ padding-box 背景不会出现在边框，只出现在内容区和内边距
○ content-box 背景只会出现在内容区
● background-origin 背景图片的偏移量计算的原点
○ border-box 背景图片的变量从边框处开始计算
○ padding-box 默认值，background-position从内边距处开始计算
○ content-box 背景图片的偏移量从内容区处计算
● background-size 设置背景图片的大小
○ 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto
○ cover 图片的比例不变，将元素铺满
○ contain 图片比例不变，将图片在元素中完整显示
● background-attachment 背景图片是否跟随元素移动
○ scroll 默认值，背景图片会跟随元素移动
○ fixed 背景会固定在页面中，不会随元素移动