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

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值