盒子模型浮动元素

最新推荐文章于 2024-08-17 22:24:13 发布

靳jyy

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量32

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_61886370/article/details/133925387

版权

盒子背景样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 400px;
            background-image: url(../Day05/images/bg.jpg);
            background-color: red;
            /* 
               设置背景平铺方式  
                 repeat-x水平方向平铺
                 repeat-y 垂直方向平铺
                 no-repeat 不平铺
            */
            background-repeat: no-repeat;
            /* 设置背景图片尺寸 auto 自适应  cover 覆盖*/
            /* background-size: 100% 100%; */
            /* 设置背景图片的位置  水平位置 垂直位置 */
            background-position: 10px 10px;
            /* 简写 颜色 背景图片 平铺方式 关联方式 位置*/
            background: blue url(../Day05/images/bg.jpg) no-repeat 20px 0px;
             
        }
        body{
            background-image: url(../Day05/images/bg-1024.jpg);
            background-repeat: no-repeat;
            /* 背景图片关联方式
               fixed  不随滚动条滚动
               默认scroll */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


css布局机制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            /* display: inline-block; */
            /* 浮动布局：可以让元素水平排版 float：left right none 对文字不影响
                        脱离文档流，原先位置不保留 飘在文档流上方 */
            float:left;
        }
        p{
            width: 100px;
            height: 100px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <p>段落标签</p>
</body>
</html>


浮动对兄弟元素的影响
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:last-child{
            background-color: blue;
            /* 1.浮动元素对兄弟元素的影响 */
            clear: both;
        }
        div:first-child{
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>




浮动对父级元素的影响
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 10px solid red;
            margin-top: 10px;
        }
        .parent>div{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        /*2. 清楚浮动 在浮动元素和非浮动元素中间设置一个空标签，给空标签清浮动 */
        .clear{
            clear: both;
        }
        /* 3.清楚浮动 子元素浮动给父元素清楚浮动 */
        .parent:nth-child(2)::after{
            display: block;
            content: "";
            clear: both;
        }
    </style>
</head>
<body>
    <div class="parent">hello css</div>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <!-- <div class="clear"></div> -->
    <div class="parent">hello css</div>
</body>
</html>


自围浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            float: left;
        }
    </style>
</head>
<body>
    <img src="../Day05/images/bg.jpg" alt="">
    <div>
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素
    </div>
</body>
</html>

笔记

高度塌陷？
给子元素设置浮动后，父元素失去了高度支撑，发生高度塌陷。
解决方案：
1.给父元素设置高度
2.给父元素清除浮动 使用伪元素清除浮动
::after{
display:block;
content:"";
clear:both
}
css中外边距合并问题？*************
兄弟级外边距合并
原因：一个兄弟元素设置了下外边距，另一个兄弟元素设置了上外边距，发生外边距合并现象
合并规则：{
1.如果两个值都为正数，取最大外边距合并
2.如果一个值是正数，另一个值是负数取外边距之和
3.如果两个值都为负数，取最小外边距绝对值进行缩减
}
解决方案：
1.给其中一个元素设置外边距，另一个不设置
2.给下方兄弟元素元素开启BFC
3.
父子级外边距合并
原因：给子元素和父元素设置同一方向外边距就发生合并现象
合并规则：{
1.如果两个值都是正数，取最大的外边距合并
2.如果一个值是正数，另一个值是负数，取外边距之和
}
解决方案：
1.给父元素设置内边距，不给子元素设置外边距，可以将父元素设置为border-box
2.给父元素设置一个边框
3.给父元素开启BFC
BFC(Block Formatting Context)块级格式化上下文，把BFC当作是元素的一种属性，
只要元素拥有了这种属性，就成为独立的一块渲染区域，容器内的元素不会影响到容器外的元素
1.如何触发BFC
1.html
2.float不为none
3.position为absolute和fixed
4.display:inline-block
5.overflow不为visible hidden auto
2.BFC作用：
1.避免外边距重叠
2.清除浮动
3.阻止元素被浮动元素覆盖
4.两列布局
5.三列布局

靳jyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
盒子模型浮动元素

只要元素拥有了这种属性，就成为独立的一块渲染区域，容器内的元素不会影响到容器外的元素。：一个兄弟元素设置了下外边距，另一个兄弟元素设置了上外边距，发生外边距合并现象。2.如果一个值是正数，另一个值是负数取外边距之和。2.如果一个值是正数，另一个值是负数，取外边距之和。，不给子元素设置外边距，可以将父元素设置为border-box。给子元素设置浮动后，父元素失去了高度支撑，发生高度塌陷。1.如果两个值都是正数，取最大的外边距合并。：给子元素和父元素设置同一方向外边距就发生合并现象。2.给下方兄弟元素元素。
复制链接

扫一扫