h5学习（css第四天）：浮动

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

LY__weI

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

阅读量308

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/LY__weI/article/details/109606640

版权

今日所学：标准文档流+浮动。
定义：内容从左到右，从上到下书写的。
前面的内容大小或者位置发生变化时，后面的内容位置也会随之变化。
web页面，就是一个标准的文档流。内容跟咱们的书写顺序有关。

标准文档流的特性

（1）空白折叠现象
无论多少个空格，tab，换行都会折叠为一个空格。

<div>张老师                    真帅</div>

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

妖怪我要你助我修行<img src="img/zhaoshifu.jpg" alt="">

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

行内元素和块级元素

标准文档流将咱们的HTML元素分为了两种：

行内元素
块级元素

区别：

行内元素：

可以与其他行内元素并排。
宽、高设置是无效的。宽度是随内容自适应。

块级元素：

独占一行，不能与其他任何元素并排。
宽、高可以设置。如果不设置宽，宽将默认为父标签的100%，不设置高度，高度自适应。

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

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

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

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

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

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

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

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

块级元素转行内元素

display: inline;

一旦，转为行内元素：

宽、高就会失效
可以与其他行内元素并排。

行内元素转块级元素

display: block;

转行内块元素

display: inline-block;

标准文档流限制比较多，导致页面中很多布局无法实现。如果我们想要并排，又要设置宽高，就要脱离文档流。
css中提供三种方法，可以脱离文档流。

浮动
绝对定位
固定定位

浮动

浮动是css里布局使用最多的属性。
浮动之后，元素会脱离文档流，紧贴上一个浮动盒子的边。

性质1：浮动的元素脱标

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

/* float:right*/
float: left;

性质2：浮动元素互相贴靠

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

浮动方向是要一直。

性质3：浮动元素的“字围”效果

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

性质4：收缩

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

父类塌陷

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

小米导航栏

    <div class="nav">
        <ul class="nav-list">
            <li class="nav-item">小米手机</li>
            <li class="nav-item">redmi红米</li>
            <li class="nav-item">电视</li>
            <li class="nav-item">笔记本</li>
            <li class="nav-item">家电</li>
            <li class="nav-item">路由器</li>
            <li class="nav-item">智能硬件 </li>
            <li class="nav-item">服务</li>
            <li class="nav-item">社区</li>
        </ul>
    </div>
</div>

* { margin: 0; padding: 0; }

.header-nav {
width: 1226px;
height: 100px;
margin: 0 auto;
/* background-color: red;
border: 1px solid red; */
}

.logo,
.nav {
float: left;
}

.logo {
margin-right: 15px;
}

.nav-list {
list-style-type: none;
}

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

.nav-item:hover {
color: sandybrown;
cursor: pointer;
}
在这里插入图片描述

作业：小米官网的顶部导航

<!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="topbar">
        <div class="container">
            <div class="topbar-nav">
                <a href="https://www.mi.com/index.html">小米商城</a>
                <span class="sep">|</span>
                <a href="https://home.miui.com" target="_blank">MIUI</a>
                <span class="sep">|</span>
                <a href="https://iot.mi.com/new/index.html" target="_blank">loT</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://www.xiaomiyoupin.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="https://www.mi.com/aptitude/list" target="_blank">协议规则</a>
                <span class="sep">|</span>
                <a href="https://www.mi.com/appdownload" 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:;">Select Location</a>
            </div>
            <div class="topbar-cart">
                <a class="cart-mini" href="https://www.mi.com/buy/cart">购物车
                <span>(0)</span></a>
            </div>
            <div class="topbar-info">
                <a class="link" href="javascript:void(0);">登陆</a>
                <span class="sep">|</span>
                <a class="link" href="javascript:void(0);">注册</a>
                <span class="sep">|</span>
                <a class="link" href="javascript:void(0);">消息通知</a>
                <span>| </span>
            </div>
        </div>
    </div>
</body>

</html>

@charset "utf-8";
body {
    font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}

.topbar {
    width: 100%;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background-color: #333;
    position: relative;
    display: block;
}

.container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}

.topbar,
.topbar-nav {
    float: left;
    height: 40px;
    line-height: 40px;
}

a {
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
}

.crat-mini {
    /* text-align: center; */
    line-height: 40px;
}

.topbar-cart {
    float: right;
}

.topbar-info {
    float: right;
}

.link {
    padding: 0 5px;
    line-height: 40px;
}

在这里插入图片描述

LY__weI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5学习（css第四天）：浮动

今日所学：标准文档流+浮动。定义：内容从左到右，从上到下书写的。前面的内容大小或者位置发生变化时，后面的内容位置也会随之变化。web页面，就是一个标准的文档流。内容跟咱们的书写顺序有关。标准文档流的特性（1）空白折叠现象无论多少个空格，tab，换行都会折叠为一个空格。<div>张老师真帅</div>(2)高矮不同，底部对齐妖怪我要你助我修行<img src="img/zhaoshifu.jpg" alt="">
复制链接

扫一扫