HTML div标签的浮动

最新推荐文章于 2024-07-09 22:55:28 发布

qq_41413469

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量1k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41413469/article/details/117568326

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。

div内部没有子元素只有文字时padding-top是可以生效的，margin-top不能生效是因为边框和内容之间只有padding，margin边框外，div内有子元素比如：父元素div设置宽高，边框，子元素设置padding-top也是可以的margin-top如果不生效的话可以给父元素设置overflow:hidden;

元素的边框(border)是围绕元素内容和内边距的一条或多条线.css border属性允许你规定元素边框的样式，宽度和颜色.css边框:在html中，我们使用表格来创建文本周围的边框，但是通过使用css边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素,元素外边距内就是元素的边框(border),元素的边框就是围绕元素内容和内边距的一条或多条线.每个边框有3个方面:宽度、样式/以及颜色，

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>足球</title>
</head>
<style type="text/css">
    body {
        margin: 0;
    }
    
    .wrapper {
        border: 1px solid #909399;
        border-top: 4px solid royalblue;
        width: 960px;
        margin: 0 auto;
        text-align: center;
    }
    
    h1 {
        font-weight: 400;
    }
    
    .title_wrapper {
        margin: 0 30px;
    }
    
    .title_wrapper .sub_title {
        padding: 0 125px 1em;
        display: flex;
        justify-content: space-between;
        color: #909399;
        font-size: 14px;
    }
    
    .title_wrapper .sub_title span {
        color: red;
    }
    
    .img_wrapper {
        border-top: 1px solid #909399;
        padding: 30px 2em 0;
    }
    
    .img_wrapper img {
        width: 100%;
    }
    
    .img_wrapper p {
        color: #909399;
        font-size: 14px;
    }
    
    .context {
        line-height: 1.75em;
    }
    
    .context p {
        text-indent: 2em;
        text-align: left;
    }
    
    .context .special {
        border: 1px dashed #909399;
        padding: 1em 0.75em;
        margin-bottom: 2em;
    }
    
    .context .special p {
        margin: 0;
        text-indent: 0;
    }
    
    .context .special p span {
        color: #2B6DCD;
    }
    
    .context .special p:last-of-type {
        text-align: right;
        font-size: 14px;
    }
    
    .context .keyword {
        text-align: left;
    }
    
    .context .keyword span {
        color: #2B6DCD;
        padding-right: 0.5em;
    }
    
    .context .btn {
        margin: 1em 1.5em 3em;
        padding: 5px;
        color: #2B6DCD;
        background-color: #DEE2F3;
        border: 2px solid #2B6DCD;
    }
</style>
</head>

<body>
    <div class="wrapper">
        <h1>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h1>
        <div class="title_wrapper">
            <div class="sub_title">
                <div>2015年08月08日18:19</div>
                <div><span>新浪体育</span></div>
                <div>微博</div>
                <div>我有话说(<span>10,370</span>人参与)</div>
                <div>收藏本文</div>
            </div>
            <div class="img_wrapper"><img src="./images/img.jpg" alt="">
                <p>鲁能热身赛16-0大胜鲁能热身赛16-0大胜</p>
            </div>
            <div class="context">
                <p>新浪体育讯　　北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源均取得进球。
                </p>
                <div class="special">
                    <p><span>鲁能泰山足球新闻：</span>#鲁能泰山#鲁能热身赛16-0击败一支业余球队，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源取得进球。</p>
                    <p> 2015-08-08 17:54 来自百度浏览器 转发(49) | 收藏 | 评论(50)</p>
                </div>
                <p>由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错。
                </p>
                <p>下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话，无疑是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能能恢复多少非常关键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)
                </p>
                <div class="keyword">
                    <b>文章关键词：</b>
                    <span>中超</span><span>鲁能</span><span>阿洛伊西奥</span><span>蒙蒂略</span>
                </div>
                <div class="btn">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</div>
            </div>
        </div>
    </div>
</body>

</html>

qq_41413469

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML div标签的浮动

HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。div内部没有子元素只有文字时padding-top是可以生效的，margin-top不能生效是因为边框和内容之间只有padding，margin边框外，div内有子元素比如
复制链接

扫一扫