关于【css3浮动特性】，今天乾乾小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
内容导航：1、css3浮动特性：你可能不知道的10个CSS3中的隐藏特性2、css3浮动特性，CSS3实现三角形尖括号1、css3浮动特性：你可能不知道的10个CSS3中的隐藏特性
CSS3为web设计增添了许多令人惊叹的特性，这其中你经常会用到box-shadow（图层阴影），border-radius（边框圆角），transform（变形）这一类受欢迎的常用特性。但是还有一些强大的功能，你可能没有接触到，它们就象是埋藏在地下的宝藏，静静等待着你的发掘。
W3C正不断致力于为设计师、开发人员和用户开发新的CSS特性，下面我们就来看看你可能不知道的CSS3中的10个隐藏特性：
1.Tab尺寸控制
大多数代码编辑器配有Tab尺寸控制，开发者可以对指定代码的缩进所使用的Tab键的宽度进行控制。而现在，这个功能已经对嵌入在网页的定制代码开放了。
注意，每个浏览器可能都有对Tab占用宽度的不同说明。所以，我们在不同的浏览器上会看到一些差异。我目前所知道的支持这个功能的浏览器包括：Chrome，Opera，Firefox和Safari。
2.文本渲染
文本渲染的特性可以让浏览器知道如何在网页中渲染文本。文本优化所涉及的性能、易读性、精度将会决定到文本的质量。看看下面截图两个版本的字距调整，来辨别一下“正常”版和“易读性优化”版的差别吧。
3.字体伸缩
除了常规的正常，粗体和斜体，其它的字体设置也会提供不一样的感官设计。Helvetica Neue或者Myriad Pro字体就是其中的例子，对于字体的伸缩程度，它们有“Condensed”，“Ultra-condensed”，和“Semi-condensed”几种设置，这些都可以通过一个名为font-stretch（字体伸缩）的特性来实现。
我们可以使用字体伸缩结合文字特性（比如使用字体样式），举一个例子：
font-stretch（字体伸缩）特性目前只能在Firefox和Internet Explorer 9（及以上版本）使用。
4.文字溢出
文字溢出特性指定了容器中溢出或者被截断内容的呈现方式。默认的处理方式是截断，被截断的内容会被隐藏起来。你可以设置用省略号来代表被截断的文本或者进行省略。如下图所示：
正如你所想的，末尾三个点的省略号代表了被省略的内容。
5.书写模式
并不是每一种语言都是从左到右的书写的，有一些语言是从上到下的比如日语，还有一些语言是从右到左的比如阿拉伯语和希伯来语。
为了适应这些语言，CSS引入了名为书写模式的新特性来帮助开发人员改变内容的书写方向。例如，这个代码片断就是让本文书写的内容保持从左到右的顺序（无论什么语言）
改变文本内容的顺序为从上到下，这可以通过设置为vertical-l,r来实现：
6.指针事件
pointer-events（指针事件）属性可以让开发人员控制鼠标指针在拖下，悬停和点击等事件下的行为。使用下图的命令后，指针点击链接将不会产生任何效果，链接会被完全禁用，而href标签中所指定的地址位置也会成为摆设。
关于指针事件的一些关键问题将会在下一个版本CSS4中得到解决。
7.图片定向
在Photoshop等图片编辑器里，你可以通过旋转或翻转等改变图片的方向。现在，CSS3中的image-orientation（图片定向）功能可以让你可以对网页上的图片完成同样的处理。这里是一个如何让图片进行水平翻转的例子：
你可以通过恢复镜像（from-image）来保留原来图片的方向：
8.图片渲染
类似于文本渲染特性，图像渲染定义了网页上的图片质量，特别是可改变图片的大小。这个特性是由一堆数值组成的，不同的浏览器对于这些数值的设定都不一样。比如，crisp-edges这个用于保存图片对比度并可预防图片边缘模糊的特性在Chrome极速浏览器里会使用webkit-optimize-contrast，而在IE浏览器里会使用nearest-neighbor。
这是一项实验性技术，实施得到的结果有随着技术的不同而产生微小的变化。
9.列属性
列属性可以使开发者轻松的把web内容排列成列，我们把内容分成两列，如下所示：
当浏览器支持这个特性的时候，比如在Chrome和Safari中，我们就会看到以下内容的排列：
CSS这个特性上再加上一些创造力，你就可以轻松的创建一个与时尚杂志相似的拥有灵活流体布局和诱人内容布局的网站了。
10.flex流动布局
flex的特性旨在构建更加无缝化的响应式网格并同时解决关于主流网络布局使用浮动属性所产生的一系列问题。除此之外，使用flex特性，网络布局将完全延伸至整个容器，这在以前是一件相当烦琐的事情。
现在，假如你想要构建一个三列的web布局，你可以这样安排：
然后，使用flex构建列属性，像这样操作：
2、css3浮动特性，CSS3实现三角形尖括号
一、border实现实心三角形效果
1.其中宽度（width）、高度（height）均需要设置为0；
2.4个边框都要写，只保留需要的边框的颜色，但是不能省略，不需要的可以设置为透明；
3.加上font-size:0;line-height:0;解决兼容性问题。
当宽高均为0时，设置上右下左四个边框，将会形成一个由四个三角形构成的矩形，如果四个边框的border-size属性值均一致，则会形成一个由四个三角形构成的正方形。
例：
设置四个边框border-szize属性相同的代码示例
border-size属性相同时设置不同颜色的示例图
设置上边框为红色，其它为透明的代码示例
设置上边框，其它为透明时的倒三角效果图
二、尖括号的实现
1、通过border设置边框，利用CSS中的转换进行旋转。
利用border rotate实现尖括号的代码示例
利用border rotate实现尖括号的效果图
2、利用字体图标实现尖括号，打开https://icomoon.io/app/#/select网址，选择自己需要的图标，然后点击右下角的generate fonts，接着点击download下载字体图标，然后解压压缩包，并将其中的font文件夹放到页面的根目录下，并将下列代码复制到样式文件或者内部样式定义中。
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?rt66ei'); src: url('fonts/icomoon.eot?rt66ei#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?rt66ei') format('truetype'), url('fonts/icomoon.woff?rt66ei') format('woff'), url('fonts/icomoon.svg?rt66ei#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block;}
字体图标实现尖括号代码示例
字体图标实现尖括号效果图
仅以此作为学习笔记以及分享，如有需改进或者不妥之处，请多多指教。
1 0.01=1.01
1-0.01=0.99
本文关键词：css中浮动的基本特点及浮动带来的影响，css中浮动的基本特点，css浮动的几种方式，css浮动的用法，css3浮动属性。这就是关于《css3浮动特性，你可能不知道的10个CSS3中的隐藏特性》的所有内容，希望对您能有所帮助！更多的知识请继续关注《犇涌向乾》百科知识网站：！