• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > css float属性 图解float属性的点点滴滴

css float属性 图解float属性的点点滴滴

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含float属性,float等相关知识,佚名 希望在学习及工作中可以帮助到您

正确使用CSS的float属性可能会变成一项艰巨的任务,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容。本文包含的实施例的应用属性float说明性例子,以及一些失误。

CSS的float示例1

“float”是什么?

CSS中的某些元素是块元素,例如,如果你把两个段落标记为P,那么他们将被放置在两行,。自己各占一行,如何向显示一行的话可以为元素使用inline属性来在页面显示,

另外一种有效改变页面元素的环绕属性是使用float,典型的例子是使用“float”,将图像向左或向右对齐。下面是一个简单的HTML代码的图片和段落:

CSS的float例2

让我们给image 增加点CSS代码,让他变变样,嘻嘻:


CSS的float示例3

如果有更多的文字,段落会继续环绕周围的图像:如下面的图

CSS的float例4

例如,我们需要做的图像和文本缩进20像素。如何你这样写代码下面的代码是错误的,不会生效的:


那么你要问了为什么上面写的p段落缩进20个像素会不起作用呢,不生效呢?为了找到答案,让我们添加一个框架代码:


CSS的float的例子6

事实证明,看到没有加上边框之后(这里加不加边框对他们的影响是没有任何作用的,只不过是为了让你明白),图片是在段落内!因此,margin属性不起作用在第一种情况。为了解决这个问题,你可以为段落p使用浮动:float:left,设置一个绝对宽度:设置之后的效果如下图


奇怪的规则“float”

现在,让我们转向更复杂的方式使用“float”的规则,变换float对象。当创建缩略图时,它可能是必要的。例如:


但是,如果图像是不同的高度呢?

CSS的float例如:9

 如果我们向列表中的元素的添加display属性,效果会好一些如下面的图

现在就让我们来垂直对齐:

CSS的float例11

应该记住,如果这是图像更高的情况下,所有其它图像会围绕前一个图像,例如:

CSS的float例如12

您可能想查找下面的文章:

  • css float属性 图解float属性的点点滴滴

相关文章

  • 2017-08-06960 Grid System 基本原理及使用方法
  • 2018-08-23如何从0到1建立设计规范?来看腾讯设计师的总结!
  • 2018-08-232018年高手总结了21条最值得掌握的移动App 设计基本原则
  • 2018-08-23腾讯的设计到底好在哪?高手是从这3个维度分析的!
  • 2018-08-23超全面!为什么越来越多的移动App 使用插画设计?
  • 2018-08-23作品不够精致?可能你没有注意这5个细节
  • 2017-08-06网站界面设计中为网站创建风格指南的方法(图文)
  • 2018-08-23如何做好标签系统设计?来看我的实践过程!
  • 2018-08-23大型的视觉设计系统都是怎么设计出来的?
  • 2018-08-23设计推送通知的时候,这7个关键点要把握好

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 腾讯干货!虚拟To B支付设计研究之设计思考篇
    • 总监经验!视觉设计师必须知道的交互设计模式
    • PS教程!教你绘制低多边形星空效果熊猫头像
    • 网易设计师:为什么要成为全价值链的研究员?
    • 系统之外的字体引用及过渡效果
    • 内容为王的时代,阿里设计师用实战案例解读内容化设计!
    • firefox浏览器中播放背景音乐的终极解决方案(chrome多浏览器兼容)
    • 整洁漂亮的网页设计的4项原则
    • 是什么限制你成为优秀的设计师?高手的答案在这!
    • 两款网站页面翻译插件分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有