码迷,mamicode.com
首页 > Web开发 > 详细

css浮动学习

时间:2018-10-15 23:15:40      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:改变   charset   允许   默认   b2c   com   info   块元素   view   

以前网页中的局都是使用浮动来实现的。而浮动在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浮动学习

标签:改变   charset   允许   默认   b2c   com   info   块元素   view   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!