如何修复网页上的水平滚动
当你在网页排版的时候，有时候页面底部可能会跑出个水平滚动条，这通常就是因为有些元素拉宽超限了。为了找出这个“罪魁祸首”，你可以用一下通用选择器（*）搭配几条规矩来找茬。比如说，给所有元素都加上个红框子，这样就方便找到那些需要控制长度的元素！把它们适当调整一下宽度，也就顺带解决了影响到浏览体验的水平滚动条了。
通常来说，只要把元素的宽度调整回来或者干脆删掉多余的设定宽度，就能消掉那个讨厌的水平滚动条，让你看到的网页变得更顺眼！
* {
border: 2px solid red;
}
如何覆盖样式
有时候我们得把已经有的样式改掉，比如库里的那些或大样式表的特别地方。这时候就得用CSS specificity规则了。当覆盖样式时，你还能用个关键词!important来让特定样式强制出现。不过记住，这个!important会弄乱CSS级联特性，可能会让调试变得更复杂，所以尽量别用它。
.wave2 {
width: 1400px;
}
除了用!important之外，理解和熟练使用CSS的各种特性也是控制样式的关键！
如何制作正方形
如果想做个正方形又不想计较太多高度和宽度设定的话，直接给它选个漂亮点的背景色就行了。然后再把宽度和高度设成一样大小，你就能得到一个完美的正方形。当然了，根据需要调整这两个数字，也能做出长方形甚至其他各种形状。
如何使div居中
h1 {
color: #2ecc71 !important;
}
随着样式表越来越大，把div拉到中间对前端开发的小伙伴们有点儿头疼哈？想解决这个问题其实很简单！只需给div设定display: block; margin: auto;和width: less than 100%;就搞定~
如何移除盒子中额外填充
利用border-box属性，设定框宽和填充时，就不用担心出现多余的填充了，这让你更能掌握盒模型，精确布局。
如何制作首字下沉
.square {
background: #2ecc71;
width: 25rem;
aspect-ratio: 1/1;
}
用首字母伪元素就能做出漂亮的首字下沉！找到要用的HTML元素，再配上合适的样式就行了。
如何将文本设为大写或小写
在CSS里头，我们能直接把文字变大小写这样子的话，就算是全篇文章的字间距都能保持一致，还给咱们多了点让文章更加个性化的选择。
如何声明变量以保持CSS DRY
在CSS里设置变量，特别实用！你只需要动动手指，改换几个数值，就能轻松应对所有样式更改，而且还能让所有地方都发生相应变化。这样一来，你的CSS代码就会变得整洁利落，不需再重复编写同样的样式！
.center {
background-color: #2ecc71;
display: block;
margin: auto;
width: 50%;
height: 200px;
}
只要把变量放在主类里面，要用的时候，在属性值里用var()函数调出来就行了。
如何使用:before和:after选择器添加额外内容
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
记得用:before和:after选择器在CSS上加个小尾巴。比如，你想让某个东西出现在元素前头，就用: before；反之，要是想要在后头加上什么，那就要用: after了。这招儿在很多实际操作里都挺管用的！
如何使用纯CSS实现平滑滚动
用纯css就能搞定，不需要敲破脑袋写Javascript，或者找什么插件。这个办法特别合适给页面里的链接来个顺溜的滚屏动画效果！
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad laboriosam beatae corporis perferendis tempore consequatur sint rem quam, quae, assumenda rerum.
这就来跟大家分享10个能提高JS操作效率的小窍门！希望这几个小妙招能让你们在处理工作时更加得心应手，提高效率~
p.texts::first-letter {
font-size: 200%;
color: #2ecc71;
}
。
评论0