css不换行属性_那些不常见,但却非常实用的css属性(整理不易)

1、-webkit-line-clamp

可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..."

这是正常的展示

e2cf6e7636d530957982ea39fc9fcfd9.png
display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
-webkit-box-orient: vertical; /*值必须为vertical*/
-webkit-line-clamp: 2; /*值为数字,表示一共显示几行*/
overflow: hidden;

这是加了 line-clamp 后的展示

00bdede221faa0032e2f1a4407a4046f.png

https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

2、all

将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值,或继承值。

all: unset; /*initial | inherit | unset*/
initial 改变该元素所有属性的值至初始值。inherit 改变该元素的值 至 从父元素继承的值
unset 如果该元素的属性的值是可继承的,重置为父元素的继承的值,反之则改变为初始值。

3、box-decoration-break

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-decoration-break

4、caret-color

用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

caret-color: red;

5d2f23ebf5b117591e9143f401f6d789.png

5、clip-path / shape-outside

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。类似的裁剪还有 svg 的 clipPath。

clip-path 的取值有以下几种图形

inset(xxx): 裁剪为长方形circle(xx): 裁剪为原型
ellipse(xxx): 裁剪为椭圆
polygon(xx): 裁剪为多边形
none: 不裁剪

例子前的准备

<divstyle="width: 500px; height: 500px;text-align: left;background-color:gray;color:white"
><imgclass="clip-mode"style="float: left; margin:20px"src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"width="150"/>We had agreed, my companion and I, that I should call for him at his house,after dinner, not later than eleven o’clock. This athletic young Frenchmanbelongs to a small set of Parisian sportsmen, who have taken up “ballooning”as a pastime. After having exhausted all the sensations that are to be foundin ordinary sports, even those of “automobiling” at a breakneck speed, themembers of the “Aéro Club” now seek in the air, where they indulge in allkinds of daring feats, the nerve-racking excitement that they have ceased tofind on earth.
</div>

不裁剪

clip-path: none;

1b91276b42515a80c115d8b40c4b8343.png

圆形裁剪

clip-path: circle(40%); //半径为40%,圆心默认为中心

f4c58a6173a8b1ebb5b2c37f2c894503.png

椭圆裁剪

clip-path: ellipse(130px 140px at 10% 20%);

7b4292edbc7ac34c817c628f68ecc733.png

多边形裁剪

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

93d9ea6c76c1e177950754a33b15a218.png

我们可以看到上面图形如何裁剪,外面的看不见的框始终是矩形,也就是说文字始终是按矩形的样式在周围环绕。

那么有办法让文字紧紧的贴在裁剪的图形周围呢?
有的,使用 shape-outside 属性

shape-outside 定义了一个可以是 非矩形的形状,相邻的内联内容应围绕该形状进行包裹。默认情况下,内联内容包围其矩形边距;

默认矩形环绕

clip-path: none;
shape-outside: none

4cf34685e8b14292ad334562c08062e6.png

圆形环绕

clip-path: circle(40%);
shape-outside: circle(40%);

椭圆环绕

clip-path: ellipse(130px 140px at 10% 20%);
shape-outside: ellipse(130px 140px at 20% 20%);

5a2eddb6200ffa0419363065f5b58b39.png

多变性环绕

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

5e656429e57aaa213d5c67a1953ce15b.png

当然你不一定在圆形裁剪上,使用圆形环绕,你可以在圆形裁剪上使用多边形环绕,在多边形裁剪上,使用菱形环绕。总之这两个之间没关系,不是两两匹配的。都随你便,自己定义

6、object-fit / object-position

object-fit 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。object-position 属性来指定被替换元素的内容对象在元素框内的对齐方式。

注: 其中可替换元素有 iframe,video,embed,img,还有一些在特性情况也是可替换元素,option,audio,canvas,object

例子前的准备

<div style="width: 300px; height: 300px; background-color:gray;"><img class="clip-mode" style="height: 100%; width: 100%;" src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg">
</div>

图片一定能要设置为宽高 100%,即不能超过父容器,才可以设置 object-fit,否则没意义。

fill 填满 图片会拉变形,宽度和高度都被拉到父容器的 100%,以适应父容器

object-fit: fill;

2ea4fad755c5d611696d74d554145eb2.png

contain 包容 图片不会变形,图片会按照自身比例进行缩放,整个图片放入父容器中,较短的边会出现自动填充的空白。

object-fit: contain;

09e1cb2f805688b512c7eceed3fb5b16.png

cover 覆盖 图片不会变形,图片会按照自身比例进行缩放,整个图片放入父容器中,按照图片最短的边,纳入父容器为基准。较长的边会溢出

object-fit: cover;

none 和父容器的宽高没关系。展示其图片最原始的宽高比,以自身图片的“中心”为基点,放置到父容器的“中心”位置。

object-fit: none;

9fb2901b7d6b9332dcd0ad5d65555c52.png

scale-down 内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

object-fit: scale-down;

如果图片比父容器尺寸大,那么按照 contain 的效果,如果图片比父容器小,那么按照 none 的效果。

在上面 object-fit 的展示中,我们发现可替换元素的对齐方式都是自动的。

比如 object-fit: fill; 的左上角和父容器的左上角对齐。

object-fit: none;的中心和父容器的中心对齐等等。

但是我们想手动更改对齐方式呢??

可以使用 object-position 属性, 规定了可替换元素的内容,在其内容框中的位置。

object-position: 10px 10px; 可以设置 px,第一个值代表距离父容器左边的距离,第二个值代表距离父容器顶部的距离。只有一个数值则只代表距离父容器左侧的距离。也可以设置%数值,但此时只有某一边有空白才会起作用,如果没有空白,刚好铺满父元素,则不起作用。设置 px 就没有这样的问题,任何之后都会起作用。object-position: right top;可以设置关键字,第一个值关键字可设置(left|center|right),第二个关键字可设置(top|center|bottom),此时不表示距离左侧或者顶部的距离,而表示放置在父元素的什么位置。
object-fit: fill;
object-position: 50px 50px;   //距离左侧10px,距离顶部10%

加 object-position 前后对比图:

765a3c7b4a2fac2eb7c77b3ca75454a7.png
object-fit: contain;
object-position: right top;  //停留子 右上方

加 object-position 前后对比图:

1b940e79c4704a2460b1ab2089b161b5.png

7、font-stretch

为字体定义一个正常或经过伸缩变形的字体外观,它仅仅意味着当有多种字体可供选择时,会为字体选择最适合的大小。

normal 默认字体semi-condensed, condensed, extra-condensed, ultra-condensed 小于默认字体
semi-expanded, expanded, extra-expanded, ultra-expanded 大于默认字体

5d0331f268508a560ce3746e32144583.png

8、font-variant-caps

可以控制大写字母特殊字符的使用。

  • normal 关闭一切特殊字符变体的使用。
  • small-caps 允许小型大写字母的使用(OpenType 特性:smcp)。小型大写字母指使用大写形式,但尺寸与对应小写字母相同的字母。
  • all-small-caps 将大小写字母全部转化为小型大写字母。(OpenType 特性: c2sc, smcp)。
  • petite-caps 允许特小型大写字母的使用(OpenType 特性: pcap)。
  • all-petite-caps 将大小写字母全部转化为小型大写字母。(OpenType 特性: c2pc, pcap)。
  • unicase 允许将大写字母转化为小型大写字母与普通小写字母的混用 (OpenType 特性: unic)。
  • titling-caps 允许首字母大写(OpenType 特性: titl)。大写字母变体字符通常被设计成与用于小写字母。在标题序列中,如果均使用大写字母,可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。

8c4dce169cfc98eb2b593db9c3b387b0.png

9、font-variant-east-asian

控制对东亚字符(如日语和汉语,韩语等)使用替代符号。

值有一下几种:
normal; ruby; jis78; jis83; jis90; jis04; simplified; traditional; full-width; proportional-width

bedb763ee8b6817a07527d0817d05660.png

10、max-content / min-content / fill-available / fit-content

这几个值都可用在 width, height, min-width, min-height, max-width 和 max-height 属性上。

display 必须为 inline-block 或者 block,否则上面的值不起作用。

fill-available

元素撑满可用空间。参考的基准为父元素有多宽多高。

类似子元素的 div 撑满父元素的宽,fill-available 不仅可以撑满宽还能撑满高。

例子前的代码

<div style="width: 300px; height: 100px; background-color:gray;"><span style="display:inline-block;background-color: burlywood;">这是子元素的内容</span>
</div>

给 span 上设置 fill-available 时的不同表现

4a4d2d9306fcbe331315fbc040883fa9.png

假如里面的有个元素,是 img 呢?它也是 inline-block,应该也满足情况。

983474d0344a4bc502d12bba225d5809.png

我们可以看到 img 和 span 的不同在于,设置 width 或者 height 其中一个时,整个 image 会按照自身比例缩放。

max-content

它的宽度或者高度,会自动调整为,刚刚好容纳下子元素中那个长度最长(按照文字不换行时计算)的元素即可。
参考的基准为子元素有多宽多高。

<div class="parent"><div class="current" style="width: 200px; height: 300px; background-color:gray;"><p>这是普通的p元素行,内容为文字</p><img src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"/></div>
</div>

给 current div 设置 max-content 时得不同表现。

102880eb96028d5615ab72b2dcecec80.png

min-content

它的宽度或者高度,会自动调整为,刚刚好容纳下子元素中那个“最小宽度值”最大的元素即可,剩余超长的要么换行,要么溢出
参考的基准为子元素“最小宽度值”有多宽多高。

什么是“最小宽度值”?
比如图片,最小宽度值,就是图片原始的宽高;如果是一串中文,则最小宽度值为单个汉字的宽高;如果是一串英文,则最小宽度值为里面单词最长的那个。

9e7a58cd9e8034cb8bbf06bcaf31b9d7.png

fit-content

表示元素自动伸缩到内容的宽度,和 max-content 的区别为,都是刚刚好容纳下子元素中那个长度最长的元素即可。

不同的是 max-content 在计算时按照文字不换行时计算,如果超过父元素,则不换行,直接产生滚动条; 而 fit-content 在超过父元素后,换行,不产生滚动条。

8fb1ddca9e7405bebb36f520f1f5ccd5.png

11、fit-content()

这个不同于上面的 fit-content 值,它是函数,用在 grid 布局当中。

(略)

具体查看 grid 布局

12、resize

比较简单,可以查看

resize​developer.mozilla.org
d07ca1dd0b8e29f20038ec6310bee528.png

13、scroll-behavior

当用户通过 API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为, 平滑到达还是立即到达

可以查看
官方文档

14、max() / min()

max 在两者这件取最大;min 函数在两者之间取最小。

max,min 可以用在任何可以设置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

width: max(50vw, 300px);
width: min(50vw, 300px);

15、clamp()

clamp 函数会在定义的 三个值之间,取中间的那个值,是大小在中间,不是位置在中间,

clamp(MIN, VAL, MAX)

和 max,min 函数一样,可以用在任何可以设置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

font-size: clamp(1px, 3px, 2px);    //中间值为2px
font-size: clamp(1px, 3px, 5px);    //中间值为3px
font-size: clamp(4px, 3px, 5px);    //中间值为4px
width: clamp(200rem, 25vw, 150px); //在这三个之间取中间值

16、conic-gradient()

在渐变中我们知道,有:

  • 线性渐变,linear-gradient,从一个方向,沿着另一个方向,颜色线性过渡。

151999f4dcbcdbb8e259c9edc894841f.png
  • 径向基渐变,radial-gradient,从某一个点,沿圆环向外慢慢辐射。

3e593cad7e4c18f8596cf029f978f306.png

除此之外,还有一种渐变,叫"锥形渐变"。它是围绕中心点按照扇形方向进行旋转的渐变(而不是从中心点辐射)

这是锥形和径向渐变的区别图

09604d4961cdac0cd7ba656f94e98552.png
background: conic-gradient(red, orange, black, green, blue);

默认从时钟 12 点,按照顺时针旋转

f8ff780ed138b5aa237e279538365bde.png

18、:out-of-range / :in-range

比较简单,可以查看官方文档

:out-of-range

:in-range

19、writing-mode

定义了文本水平或垂直排布以及在块级元素中文本的书写方向

horizontal-tb 表示水平书写,从上(top)到下(bottom)书写vertical-rl 表示垂直书写,从右(right)向左(left)(古人书法就这么写的)
vertical-lr 表示垂直书写,从左向右
注意没有 horizontal-bt,不要杜撰

26cf91094d8b055ab8a3316a2a30e1f2.png

20、inline-size

和元素的 width,height 效果一样,都会改变盒子的大小。但是会覆盖 width,height 值。

不同在于,width 是绝对的水平方向,height 是绝对的竖直方向;

而 inline-size 是相对的水平方向,可通过 writing-mode 模式,改变方向

be6a10377256b85fb03ea7d1d2ede8c3.png

21、block-size

类似于 inline-size,只不过和 inline-size 刚好相反,block-size 默认设置的是 height 方向的值。

0a48733a070cde6029b0ef1f4dc7c0b1.png
原作者姓名: 寒水寺一禅
原出处:segmentfault
原文链接:那些不常见,但却非常实用的css属性(整理不易) - 个人文章 - SegmentFault 思否

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/529045.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机总是无法响应怎么办,电脑无响应是怎么回事 电脑无响应解决方法

电脑无响应是怎么回事?有时用户再操作过程中想在任务栏中切换窗口时&#xff0c;忽然发现点击任务栏中的图标没有任何反应了&#xff0c;就像系统死机一样&#xff0c;这就是Windows XP中常见的任务栏失去响应&#xff0c;又被称为“任务栏假死现象”。那么&#xff0c;如何唤…

2020身高体重标准表儿童_男女孩最新身高标准表,你家孩子达标了吗?(附增高秘籍)...

现在大家的生活水平提高了&#xff0c;和很多年前相比&#xff0c;孩子们的平均身高提高了不少&#xff0c;孩子能长成一个高个子&#xff0c;也是很多家长非常关注的事情。其实&#xff0c;要想孩子长高&#xff0c;除了营养要跟上以外&#xff0c;充足的睡眠、体重不要太胖都…

java 正则匹配_正则表达式真的很强大,可惜你不会写

专注于Java领域优质技术&#xff0c;欢迎关注本文旨在用最通俗的语言讲述最枯燥的基本知识文章提纲&#xff1a;元字符重复限定符分组转义条件或区间正则表达式在几乎所有语言中都可以使用&#xff0c;无论是前端的JavaScript、还是后端的Java、c#。他们都提供相应的接口/函数支…

河北大学计算机复试题,2016年河北大学综合卷计算机科学与技术学院之数据库系统概论复试笔试最后押题五套卷...

一、选择题1&#xff0e; 根据系统所提供的存取路径&#xff0c;选择合理的存取策略&#xff0c;这种优化方式称为( )。A. 物理优化B. 代数优化C. 规则优化D. 代价估算优化【答案】A【解析】物理优化是根据数据字典中的存取路径、数据的存储分布以及聚簇情况等信息来选择低层的…

python测验5 函数和代码_测验5: 函数和代码复用 (第5周)-单选题

1、以下选项不是函数作用的是&#xff1a;‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‫‬ A、 提高代码执行速度 B、 复用代码 C、 降低编程复杂度 D、…

石板切割问题c语言_广场地面铺装 仿古石 青石板 板岩 切割岩 冰裂纹压印混凝土地坪...

广场地面铺装 仿古石 青石板 板岩 切割岩 冰裂纹压印混凝土地坪广场地面铺装 仿古石 青石板 板岩 切割岩 冰裂纹压印混凝土地坪青石板是由青色的沉积岩劈制或者切割而成的板材&#xff0c;是天然板岩的一种&#xff0c;主要成分为石灰石、白云石。其比重约2.2~2.7克/立方厘米&a…

编程doc转html,Python批量将word转html,并将html内容发布至网站。

搜索热词下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家&#xff0c;也给大家做个参考。#codingutf-8__author__ zhmfrom win32com import client as wcimport osimport timeimport randomimport MysqLdbimport redef wordsToHtml(dir):#批量…

python分析工具有哪些_常用Python数据分析工具汇总

Python是数据处理常用工具&#xff0c;可以处理数量级从几K至几T不等的数据&#xff0c;具有较高的开发效率和可维护性&#xff0c;还具有较强的通用性和跨平台性。Python可用于数据分析&#xff0c;但其单纯依赖Python本身自带的库进行数据分析还是具有一定的局限性的&#xf…

python软件是什么原因引起的_Python对程序员重要的原因在哪里?

Python 之父Fredrik Haard最近发表了一篇“为什么Python对你如此重要”的文章&#xff0c;引起了开发者的热烈讨论。我相信Python对软件开发人员很重要。现今已经诞生了不少的编程语言&#xff0c;它们都有各自不同的特性&#xff1a;强大者如Lisp&#xff0c;快速如C&#xff…

大学计算机需要论文吗,关于大学计算机论文范文.docx

关于大学计算机论文范文一&#xff1a;大学计算机基础实验教学课程改革计算机基础是高校非计算机专业非常重要的一门公共基础课程&#xff0c;课程内容是大学生必须掌握的计算机基础知识和操作技能&#xff0c;是大学生走向工作岗位必备的基本素质。计算机基础知识的掌握与实际…

高并发编程_高并发编程系列:全面剖析Java并发编程之AQS的核心实现

在并发编程领域&#xff0c;AQS号称是并发同步组件的基石&#xff0c;很多并发同步组件都是基于AQS实现&#xff0c;所以想掌握好高并发编程&#xff0c;你需要掌握好AQS。本篇主要通过对AQS的实现原理、数据模型、资源共享方式、获取锁的过程&#xff0c;让你对AQS的整体设计有…

python怎么测试c代码_如何正确测试python中的C-API,C-API返回错误代码

我的设置 我正在使用Python中的pytest和ctypes测试C库中的函数。C库中的每个函数调用一个嵌入式linux PCI板上的函数&#xff0c;然后C库函数返回一个整数&#xff0c;该整数映射到一组返回代码。如果函数成功&#xff0c;则返回0&#xff0c;否则返回其他错误代码。在 问题 我…

计算机考试设计会议邀请函,计算机二级常见考点之使用合并技术制作邀请函

计算机01:37来自LearningYard学苑三月份的计算机二级考试即将到来&#xff0c;不知道各位童鞋准备得怎么样了呢&#xff0c;把握了多少。今天小编就给讲讲计算机二级MS office中常见的考核内容——使用合并技术制作邀请函。The computer second-level exam in March is coming …

添加一列_办公软件操作技巧023:如何给excel数据批量添加单位

在日常工作中&#xff0c;我们使用excel编辑电子表格时&#xff0c;经常需要给数据添加单位&#xff0c;单位是编制excel表格常用的元素&#xff0c;有时我们需要给一列数字都添加上单位&#xff0c;比如长度多少米&#xff0c;金额多少元&#xff0c;货物多少公斤等等&#xf…

html代码大全(很全的)_HTML教学(1):写一个属于自己的网址大全(新手版)

超文本标记语言&#xff08;Hyper Text Markup Language&#xff09;&#xff0c;缩写为HTML&#xff0c;标准通用标记语言下的一个应用。HTML不是一种编程语言&#xff0c;而是一种标记语言 &#xff08;markup language&#xff09;只要你打开浏览器&#xff0c;第一眼看到的…

清华大学计算机系高考生源,清华大学在这个高考大省录取人数创新高,网友:仍然是同分不同命...

在众多高考学子眼中&#xff0c;只有“两个学校”&#xff0c;一个是“清华、北大”&#xff0c;一个是“其他学校”&#xff0c;不仅是高考学子&#xff0c;清华、北大在众多人心目中也是十分神圣的。很多学生家长把考上清华、北大作为子女的唯一追求&#xff0c;认为只有考上…

list的contains方法为什么不好使_道理都懂,为什么我们还打不好网球?

中年人的悲哀在于&#xff0c;懂得很多道理&#xff0c;可依然过不好自己的一生。打网球亦是如此。——题记人到中年&#xff0c;有了一定的社会经验&#xff0c;也懂得了很多道理&#xff0c;可大部分人还是过不好自己的生活。正如打网球一样。盯准球、早点打、降低重心、保持…

docker公共存储库_Docker Hub公共镜像仓库的使用

Docker Hub目前 Docker 官方维护了一个公共仓库 Docker Hub&#xff0c;其中已经包括了数量超过 15,000 的镜像。大部分需求都可以通过在 Docker Hub 中直接下载镜像来实现。Docker Hub的功能Docker Hub被用于源代码管理集成&#xff0c;也用于构建和测试工具来加速部署周期&am…

html5登录界面源代码_最新版本尤娜博客已更新源代码(速拿!!!)

大家好&#xff0c;我是尤娜博客(una-boot)的作者树下魅狐&#xff0c;自2019年9月una-boot-1.0.0版本开源以来&#xff0c;陆续有热爱技术&#xff0c;钟爱技术写作的小伙伴为尤娜提出了宝贵的改进意见和建议&#xff0c;在此表示衷心的感谢&#xff0c;谢谢大家的支持&#x…

抓包红色_抓包三部曲 WebSocket 协议原理抓包分析

这篇文章通过抓包分析 WebSocket 协议的细节&#xff0c;学习一下 WebSocket 执行流程。1.WebSocket 流程说明(1)客户端和服务器之间完成三次握手建立 TCP 连接(TLS/SSL)握手。(2)客户端发起 HTTP 请求和服务器之间建立 WebSocket 握手。(3)WebSocket 连接建立之后&#xff0c;…