你未必知道的css技巧(值得收藏!!!)

最新推荐文章于 2021-10-26 20:20:26 发布

大鱼吃小鱼7

最新推荐文章于 2021-10-26 20:20:26 发布

阅读量768

点赞数 1

分类专栏：深入了解css 前端学习文章标签： css技巧未必知道线性渐变负边距 BFC

本文链接：https://blog.csdn.net/qq_37210523/article/details/102570398

版权

前端学习同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

深入了解css

7 篇文章 0 订阅

订阅专栏

01.【负边距】?负边距的效果: 左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似.

02.【shape-outside】定义非矩形的形状,

在这里插入图片描述
参考MDN:shape-outside

03.【BFC应用】?BFC应用之阻止外边距合并（margin collapsing）

在外层/包裹层上添加 overflow:hidden; 里层的外边距不会被合并.

04. 【BFC应用】?BFC应用之消除浮动的影响

在包裹层添加display:flow-root, 可以防止子元素的浮动影响.
参考文档:display:flow-root

05.【flex不为人知的特性之一】?flex布局下margin:auto的神奇用法

html:

 <div class='test'>
    <span> 1 </span>
    <span> 2 </span>
    <span> 3 </span>
    <span> 4 </span>
    <span> 5 </span>
  </div>

(1)设置子元素span 为margin:auto;

在这里插入图片描述

(2) 设置第五个span为margin:auto;

在这里插入图片描述

(3)设置第五个span为margin-left:auto;

在这里插入图片描述

(4)设置第一个span为margin-right:auto;

在这里插入图片描述

(5)设置第三个span为margin:auto;

在这里插入图片描述

(6)设置第三个为margin-left:auto, 设置第三个为margin-right:auto;

在这里插入图片描述

06.【flex不为人知的特性之二】?flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部

注: 05的html结构.

(1) 设置span为flex-grow:0.1;

在这里插入图片描述

(2)设置第一个span为flex-grow:0.9;

在这里插入图片描述

07.【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外，其默认宽度取决于size特性的值

(1)给input设置display:block;

在这里插入图片描述

(2)给input设置width:100%;

在这里插入图片描述

08.【定位特性】?绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度;

09.【层叠上下文】?层叠上下文:子元素的层级取决于父元素.

html结构:

<div class='test'>
  <div>
    <div class='inner'>1</div>
  </div>
  <div>2</div>
</div>

关键css:


```javascript
div:nth-child(2){
  margin-top:-70px;
  margin-left:30px;
} //使两个div层叠


```javascript
div:first-child, div:nth-child(2){
  position:relative;
  z-index:1;
}//设置div层级

 div:first-child>.inner{
  position:absolute;
  z-index:999;
}//子元素div设置高于父元素的层级

在这里插入图片描述

10.【粘性定位】?position:sticky，粘性定位要起作用，需要设置最后滞留位置(指定 top, right, bottom 或 left 四个阈值其中之一)。chrome有bug，firefox完美

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景.
元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。
而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

参考文档:使用 position:sticky 实现粘性布局

11.【相邻兄弟选择器】?相邻兄弟选择器之常用场景

ul>li+li{
       border-top:1px solid  red;
}

在这里插入图片描述

12.【背景透明度】rgba可以代替opacity

background:black; opacity:0.5; 效果等同于 background:rgba(0,0,0,.5);

13.【绘制三角形】?css绘制三角形的原理

.triangel{
    width:0;
    border-style:solid;
    border-color:red green blue yellow;
    border-width:100px;
}

在这里插入图片描述

(1) 设置 border-color:red transparent transparent transparent; 需要朝下的三角形, 则设置除上边之外的为透明效果, 其他以此类推.

在这里插入图片描述

(2)设置border-width:120px 0 100px 100px; 通过设置上右下左四个方向的宽度可以控制三角形的形状.

在这里插入图片描述
参考文档:用CSS绘制三角形

14.【table布局】?display:table实现多列等高布局

外包裹设置为display:table; border-spacing:30px 0;
子元素设置为display:table-cell;
在这里插入图片描述

15.【颜色对比度】❣在chrome的开发者工具中, 点击颜色缩略图可以自由调试颜色.

在这里插入图片描述

16.【定宽高比】♥css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度.

17.【动画方向】?动画方向可以选择alternate，去回交替进行.

animation:move 2s linear infinite;
animation-direction:alternate;

18.【线性渐变应用】?css绘制彩带的原理

background:repeating-linear-gradient(90deg,red, red 40px,blue 40px,blue 80px);

在这里插入图片描述
在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右; 颜色值没有限制, 可以使用多种颜色; 可以通过百分比调整颜色值位置.
参考MDN: linear-gradient

19.【隐藏文本】?隐藏文字内容的两种办法

(1) 设置text-indent:-2000px;

(2) 设置font-size:0; (推荐)

20.【居中】?实现居中的一种简单方式

外包裹设置 display:flex;
子元素设置margin:auto;
在这里插入图片描述

21.【角向渐变】?新的渐变：角向渐变。可以用来实现饼图.

border-radius:50%;
background:conic-gradient(red 0 30%,green 30% 60%,blue 60% 100%);
在这里插入图片描述

22.【背景位置百分比】?background-position百分比的正确理解方式：图片自身的百分比位置与容器同样的百分比位置重合.

{
 width:400px;
    height:200px;
    background-color:#0ff;
    background-image:url(test.png);
    background-position:75% 40%;
}

效果如下:

在这里插入图片描述

23.【背景重复新值】?background-repeat新属性值：round和space。前者表示凑个整，后者表示留点缝.

background-repeat:round;

效果如下:
在这里插入图片描述

background-repeat: space;

效果如下
在这里插入图片描述

24.【背景附着】?background-attachment指定背景如何附着在容器上，注意其属性值local和fixed的使用

fixed: 背景相对于视口内固定
local: 背景相对于元素的内容固定;
scroll: 背景相对于元素本身固定，而不是随着它的内容滚动.
参考MDN: background-attachment

25.【动画延时】?动画添加延迟时间可以使步调不一致.

外层包裹div: animation:move 2s linear infinite alternate;

div:nth-child(2n+1){
    animation-delay:2s;
}

26.【outline使用】?可以使用outline来描边，不占地方，它甚至可以在里面

border:10px dashed red;
outline:10px dashed black;
outline-offset:-20px;

效果如下:
在这里插入图片描述

27【背景定位】?当固定背景不随元素滚动时，背景定位是相对于视口的.

28【tab-size】?浏览器默认显示tab为8个空格，tab-size可以指定空格长度.

tab-size:2;

在这里插入图片描述

29【动画暂停】?CSS动画其实是可以暂停的.

div{
     animation:rotate 1s linear infinite;
}
div:hover{
    animation-play-state:paused;
}

30【object-fit】?图片在指定尺寸后，可以设置object-fit为contain或cover保持比例.

object-fit:contain;

在这里插入图片描述

object-fit:cover;

在这里插入图片描述
参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

31【鼠标状态】?按钮禁用时，不要忘了设置鼠标状态

button:disabled{
  background:#a0cfff;
  cursor:not-allowed;
}

效果如下:
在这里插入图片描述

32【背景虚化】?使用CSS滤镜实现背景虚化

filter:blur(2);

效果: 像蒙上一层阴影;
参考MDN: filter

33【fill-available】?设置宽度为fill-available，可以使inline-block像block那样填充整个空间

  display:inline-block;
  width:100%;
  box-sizing:border-box;
  同等效果:  width:-webkit-fill-available;

34【fit-content】?设置宽度为fit-content，可以使block像inline-block那样实现收缩宽度包裹内容的效果

参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/width

35【自定义属性】?CSS自定义属性的简单使用.

–percent:50%;
div{
height:10px;
border-radius:5px;
border:1px solid;
background-image:linear-gradient(#0ff,#0ff);
background-repeat:no-repeat;
background-size:var(–percent)
}

效果如下:
在这里插入图片描述

36【min-content/max-content】?可以设置宽度为min-content和max-content，前者让内容尽可能地收缩，后者让内容尽可能地展开.

width:min-content;

在这里插入图片描述

width:max-content;

在这里插入图片描述
参考MDN: width

37【进度条】?使用渐变，一个div实现进度条

在这里插入图片描述
效果如下:

参考MDN: radial-gradient

38【打印】?可以在打印网页时，设置page相关属性.

page-break-before :调整当前元素之前的分页符;

@media print {
  section {page-break-before: always;}
}

参考文档: https://www.html.cn/archives/4731

39【逐帧动画】?利用CSS精灵实现逐帧动画

在这里插入图片描述

40【resize】?普通元素也可以像textarea那样resize

horizontal: 允许用户在水平方向上调整元素的大小。
vertical: 允许用户在垂直方向上调整元素的大小。
参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

41【面包屑】?使用before伪元素实现面包屑.

li:before{
  content:'\27a5';
}
li:first-child:before{
  content:' ';
}

效果如下:
在这里插入图片描述

42【sticky footer】?使用grid布局实现sticky footer

.wrap{
  min-height:100%;
    display:grid;
    grid-template-rows:auto 1fr auto;
}

效果如下:
在这里插入图片描述

43【动画填充状态】?CSS可以设置动画开始前和结束时所保持的状态

在这里插入图片描述

44【动画负延迟】?CSS动画可以设置延迟时间为负数，表示动画仿佛开始前就已经运行过了那么长时间

div{
    height:10px;
    border:1px solid;
    border-radius:10px;
    background-image:linear-gradient(#0ff,#0ff);
    background-repeat:no-repeat;
    animation:move 5s linear infinite;
    animation-play-state:paused;
    animation-delay:-1s;
}

待更新中…

本文参考: 你未必知道的49个css技巧
 你未必知道的CSS知识点（第二季）

大鱼吃小鱼7

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
你未必知道的css技巧(值得收藏!!!)

01.【负边距】????负边距的效果: 左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似.02.【shape-outside】定义非矩形的形状,参考MDN:shape-outside03.【BFC应用】????BFC应用之阻止外边距合并（margin collapsing）在外层/包裹层上添加 overflow:hidden; 里层的外边距不会被合并.04. 【BFC应用...
复制链接

扫一扫