CH04-CSS盒子浮动

本章目标

  • CSS盒子浮动（重点）
  • 清除CSS盒子浮动（重点、难点）
  • 掌握常用DIV+CSS网页布局（重点、难点）
  • 使用H5结构标签网站布局
  • 盒子溢出显示方式（重点）

一、CSS盒子浮动

1.1CSS盒子浮动属性

float：设置盒子浮动方式
none：不浮动（默认）
left：左浮动
right：右浮动
只要盒子添加浮动属性，盒子可以设置宽高并且不独占一行（inline-block），盒子元素脱离文档流，当父级元素中所有子元素使用浮动，会导致父元素塌方，父级元素识别不了子元素的存在。

1.2什么是浮动？

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

1.3浮动的特点

  • 浮动元素会脱离标准流（脱标：浮动的盒子不再保留原先的位置）
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素会具有行内块元素的特性（不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性）
  • 一个元素浮动，理论其他兄弟元素也得浮动

1.4代码演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <!-- css样式代码 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            background-color: pink;
        }
        .box div:first-child{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
           
        }
        .box div:nth-child(2){
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .box div:nth-child(3){
            width: 200px;
            height: 200px;
            background-color: orange;
            float: right;
        }
    </style>
<!-- html代码 -->
<body>
    <div class="box">
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
</body>

1.5浮动实现黑白棋盘效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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>浮动制作黑白棋盘格</title>
    <style>
        .chessboard {
            width: 300px;
            height: 300px;
            border: 3px solid fuchsia;
        }
        
        .one {
            float: right;
            width: 100px;
            height: 100px;
            background-color: black;
        }
        
        .two {
            float: right;
            width: 100px;
            height: 100px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="chessboard">
        <div class="one"></div>
        <div class="two"></div>
        <div class="one"></div>
        <div class="two"></div>
        <div class="one"></div>
        <div class="two"></div>
        <div class="one"></div>
        <div class="two"></div>
        <div class="one"></div>
    </div>

</body>

</html>

二、清除盒子浮动

2.1清除盒子浮动属性

clear：清除浮动
left：清除左浮动
right：清除右浮动
both：清除左右浮动（常用）

2.2为什么要清除浮动？

在我们写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示。但使用float浮动元素后，会有一些不好的影响：

  • 由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置
  • 如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

这个时候就需要清除浮动了，下面介绍一些css清除浮动的方法。

1、给父级元素添加宽高（工作中不常用）

通过给浮动子元素的父级元素添加宽高，清除浮动给父盒子造成盒子塌陷

1
2
3
4
5
6
7
<style>
    .chessboard {
        width: 300px;
        height: 300px;
        border: 3px solid fuchsia;
    }
</style>
2、使用clear:both清除浮动（工作中不常用）

在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="chessboard">
    <div class="one"></div>
    <div class="two"></div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="one"></div>
    <!-- 在父级元素最后一个子元素增加一个空的div 用css属性 clear:both; -->
    <div style="clear: both;"></div>
</div>
3、利用伪元素clearfix来清除浮动（推荐使用）

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

1
2
3
4
5
6
7
<style>
    .clearfix::after {
        content: '';
        display: block;
        clear: both;
    }
</style>
4、使用CSS的overflow属性

当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

1
2
3
4
5
6
<style>
    .chessboard {
        overflow: hidden;
        border: 3px solid fuchsia;
    }
</style>

三、掌握常用DIV+CSS网页布局

3.1网页中1-3-1网页布局

3.2网页中1-2-1网页布局

四、使用H5结构标签网站布局

4.1为什么要使用语义化标签布局？

​ h5 语义化标签的推出很好的解决了满屏的 div 布局，语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义，使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让和搜索引擎都容易理解。一张图就可以清晰的展示语义化标签的作用，确实挺好，感觉像搭积木一样，一块一块的把整体搭建出来。

4.2常用的h5语义化布局标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- 常用h5语义化布局标签 -->
<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> 

<!-- 常用h5语义化标签 -->
<title>           <!--：页面主体内容。-->
<hn>             <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>              <!--：无序列表。-->
<li>               <!--：有序列表。-->
<small>         <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>            <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>         <!--：使用黄色突出显示部分文本。-->
<figure>        <!--：规定独立的流内容（图像、图表、代码等等）（默认有40px左右margin）。-->
<cite>           <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>                <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>           <!--：datetime属性遵循特定格式，文本必须是合法的时间格式。-->
<abbr>          <!--：简称或缩写。-->
<dfn>             <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>     <!--：作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>             <!--：移除的内容。-->
<ins>             <!--：添加的内容。-->
<code>         <!--：标记代码。-->
<meter>        <!--：定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

4.3总结语义化优点：

  1. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
  2. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  3. 方便其他设备解析，如盲人阅读器根据语义渲染网页
  4. 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

五、盒子溢出显示方式

5.1设置盒子内容溢出修剪属性

  • overflow：设置盒子内容溢出显示方式
    • visible：默认值。内容不会被修剪，会呈现在盒子之外
    • hidden：内容会被修剪，并且其余内容是不可见的
    • scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
    • auto：如果内容溢出会被修剪，浏览器会显示滚动条以便查看其余的内容
    • overflow-x：内容溢出盒子水平方向修剪
    • overflow-y：内容溢出盒子垂直方向修剪
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<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>盒子溢出修剪</title>
    <style>
        .dv {
            width: 200px;
            height: 200px;
            overflow: hidden;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="dv">
        111111111111111122222222222222222<br>
    </div>
</body>

课后作业

练习1：广创科技教育网站导航

练习2：广创科技教育视频宣传片列表

练习3：广创科技教育宣传片播放页

练习4：当当网最新上架图书

练习5：摄影社区热门小镇

练习6：相册服务

练习7：新品游戏页面