_011_HTML_三个div 两边固定大小中间自动大小

最新推荐文章于 2021-06-27 21:34:16 发布

VeryHotLight

最新推荐文章于 2021-06-27 21:34:16 发布

阅读量332

点赞数

分类专栏： _023_HTML

_023_HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、文本流：

2、float和绝对定位都不占文本流的位置

3、普通流是默认定位方式，就是依次按照文本流的位置顺序布局。

4、相对定位可以看作特殊的普通流定位。相对定位的元素是相对自己本身的位置（在普通流中）进行定位。

5、position的absolute属性绝对定位：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

6、position中的fix属性是相对浏览器窗口进行定位

7、清除浮动样式的一种策略是：在最后添加一个空div，对它清理 <div style="clear:both;"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<bodyf

<div style="width: 100%;">
    <div  style="width: 100%;height: 200px;background-color: #0b6aff;"></div>
    <div style="width: 100%;height: 200px;horiz-align: left;">
        <div style="width:200px;height: 200px;float: left;background-color: #d7ff80"></div>

        <div style="width:200px;height: 200px;background-color: #36beff;float:left;"></div>
        <div style="width:auto;height: 200px;background-color: #2effc7;"></div>

    </div>
    <div style="width: 100%;height: 200px;background-color: #ffb6ac;clear: both"></div>
</div>



<div style="width: 100%;">
    <div  style="width: 100%;height: 200px;background-color: #0b6aff;"></div>
    <div style="width: 100%;height: 200px;horiz-align: left;">
        <div style="width:10%;height: 200px;float: left;background-color: #d7ff80"></div>
        <div style="width:80%;height: 200px;background-color: #2effc7;float: left;"></div>
        <div style="width:10%;height: 200px;float: left;background-color: #36beff"></div>

    </div>
    <div style="width: 100%;height: 200px;background-color: #ffb6ac;clear: both"></div>
</div>

</body>
</html>