首页 / CSS / css浮动学习

css浮动学习

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css浮动学习，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1083字，纯文字阅读大概需要2分钟。

内容图文

以前网页中的局都是使用浮动来实现的。而浮动在css中是一个挺难理解的概念，这次再巩固一下，float的具体使用事项。

1.行内元素和块元素的区别？

             1
            <!
            DOCTYPE html
            >
             2
            <
            html
            >
             3
            <
            head
            >
             4
            <
            meta 
            charset
            ="UTF-8"
            >
             5
            <
            title
            >行内元素和块元素</title> 6</head> 7<body> 8<span>我是行内元素</span> 9<span>我也是行内元素，我不会独占一行，我所在的这一行是允许其他元素存在的</span>10</body>11</html>

 技术分享图片

  • 行内元素（img,span）和其他非块元素在同一行显示。vs  块级元素（div，p）独占一行
  • 行内元素设置width无效（具体多宽由内部内容确定）（img除外），height无效(可以设置line-height)，padding和margin都是左右有效，上下无效（也就是说不能通过margin-top和padding-top来改变行高）。 vs  块级元素默认宽度100% padding和margin都生效

代码和显示效果如下

技术分享图片 技术分享图片 
                 1
                <!
                DOCTYPE html
                >
                 2
                <
                html
                >
                 3
                <
                head
                >
                 4
                <
                meta 
                charset
                ="UTF-8"
                >
                 5
                <
                title
                >行内元素和块元素</title> 6</head> 7<body> 8 910<span style="width: 900px; border:1px solid #000000;padding:20px;margin:20px;">我是行内元素</span>11<span>我也是行内元素，我不会独占一行，我所在的这一行是允许其他元素存在的</span>12<div style="border:1px solid #FF0000;">我是块元素</div>131415</body>16</html>
View Code

 技术分享图片

-----

未完待续

原文：https://www.cnblogs.com/html55/p/9795039.html

内容总结

以上是互联网集市为您收集整理的css浮动学习全部内容，希望文章能够帮你解决css浮动学习所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1219169.html

来源：【匿名】