整理一些少用但又实用的 CSS 样式

时间: 2019-06-10阅读: 132标签: 样式

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式


::-Webkit-Input-Placeholder

input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder属性来改。

小Tips: 配合 opacity 属性使用效果更佳哦!


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}


@Impor 嵌套样式表文件

使用它可以在样式表再次内嵌套样式表文件,比如一些组件 CSS可以使用,但不太推荐使用这个,因为加载时有可能会被漏掉。

@import url("reset.css");
@import url("global.css");  
@import url("font.css");


Outline 当点击Input元素时显示的当前状态线(外发光)


这个状态线是用来提示用户当前状态指示作用,但因为效果很美观,建议去掉,或自己改个样式

div {
    outline: none; //移动浏览器默认的状态线
    // outline: 5px dotted red; 也可以设置样式
}


Contenteditable 设置Element是否可编辑

<p contenteditable="true">可编辑</p>


Webkit-Playsinline

手机video 都可以在页面中播放,而不是全屏播放了。

<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>


Position: Absolute, 让Margin有效的

设置left:0, right:0 就可以。原因是2边都是0不存在边距,element就可以得出距离,并居中。

div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}


使用 Clearfix 清楚浮动,解决父类高度崩塌。

.clearfix {
	zoom: 1;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }


User-Select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}


清除手机Tap事件后Element 时候出现的一个高亮

*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


::-Webkit-Scrollbar-Thumb

可以修改谷歌的滚动条样式,safari好像也可以


-Webkit-Appearance:none

  1. To apply platform specific styling to an element that doesn’t have it by default
  2. To remove platform specific styling to an element that does have it by default

移除浏览器默认的样式,比如chrome的input默认样式

input, button, textarea, select {
	*font-size: 100%;
	-webkit-appearance:none;
}


CSS开启硬件加速

-webkit-transform: translateZ(0);


使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug

-webkit-backface-visibility: hidden;


-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;


Transform-Style: Preserve-3d 让元素支持3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}


Perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {
	perspective: 400px; 
}


Css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;


Box-Sizing 让元素的宽度、高度包含Border和Padding

{
    box-sizing: border-box;
}


Calc() Function, 计算属性值

div {
    width: calc(100% - 100px);
}

上面的例子就是让宽度为100%减去100px的值,项目中很适用,要IE9以上兼容。


Css3 Linear-Gradient 线性渐变

默认开始在top, 也可以自定义方向。

div {
    linear-gradient(red, yellow)
}

background: linear-gradient(direction, color-stop1, color-stop2, ...);


常用的选择器 :Nth-Child() Selector

以下代码是选择父类下第一个子节点,p元素,建议学习这个样式属性的使用,很实用的。

p:nth-child(1) {
    ...
}

链接: http://www.fly63.com/article/detial/3634

CSS的文本格式化样式总汇

长度单位:像素 px;像素是我们在网页中使用的最多的一个单位,* 一个像素就相当于我们屏幕中的一个小点,百分比 %:也可以将单位设置为一个百分比的形式

css实现文本底部添加下换线

最近在开发项目,针对小程序前端,显示文本需要添加下划线问题,起初是通过border-bottom:1rpx solid #eee; 进行编写,但是总是觉得线的高度过于粗,移动端最小单位值是 1 即:1rpx 1px,高度设置0.3是不生效的

css样式的引入方式总汇

首选来介绍一下什么是CSS?(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言,其实就是一种层叠样式表。CSS不仅可以静态地修饰网页

为什么要初始化css样式?

为什么要初始化css样式1.浏览器差异:不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量;如果不初始化,整个页面做完会很糟糕,重复的css样式很多

vue单页面修改样式无法覆盖问题

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下css有关层叠方面的资料,解决了这个问题,这里记录一下

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

vue用v-html加载渲染,里面的内容样式不生效

需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效

css单行截断和多行截断问题

多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~

css样式的继承性、层叠性 、优先级

css样式的继承性:给父元素设置一些属性,子元素也可以使用。应用场景:一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全