课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
css样式表是我们在学习网页设计的时候需要重点掌握的编程代码之一,而随着浏览器的增加,我们在跨浏览器设计上也需要考虑更多的因素,下面就开始今天的主要内容吧。
1.重置button和input元素的背景
添加按钮时,重置它的背景,否则在跨浏览器时它的呈现会有所不同。
2.Overflow:scroll和auto
为了限制一个元素的高度并允许用户在其中滚动,添加overflow:scroll-y。在macOS下的Chrome中,这看起来不错,但是在Windows下的Chrome中,滚动条始终存在(即使内容很短)。这是因为scroll-y会无视内容,一直显示滚动条。而overflow:auto只在需要的时候才会显示滚动条。
3.添加flex-wrap
要想让一个元素表现得像弹性容器那样,只需添加display:flex。但是,如果没有添加flex-wrap,那么当屏幕尺寸缩小的时候,将会出现水平滚动条。
4.当弹性项目数量不定时,不要使用justify-content:space-between
对一个弹性容器应用justify-content:space-between时,它会为元素分配空间,使它们互相之间的距离相等。
5.长词和链接
在手机屏幕上浏览文章的时候,一个长词或者内联链接可能会导致页面出现水平滚动条。使用CSS的word-break可以防止这个问题。
6.透明渐变
当使用透明起点和终点添加渐变的时候,在Safari下会呈现一片漆黑。这是因为Safari无法识别关键字transparent。通过使用rgba(0,0,0,0)来替代它,我们可以达到预期的效果。
7.CSS网格布局中关于auto-fit和auto-fill差异的误解
在CSS网格布局中,repeat函数可以在不使用媒体查询的情况下创建响应式列布局。为此,可以使用auto-fill或者auto-fit。
8.当视窗高度不足时将元素固定在屏幕顶部
如果你在视窗不够高的时候将一个元素固定在屏幕顶部,会发生什么事呢?很简单:它将占用屏幕空间,终导致可供用户浏览网站的垂直区域变得很小、很不舒服,影响他们的体验。
【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。