说一说最近在工作中常用的 css

以前很少写 css 样式，如今大批量的写，从最初的不适应到现在的习惯了。慢慢的我的 css 会越来越好的，只有在业务中我才知道自己哪些不会哪些不懂，结合业务学习才是检验真理最好的检验。块级元素负责结构，内联元素负责样式

样式

1.超出一行显示…

单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行：
display: -webkit-box;
-webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; //行数
overflow: hidden;


> 3.旋转 180 度

display: block; // 如果是行内元素，旋转会失效 transform: rotate(180deg);

> 4.通过 [text-align-last:justify](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last) 一段文本中最后一行两端对齐

.justify-text { li { margin-top: 5px; padding: 0 20px; width: 100px; height: 40px; background-color: $red; line-height: 40px; text-align-last: justify; color: #fff; &:first-child { margin-top: 0; } } }

> 4.通过 [text-align:justify](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align) 实现文本两端对其，对最后一行无效

div { text-align: justify; border: 1px red solid; width: 100px; } div:after { content: ‘’; width: 100%; display: inline-block; height: 0; }

## 画图

> 1.`css` 画一个倒三角

width: 0px; height: 0px; margin-left: 4px; border-top: 5px solid #222222; border-left: 5px solid transparent; border-right: 5px solid transparent;

width: 0; border: 10px solid; border-color: #222 transparent transparent;

`outline` 和 `border` 的区别：`outline` 不占据空间，`outline-raduis` 很多浏览器不支持

## flex

最后计算的被压缩的宽度：
500+400-900=300
500*2*n+400*n=300 => n=300/1400
LeftWidth = 500-500*(2*300/1400)
rightWidth=400-400*300/1400

最后计算出宽度

元素等分剩余宽度实现：父元素 display: flex;，子元素： flex:1

元素等分剩余高度实现：父元素 display: flex;flex-direction:column，子元素： flex:1

flex:1;相当于flex-grow: 1;flex-shrink: 1;flex-basis: 0%;

flex设置的第一值是指flex-grow,第二个是指 flex-shrink

当主轴发生了旋转，现在变成了从上到下（副轴变成了从左到右,flex-basis、flex-grow和flex-shrink现在作用于元素也会发生改变，（flex-direction:column作用的高度而不是宽度

flex-basis的优先级高于width，具体参考[Oh My God，CSS flex-basis原来有这么多细节](https://www.zhangxinxu.com/wordpress/2019/12/css-flex-basis/)

[CSS flex属性深入理解](https://www.zhangxinxu.com/wordpress/2019/12/css-flex-deep/)

[flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？](https://www.zhangxinxu.com/wordpress/2020/10/css-flex-0-1-none/)

## `css` 实现布局问题

> 1.页面文字内容是动态的，可能是几个字，也可能是是一句话，然后希望文字少的时候居中显示，文字超过一行的时候局左显示

更多文字

CSS： .box { padding: 10px; background-color: #cd0000; text-align: center; } .content { display: inline-block; text-align: left; }

原理是利用元素的包裹性:元素的尺寸由内部元素决定，但永远小于包含块容器的尺寸。也就是说实际上 `p` 元素的宽度一直都是由文字的大小撑开的，最大宽度不超过 `div` 的宽度。所以最后表现就是这样了

[text-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align)

> 2.`width:100%;` 是什么意思？？

继承父元素的宽度；如果父元素是 200px；子元素也就是 200px；相当于限制了元素的宽度

> 3.`max-width` 有什么用？

除了限制元素的最大宽度，还可能模拟 `scroll` 平滑的滚动

> 4.`height: 100%` 为何会失效？
> 有时候我们想要一张背景图片默认撑满全屏，可是有时候因为高度不够，总是撑不满，`height: 100%` 没有用，除非设置 `html body` 的 `height: 100%` 才有用。因为浏览器先渲染父元素在渲染子元素，父元素的高度没有设置的具体的值，子元素会撑开父元素的高度，即子元素高度就是父元素高度。

> 5.`min-width>max-width>!important` 优先级关系，没想到吧，哈哈哈

> 6.内联元素的 `padding` 在垂直方向是有影响的，只是我们眼睛看不出，如果用 `border: 1px red solid` 是能看出效果的

> 7.一层元素实现三道杠
> 利用 `background-clip`

.icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; background-clip: content-box; }

> 8.花一个带加号的上传按钮

.add { border: 2px dashed; position: relatie; overflow:hidden; width: 75px; height: 75px; color: #ccc; transition: color .25s display: inline-block; } .add:hover { color: #34538b; } .add::before, .add::after { content: ‘’; position: absolute; top: 50%; left: 50%; } .add::before { width: 20px; border-top: 4px solid; margin: -2px 0 0 -10px; } .add::after { height: 20px; border-left: 4px solid; margin: -10px 0 0 -2px; } ```

禁止用户选择页面的文字或者图片: user-select : none

清除 ios 上输入框默认有内部阴影: -webkit-appearance: none

禁止保持或拷贝图片: -webkit-touch-callout:none

输入框默认字体颜色: input::-webkit-input-placeholder{color:red}

用户设置字号放大或者缩小，导致页面布局错误（在工作中做晓程序的时候遇到过）: text-size-adjust:100%!important

android 系统中元素被点击时产生边框: -webkit-tap-hightlight-color:rgba(0,0,0,0);-webit-user-modify:read-write-plaintext-only;

title 表示元素的标题，在 pc 端浏览器，鼠标 hover 会显示相关的提示

自定义属性 data- 使用场景：搜索过滤内容， css 设置指定的属性。获取自定义属性 dataset

form 表单阻止默认的表单提交事件在 form 上面加上属性 is="form-prevent"

微信 QQ 里面的对话框，我们可以用 dir 改变流的方向实现

block和inline-block的区别

这个是工作的时候张老师和我提到的一个知识点，后来我查文章，写demo 自己再看看

说一点与众不同的吧，inline-block 会出现块下沉。当你多个内联块级元素并排出现且文字内容长短不一样的时候，这时候就会出现某一个块下沉。原因是baseline 在作祟

inline-block之后意外发现块下沉

inline-block的块下沉，间距问题，问题原理

自己写了一个demo