首页 > Web开发 > 详细

css浮动学习

时间:2018-10-15 22:56:50      阅读:171      评论:0      收藏:0      [点我收藏+]

以前网页中的局都是使用浮动来实现的。而浮动在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         
 9         
10         <span style="width: 900px; border:1px solid #000000;padding:20px;margin:20px;">我是行内元素</span>
11         <span>我也是行内元素,我不会独占一行,我所在的这一行是允许其他元素存在的</span>
12         <div style="border:1px solid #FF0000;">我是块元素</div>
13     
14     
15     </body>
16 </html>
View Code

 技术分享图片

-----

未完待续

css浮动学习

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!