前端 HTML/CSS （八）

最新推荐文章于 2022-10-04 17:29:41 发布

木森林哥哥

最新推荐文章于 2022-10-04 17:29:41 发布

阅读量128

点赞数

分类专栏： Html/CSS 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_47021982/article/details/112066777

版权

Html/CSS 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

在这里插入图片描述
文档源代码(文档源代码就是你写的文件)书写时有正常的顺序，是从上到下从左到右的。在解释其代码时就会从上到下、从左到右来进行解释，解释时如果是行内元素就当在一行、如果是块状元素就有分隔的行。在这里插入图片描述

codereview: 代码审查
完全脱离文档流：内容完全重叠。

浮动

浮动的出现是为了打破这种正常的文档流而实现环绕效果。浮动的本质是为了实现文字环绕效果（文字环绕图片显示的效果）。

在这里插入图片描述
格式： float

none，没有浮动。

left，元素向左浮动（其他的内容包围在浮动元素的右边）

right，元素向右浮动（其他的内容包围在浮动元素的左边）

原理：

父类高度塌陷，让跟随的内容可以和浮动元素在一条水平线上。
块状盒子和浮动元素会重叠，但是块状元素中的行框盒子和浮动元素不会重叠。

float的规则

浮动元素的上边缘位置要考虑它之前的块状元素或浮动元素。
1. 如果一个正常流中的元素在浮动元素之前，那么那个浮动元素会将之前的位置也考虑在内，会在块状元素的下一行开始。

<!DOCTYPE htmL>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        div{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div style="background-color:black"></div>
    <div style="float:left;background-color: aqua;"></div>
</body>

</html>

显示：
在这里插入图片描述
2. 普通流中的元素不考虑它之前的浮动元素（就相当于他们不存在）。

<!DOCTYPE htmL>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        div{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div style="float:left;background-color: aqua;"></div>
    <div style="background-color:black;width:500px;height: 500px;"></div>

</body>

</html>

显示：
在这里插入图片描述
解析问题：

<!DOCTYPE htmL>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #f1{
            width:300px;
            height: 300px;
            background-color: red;
        }
        #f2{
            width:350px;
            height: 350px;
            background-color: royalblue;
            float:left;
        }
        #f3{
            width:400px;
            height: 400px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div id="f1"></div>
    <div id="f2"></div>
    <div id="f3"></div>

</body>

</html>

#f2要考虑到#f1的情况，所以 #f2自己重启了一行，因为#f3是在浮动元素之后所以就当做浮动的#f2不存在了。

在这里插入图片描述
2. 不管什么元素，浮动后会自动变为块级元素。

<!DOCTYPE htmL>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        span{
            float:left;
            width:100px;
            height: 100px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <span></span>

</body>

</html>

显示：

在这里插入图片描述

木森林哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 HTML/CSS （八）

表格表格的处理方式和其他的元素稍微有些不同：不管单元格中的内容有多少，一行中的所有单元格都具有相同的高度。在同一列中，不管单元格内容是多少，一列中的所有单元格都具有相同的宽度。表格标题表格标题可以从表格上继承样式，可以设置内边距、边框、背景。表格标题的宽度由表格决定。表格元素是标题的容纳块。caption-side：value，用来设置表格标题的位置。top，放在表格上面（caption-side: top;默认值）。bottom，放在表格下面。注意：caption-side:
复制链接

扫一扫