2020-11-10

最新推荐文章于 2022-12-04 16:30:05 发布

Amaya_Angel

最新推荐文章于 2022-12-04 16:30:05 发布

阅读量205

点赞数

分类专栏：浮动文章标签： css

本文链接：https://blog.csdn.net/Amaya_Angel/article/details/109605630

版权

浮动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

标准文档流+浮动

定义

内容从左到右，从上到下书写的。前面的内容大小或者位置发生变化时，后面的内容位置也会随之变化。

web页面，就是一个标准的文档流。内容跟咱们的书写顺序有关。

标准文档流的特性

（1）空白折叠现象

无论多少个空格，tab，换行都会折叠为一个空格。

&nbsp;(空格）
br（可插入一个简单的换行符。）
hr(标签在 HTML 页面中创建一条水平线。)

(2)高矮不同，底部对齐

(四线三格）四线：顶线，准线，中线，底线

(3)一行写满，自动换行

行内元素和块级元素

标准文档流将HTML元素分为两种

行内块元素

块级元素

行内元素

区别

行内元素

1.并排。
2.宽、高设置是无效的。宽度是随内容自适应

块级元素

1.独占一行

2.宽、高可以设置。如果不设置宽，宽将默认为父标签的100%，不设置高度，高度自适应

HTML标签分为两大类：容器级标签、文本级标签

容器级标签：能嵌套几乎所有的其他标签

文本级标签：只能嵌套文本、图片、超链接、表单元素。

常用的文本级标签：span，p，a，b

常用的容器级标签：div，h1-h6、li、dd dt td.

几乎所有的容器级标签都对应块级元素。

几乎所有的文本标签都对应行内元素。p标签除外，它是文本级标签，都属于块级元素。

行内元素和块级元素的转换

块级元素转行内元素

css
display: inline;

一旦，转为行内元素：宽、高就会失效，可以与其他行内元素并排。

行内元素转块级元素

css
display: block;

一旦，转为块内元素：宽、高可以设置

转行内块元素

css
display: inline-block;

布局

css中提供三种方法，可以脱离文档流。

1.浮动
2.绝对定位
3.固定定位

浮动

浮动是css里布局使用最多的属性。

浮动之后，元素会脱离文档流，紧贴上一个浮动盒子的边。

1.浮动的元素脱标

一旦我们设置了浮动，那么该元素就能够并排展示，而且可以设置宽和高。

float: right;(右浮动）
float: left;（左浮动）

2.浮动元素互相贴靠

浮动元素会紧贴上一个浮动元素。若宽度不够，会换行。顶部顶帖上一个浮动元素的底部。

3.浮动元素的“字围”效果（Word字体环绕图片）

div可以挡住p标签，但不会挡住p中的文字。字围效果。

4.收缩

当一个元素设置为浮动，且没有设置宽度的时候，它的宽度会自动收缩为内容的宽度。

5.父类塌陷

子元素都设置了浮动，父元素没有设置高度。那么父元素的高度会变成0

在标准文档流，父元素默认子元素撑开。但浮动时元素浮动会导致父元素无高度

1.设置父元素高度

2.清除浮动

clear: both;

3.隔墙法

两个浮动元素加div 在div使用清除浮动

clear: both;

4.内墙法直接在父元素加一个有高度子元素

5.overflow：hidden

 .clear:before {
      content: "";
      display: block;
      clear: both;
    }

作业

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="./小米手机.css">
</head>

<body>
    <div class="adv">顶部广告</div>
    <div class="site-1">
        <div class="site">
            <a href="https://www.mi.com/index.html" target="blank" class="w1">小米商城</a>
            <span class="sep">|</span>
            <a href="https://www.miui.com/" target="blank">MIUI</a>
            <span class="sep">|</span>
            <a href="https://iot.mi.com/" target="blank">IoT</a>
            <span class="sep">|</span>
            <a href="https://i.mi.com/" target="blank">云服务</a>
            <span class="sep">|</span>
            <a href="https://airstar.com/home" target="blank">天星数科</a>
            <span class="sep">|</span>
            <a href="https://youpin.mi.com/" target="blank">有品</a>
            <span class="sep">|</span>
            <a href="https://xiaoai.mi.com/" target="blank">小爱开放平台</a>
            <span class="sep">|</span>
            <a href="https://qiye.mi.com/" target="blank">企业团购</a>
            <span class="sep">|</span>
            <a href="https://www.mi.com/aptitude/list/?id=41" target="blank">资质证照</a>
            <span class="sep">|</span>
            <a href="" target="blank">协议规则</a>
            <span class="sep">|</span>
            <a href="https://www.mi.com/aptitude/list/" target="blank">下载app</a>
            <span class="sep">|</span>
            <a href="https://xiaomishare.mi.com/?from=micom" target="blank">智能生活 </a>
            <span class="sep">|</span>
            <a href="javascript:;" target="blank">Select Location</a>
            <div class="into">
                <a href="javascript:void(0);" class="link">登录</a>
                <a href="javascript:void(0);" class="link">注册</a>
                <a href="javascript:void(0);" class="link w2">消息通知</a>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/index.html" class="logo-1">
                    <em>小米官网</em>
                    <img src="./图片/mi-logo.png" alt="">
                </a>
            </div>
            <ul class="q2">
                <div class="logo-2">
                    <a href=""><img src="./图片/zn.gif" alt=""></a>
                </div>
                <li class="nav-item a1"><a href="">小米手机</a></li>
                <li class="nav-item a2"><a href="">Redmi红米</a></li>
                <li class="nav-item a3"><a href="">笔记本</a></li>
                <li class="nav-item a4"><a href="">家电</a></li>
                <li class="nav-item a5"><a href="">路由器</a></li>
                <li class="nav-item a6"><a href="">智能硬件</a></li>
                <li class="nav-item a7"><a href="">服务</a></li>
                <li class="nav-item a8"><a href="">社区</a>
                </li><input type="submit" class="search" VALUE>
                <input type="search" placeholder="Redmi 10x 5G" class="SOU">


            </ul>
        </div>
    </div>

</body>

</html>

css

@charset "utf-8";
html {
    width: 100%;
    height: auto;
    font-size: 16px;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p,
img,
span {
    margin: 0;
    padding: 0;
}

a {
    text-decoration-line: none;
}

.adv {
    width: 100%;
    height: 120px;
    background-color: red;
}

.site {
    height: 40px;
    background-color: black;
    color: #b0b0b0;
    font-size: 12px;
}

.site a {
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
    text-align: center;
}

.w1 {
    margin-left: 60px;
}

.w2 {
    margin-right: 100px;
}

span .sep {
    margin: 0 0.3em;
    color: #424242;
    font-family: sans-serif;
}

.site a:hover {
    color: blue;
}

.into {
    float: right;
    height: 40px;
    line-height: 40px;
}

.container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 22px;
    /* background-color: skyblue; */
}

li {
    list-style-type: none;
}

.logo {
    /* display: inline; */
    float: left;
    width: 62px;
    margin-top: 22px;
    background-color: #ff6700;
}

.q2 {
    width: 1100PX;
    height: 88px;
    margin-top: 22px;
    padding: 12PX 0 0 30px;
}

.logo-2 {
    width: 127PX;
    float: left;
    padding-right: 15px;
}

.nav-item {
    float: left;
    padding: 26px 10px 38px;
}

.q2 a {
    color: black;
    text-decoration-line: none;
}

.q2 a:hover {
    color: #ff6700;
}

input {
    float: right;
    width: 223px;
    height: 48px;
    padding: 0 10px;
    line-height: 48px;
    border: 1px solid #e0e0e0;
    outline: 0;
    margin-top: 22px;
}

.search {
    width: 52px;
    height: 48px;
    font-size: 16px;
    background: #fff;
    color: #616161;
    float: right;
}

.logo-1>em {
    display: none;
}