CSS
coderxian
键盘敲烂,年薪百万
展开
-
CSS实现多行文本变省略号
overflow: hidden;display: -webkit-box; /* 仅适用Chrome浏览器内核 */-webkit-line-clamp: 2; /* 需要在第n行换行 */-webkit-box-orient: vertical;word-break: break-all; /* 遇到英文也进行换行 */原创 2022-04-19 14:28:07 · 177 阅读 · 0 评论 -
align-items和align-content区别详解
目录一、子项为单行时1.1 flex盒子不设置高度时1.2 flex盒子设置高度时二、子项为多行时2.1 flex盒子没有高度时2.2 flex盒子设置高度时三、拓展四、总结一、子项为单行时1.1 flex盒子不设置高度时初始状态如下flex盒子添加align-items: center时,结果如下结果:可以看到每个每个子元素都居中显示flex盒子添加align-content: center时,结果如下结果:和初始状态没有区别..原创 2021-11-05 19:23:53 · 833 阅读 · 0 评论 -
关于transform的一些拓展
一、盒子transform后对周围盒子的影响代码:<style> .box1, .box2 { width: 300px; height: 300px; } .box1 { background: #000; transform: translateX(100px) translateY(100px); }..原创 2021-11-02 16:29:35 · 224 阅读 · 0 评论 -
父盒子包子盒子时,父子盒子之间的缝隙问题
今天在写进度条案例时发现,父盒子下的子盒子宽高都设置了100%,子盒子依旧无法填满父盒子,有个约1px的缝隙;起初以为是圆角的问题导致有缝隙,后来我直接使用矩形盒子,依旧出现了同样情况。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g原创 2021-10-29 19:37:56 · 1177 阅读 · 0 评论 -
外边距塌陷问题导致子盒子绝对定位top属性出问题
body { position: relative;}.father { margin: 100px auto; width: 800px; height: 300px; background: #000;}.son { position: absolute; top: 100px; width: 500px; height: 100px; background: pink;}<div class="fa.原创 2021-10-28 22:31:37 · 184 阅读 · 0 评论 -
CSS样式建议书写顺序及原因
查阅相关资料后,整理出符合规范的书写顺序如下(1)定位属性:position display float left top right bottom overflow clear z-index(2)自身属性:width height margin padding border background(3)文字样式:font-family font-size font-style font-weight font-varient color(4)文本属性:text-align vertical原创 2021-10-26 21:19:50 · 111 阅读 · 0 评论