美文网首页
css浮动以及实现文字环绕

css浮动以及实现文字环绕

作者: 鸡毛菜菜子 | 来源:发表于2020-03-17 15:35 被阅读0次

一、浮动是作用于自身之后的元素的属性。使用浮动属性,也就是脱离了文档流,之前占用的位置被空出来,所以之后的元素会补充它原来的位置。而当两个元素都使用了浮动时,它们就位于同一个级别会按照顺序排列。在使用浮动之前通常会使用一个父盒子包裹元素,然而使用了浮动之后的子元素由于脱离文档流而无法撑开父元素高度,但是仍然会受到父盒子的margin和padding的影响。有三种解决方式:1.在使用浮动的子元素之后写一个逻辑块元素。2.使用伪元素 3.利用BFC机制,使用overflow。

子元素无法撑开父元素 使用逻辑块模式  使用伪元素 使用overflow

二、使用clip-path属性和shape-outside可以实现向world一样的文字环绕效果

shap-outside属性定义了文字相对于元素的位置,可以将文本包装在复杂对象周围而不是简单的框中。

最简单的一种属性设置方法

clip-path(裁剪路径,类似于ps工具里的钢笔)用于浮动显示区域形状定义。常见的属性值设置有圆形、椭圆形以及多边行。

clip-path:circle(50% at 0 100%)【圆的大小、圆心坐标】、ellipse(20% 30%)【椭圆横轴大小、纵轴大小】polygon(50% 0, 0 100% ,100% 100%)【三角形三点坐标】

属性值设置 设置效果

最后还有一个特殊的是图片的文本绕排也可以使用shape-outside:url(路径),但是图片必须是有透明度的png图片。不然也可以直接根据形状来设置shape-outside属性。

相关文章

  • css浮动以及实现文字环绕

    一、浮动是作用于自身之后的元素的属性。使用浮动属性,也就是脱离了文档流,之前占用的位置被空出来,所以之后的元素会补...

  • CSS浮动解析

    浮动概述 CSS浮动由属性值float来体现,通过浮动可以实现文字环绕的效果 浮动特点 先看下面示例 图片未设置浮...

  • CSS shapes布局

    一、前言&索引 CSS Shapes布局可以实现不规则的文字环绕效果,需要和浮动配合使用。 CSS shapes布...

  • 前端面试题

    一、css 1.如何实现文字环绕图片? 答:把图片设置为浮动 2.如何使用css图片精灵图? 答:使用backgr...

  • float浮动对文本元素排版影响

    本文主要解释float元素对文字图片的排版影响。 在css中有一个常见的图文环绕效果。实现方式主要是将图片左浮动,...

  • 关于 BFC 的布局应用:清除浮动、文字环绕

    关于 BFC 的布局应用:清除浮动、文字环绕 参考文档:理解CSS中BFC BFC(Block Formattin...

  • 大连滕泰科技学习笔记2020-11-17

    1,CSS浮动特点: 1,1 文字环绕的方式 2,CSS 定位 3,java中代理模式 4,java中java.l...

  • css之float

    float - 浮动 原始意义:用来实现让文字环绕图片而已 特性:包裹 于 破坏 辟开浮动的“破坏性”。浮动就是个...

  • CSS Float

    浮动设计的初衷并不是用来布局的,而仅仅是为了实现图片文字环绕效果,即图片做浮动,文字环绕图片。简单来说就是块级元素...

  • 第五次课程小结:清除浮动

    什么是浮动 浮动的本质:实现文字环绕效果元素脱离文档流不脱离文字流脱离文档流:假如A元素浮动了,原本排在该元素之后...

网友评论

      本文标题:css浮动以及实现文字环绕

      本文链接:https://www.haomeiwen.com/subject/fbutyhtx.html