前端 HTML/CSS （九）

最新推荐文章于 2023-05-15 15:18:07 发布

VIP文章木森林哥哥

最新推荐文章于 2023-05-15 15:18:07 发布

阅读量142

点赞数

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

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

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        div{
    
            border:1px solid green;
            font-size: 0;
        }
        div img{
    
            float:left;
        }
    </style>
</head>

<body>
    <div>
        <img src="./1111.jpg" />
    </div>

</body>

</html>

显示：
在这里插入图片描述
如果要放置高度塌陷尽量不要去设置height的值，否则一不小心会出现如下的情况：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        div {
    
            border: 1px solid green;
            font-size: 0;
            height: 350px;
        }

        div img {
    
            float: left;
        }
        p{
    
            margin:0px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div>
        <img src="./1111.jpg" />
    </div>
    <p>
        We can also create a horrible user experience by making every property transition at a
        different rhythm, like this:
        Always remember that the transition-timing-function does not change the time it
        takes to transition properties: that is set with the transition-durationproperty. It
        just changes how the transition progresses during that set time. Consider the
        following:
    </p>

</body>

</html>

显示：
在这里插入图片描述

浮动元素四周的外边距不会折叠（上下边距不会折叠）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #f{
    
            width:500px;
            border:1px solid green;
        }
        #f .z{
    
            float

最低0.47元/天解锁文章

木森林哥哥

关注

0
点赞
踩
0

收藏

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

浮动设计的初衷：实现文字环绕效果。原理：父类高度塌陷，让跟随的内容可以和浮动的元素在一条线上。块状盒子会和浮动元素重叠，但是块状元素中的行框盒子不会和浮动元素重叠。规则：考虑前面的元素。只要是浮动的元素就会变成块状元素。子元素浮动将会导致父元素高度塌陷。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <style> div{
复制链接

扫一扫