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

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

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 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) {
    ...
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

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

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

什么是层叠样式表?

层叠样式表(Cascading Style Sheets)简称CSS,它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容

美化修改radio、checkbox、select的样式

原理:大致原理都是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给<input>元素设置为透明,然后通过定位让用户看到的是<label>元素,利用css的原生属性来判断用户的操作,设置选中后的label样式

为什么css初始化中不推荐使用 *(通配符)

在进行css初始化的时候,因为我们图方便而使用了*{},为什么不推荐使用:这里我个人理解涉及到css权重问题,举例说明:

CSS设置滚动条样式

scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。scrollbar corner为横向和竖向的交叉角区域

如何用自己喜欢的 CSS 风格重置网站的样式

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。

css自定义checkbox样式

利用CSS3属性 appearance。该属性(强制)更改(改变)默认(原生)样式。Firefox 支持替代的 -moz-appearance 属性;Safari 和 Chrome 支持替代的 -webkit-appearance 属性;IE不支持该属性。

js怎么移除css样式?

在工作中,经常需要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的

CSS的文本格式化样式总汇

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

点击更多...

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

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

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