扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是web前端CSS浮动的详细介绍，相信大部分人都还没学会文档流这个技能，为了让大家更加了解，给大家总结了以下内容，话不多说，一起往下看吧。
因为图文排版的原因，图片的宽度是一个整体。不像文字可以中间分开，因此在图文一起的时候我们会发现，图片作为文档流中的内容也是和一个文字元素一样，紧挨前一个文字，后面的文字也紧跟着图片。但是如果一行剩下的位置不够图片的宽度，就会自动换一行。
CSS样式vertical-align: middle;注意一定是给图片设置，不是给文字设置。
如何解决这个问题呢，起始有很多手段，最简单的是把两个标签连接写，不要换行
刚才我们所说的都是行内元素，也就是内容添加后会自动放在一行，如果页面的剩余的宽度比要放入的元素小，那么就会自动换行。
HTML
行内元素
<span>...span>行内元素 |
上面所有的行内元素，如果直接写在代码中都会存在同一行中。当然换行br会将后面的元素都放在另外一行了。
有时候我们希望一个内容可以自己独立成行。这样我们就有了块元素。块元素会独立成行，与行内元素做明显的区分。
例如：
<address>address>地址文字 |
块元素和行内元素具体有哪些区别呢。
行内元素 | 块元素 | |
同行 | 输入行内元素，就会自动同行 | 输入块级元素，自动换行，并且独立占有一行，其它行内元素不会和它同行的。 |
设置宽高 | 行内元素部分内容是不可以设置宽高的，例如 | 块元素直接可以设置宽高，如果没有设置就会根据该元素的父级容器的宽自动设置 |
行内元素和块元素可以互相转换的，例如：
(1) 行内元素转换为块元素
这是默认的行内元素
display:block
(2) 块元素转换为行内元素
div
设置为行内元素后。我们发现宽高失效了。一旦块级元素设置为行内元素，原来设置的宽高就会失效
(3) 块元素和行内元素转换为行内块元素
textArea块元素变成行内块元素
行内元素变行内块元素
我们发现这两个效果都是一样的。
marginTop
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网