作为前端，在工作中难免会遇到排版方面的问题。下面是我整理的关于CSS的一些技巧，希望对大家有所帮助。1.每个单词的首字母大写。一般我们会用JS来实现。其实CSS就可以实现。JS代码：varstr='helloworld';str.replace(/(|^)[a-z]/g,(L)=>L.toUpperCase()HeoolWorldcssimplementation:text-transform:capitalize;（文本中每个单词以大写字母开头）属性text-transform的取值有：uppercase（全部大写）lowercase（全部小写）capitalize（首字母大写）none（默认）.check{color:red;}3.给相邻元素添加边框有时候我们设置border-top为一个元素，我们不想为第一个元素设置li+li{border-top:1pxsolidred;}4.多列等高显示：table;5.清除浮动显示的影响：flow-root;6.input的size属性当input的type类型为text/password时，size的属性值表示input可以容纳的字符数另外，size属性会告诉用户它的初始宽度，宽度以'px'的形式给出。7.position的sticky属性position的属性应该是absolute，fixed，static。让我介绍一下为你推导出一个新的属性stickyposition:sticky;设置sticky并给元素a(top,bottom,left,right)使用条件：1.父元素不能overflow:hidden或overflow:auto2.必须指定top,bottom,left,right3.高度父元素不能低于粘性元素抛出4.粘性元素只在其父元素内生效8.快速重置表单元素的原始按钮。原来的按键按键要重新设置很麻烦。你需要设置几个属性button{background:none;边框：无；颜色：继承；字体：继承；大纲：无；填充：0；}其实需要设置值button{all:unset;}9.textellipsis显示文本省略号。我相信每个人都经常使用它。这是不换行的情况/*指定内容文本中超出内容的省略号的显示，通常和上面的属性一起使用，因为没有上面的属性不会触发超出指定的内容*/}wrapdiv{overflow:hidden;文本溢出：省略号；显示：-webkit-box；/*将对象显示为弹性框*/-webkit-line-clamp:4;/*控制显示的最大行数*/-webkit-box-orient:vertical;/*设置或获取flexbox对象子元素的排列方式*/}10.设置文本两端对齐div{width:100px;填充：010px；背景：粉色；底部边距：10px；text-align-last：对齐；/*关键属性*/}11.给元素添加行高在给元素添加行高的时候，我们需要分别给每个元素添加p和h，其实我们可以直接给body添加正文{行高：1;}12、css首字母放大p:first-letter{display:block;向左飘浮;边距：5px5px00；红色;字体大小：1.4rem；background:#ddd;}13.去掉被点击链接的点框a{outline:noneoroutline:0}14.计算属性值div{width:calc(100%-100px)使宽度100%减去100px}15.内容可编辑
