布局一般都是遵循按行和列等线性原则，Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好，更灵活，但相对于印刷媒体而言，Web布局总体上还是受到很好的限制，特别是内容流上。
杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。
直到目前为止，Web上的布局都局限于规则矩形排列，无法让内容流实现非矩形布局。
接下来让我们一起探讨如何使用CSS Shapes模块让Web布局能像杂志和报纸一样让文本内容实现不规则矩形排列。
CSS Shapes简介
CSS Shapes使网页设计师能更好的实现自己的创意，除了简单的长方形和正方形，还可以实现任何几何图形布局。改规范提供了两个新的CSS属性：shape-outside和shape-margin。浏览器支持这些规范是有一定道理的，尽管这些属性目前仅可以在Chrome、Opera和Safari看到效果，而且还需要带上浏览器的私有属性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。
shape-outside属性将使用内容能绕着不规则几何图形排列，不在是中规中距的矩形。最初也可以让内容在一个元素内呈现，比如几何图形是一个圆形，那么文本在这个圆形内呈现，文本也将呈现成一个圆圈形状。然而这效果已经推迟到CSS Shapes Level 2中实现。
让文本在一个几何图形内呈现，使用的是CSS Shapes中的shape-inside属性。
shape-margin属性用来设置使用了shape-outside的几何图形与环绕它文本之间的间距。
看上去非常强大，也很有意思，写个实例来验证一下前面所说的。
创建一个图形
创建一个圆是CSS创建一个图形（不是矩形）最简单的。使用一个div来制作这个圆，并且在这个圆的边上放置几个段落p。
写一点基本样式，给.circle元素设置一个相同的width和height，使用border-radius将div变成一个圆，并且设置一个float，让段落围着这个元素。
除了段落现在围绕着该元素.circle之外，文本还是没有变成曲线绕着圆形。那是由于border-radius属性实际上并无法改变一个元素形状，它依旧是一个矩形。
通过浏览器开发者工具（DevTools）的审查元素可以发现，事实上.circle仍然是一个盒子。即使这个div的外观看上去是一个圆，但实际上它没有元素看到的实际形状。
为了让段落呈现成一个圆形，实际上我们就需要通过shape-outside属性改变元素的实际形状。在本例中，将给shape-outside设置一个circle()属性值。
这个时候，再使用开发者工具审查元素，不难发现元素正确渲染成一个圆。
添加一定的margin值，你可能看到的效果就像下面：
自定义圆
circle()函数可以定义圆的半径和圆心位置：circle(r at x y)。默认情况，半径值来源于元素容器大小，如果元素宽度是300px，那么圆的半径就是其宽度的一半150px。
同样，x和y坐标也是相对于元素尺寸。默认的坐标是50% 50%，也就是元素的正中间。
当你想保持元素实际的大小，形状和位置，而又想调整形状，这两个值相当有用。以下面的示例中，将圆的半径调整为60px，圆心坐标调整为30% 70%,相当于把圆调整到元素的左下角。
值得注意的是，当修改圆心坐标和半径时必须显式的定义，如果只添加其中的任何一个，都将是一个无效的值：
图形盒模型
CSS Shapes继承了元素相同的盒模型，但应用元素以外的范围。比如说，允许我们把元素的border-box设置为padding-box。改变图形盒型只需要给shape-outside属性上添加盒模型的关键字：content-box、margin-box、border-box或padding-box。
CSS Shapes默认的盒模型是margin-box。在下面的例子中，将CSS Shapes盒模型改为padding-box，告诉浏览器排除元素的margin和border值。这个时候看到的内容将绕着元素的padding外边缘位置处。
如果你对CSS的盒模型不太了解的话，强列你阅读一下这个教程，此教程详细告诉了你CSS的盒模型是如何工作的。
创建更多的图形
CSS Shapes规范还提供了几个其他图形函数：
ellipse()：顾名思义，这个函数将创建一个随圆形状。可以配置半径和移动圆心坐标。和circle()函数不一样，ellipse()函数可以接受两个半径，第一个是水平方向半径，第二个是垂直方向半径。因此可以这样ellipse(100px 180px at 10% 20%)创建一个椭圆
polygon()：这个函数功能更强大，能够创建更复杂的形状，比如三角形、六边形以及一些不规则的多边形。使用polygon()并不像使用circle()函数创建一个圆那么简单，但不需要过于担心，可以使用多边形转换器这样的工具可以很直观的创建出不规则的多边形形状
总结
在这篇文章中，我们了解了CSS Shapes的基本的使用方法：创建一个形状，定制其大小、位置和盒模型。在写这篇文章的时候，CSS Shapes还有好多个方面都很粗糙，这也可能是为什么看不到CSS Shapes得到广泛使用的原因之一。
正如本教程中前面所述，shape-inside允许将内容放置在一个图形内
CSS Shapes规范提供了一个单独的属性shape-box用来定义CSS Shapes的盒模型，尽管现在还没有得到任何浏览器的支持
在Safari浏览器中，一定需要添加-webkit前缀
然而，尽管进展缓慢，浏览器渲染还存在差异，但我们期待于CSS Shapes能早日到来。一旦主流浏览器真的支持CSS Shapes规范，那么就可以看到一些创造性的Web布局。
扩展阅读
CSS Shapes 101
理解CSS Shapes的引用框
CSS布局的未来
文章涉及到图片和代码，如果展示不全给您带来不好的阅读体验，欢迎点击文章底部的 阅读全文。如果您觉得小站的内容对您的工作或学习有所帮助，欢迎关注此公众号。
W3cplus.com
————————————
记述前端那些事,引领web前沿
长按二维码，关注W3cplus
▼
温馨提示
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请后台提交工单处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请后台提交工单！
【免责声明】：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
【关于转载】：
本站尊重互联网版权体系，本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读，无任何商业用途，所有内容版权归原作者所有
如本站（文章、内容、图片、视频）任何资料有侵权，先说声抱歉；麻烦您请联系请后台提交工单，我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
注：本站资源来自网络转载，版权归原作者和公司所有，如果有侵犯到您的权益，请第一时间联系我们处理！
-----------------------------------------------------------------------------------------------------------
【版权声明】：
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后，情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » 网站后台排版css(css网站布局作业)
1 评论