总结Css 常用的操作

2020-01-10 15:38:45

语法：white-space: nowrap| pre | pre-wrap | pre-line | inherit

nowrap：单行文本不换行，文本显示一行；
pre: 保留空白(在游览器显示时，保留空格)；
pre-wrap: 保留空白序列，正常换行；
pre-line: 合并空白符序列，但是保留换行符;
inherit: 继承父级元素white-space 属性的值；

语法：text-overflow：clip | ellipsis | string

clip: 裁剪文本；
ellipsis：省略号的形式替代被裁剪的文本；
string: 使用制定的字符来替代被裁剪的字符(且支持火狐浏览器)；

div {    white-space: 'nowrap';     overflow: hidden;     text-overflow: ellipsis;}

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

多行文本溢出掩藏

语法：display: -webkit-box ，将对象作为弹性伸缩盒子模型显示；

语法：-webkit-line-clamp：number

-webkit-line-clamp：限制一个块元素显示文本的行数(number)

语法：-webkit-box-orient：horizontal | vertical | inline-axis | block-axis

设置或检索伸缩盒对象的子元素的排列方式：

horizontal：盒子水平布局其内容；
vertical：盒子垂直布局其内容；
inline-axis：盒子沿内联轴展示其子元素；
block-axis：盒子沿块轴展示其子元素；

div {    overflow: hidden;      text-overflow: ellipsis;      display: -webkit-box;      -webkit-line-clamp: 2;      -webkit-box-orient: vertical;}

实现三角形的效果(向上)

transparent：表示设置为透明

.triangle {      width: 0;      height: 0;      border-right: 20px solid transparent;      border-left: 20px solid transparent;      border-bottom: 20px solid red;  }

css3 实现垂直居中

语法：display:flex,justify-content:center, align-items: center

display:flex,设置弹性布局显示；
justify-content: center, 设置子元素水平居中；
align-items: center, 设置子元素垂直居中；

div {    display: flex;      justify-content: center;      align-items: center;}

css3 实现阴影效果

语法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平阴影位置(必选)，允许负值；
v-shadow：垂直阴影的位置(必选)，允许负值；
blur：模糊距离(选填)；
spread: 阴影大小(选填)；
color:阴影颜色(选填)；
inset: 从外层的阴影（开始时）改变阴影内侧阴影(选填),默认是外阴影；

div {  box-shadow: 2px 2px 2px 2px #f00 inset;}

css3 实现圆角效果

语法：border-radius: number px; number 为数字

border-radius可设置多个值；
一个值：表示四个圆角都相同；
二个值：个值为右上和左下圆角的值，第二个值为右下和左上圆角的值；
三个值：个值为左上圆角的值，第二个值为右上和左下圆角的值，第三个值为右下的值；
四个个值：个值为左上圆角的值，第二个值为右上，第三个值为右下的值，第四个为左下圆角的值；

div {   border-radius: 30px;    /*border-radius: 10px 30px*/   /*border-radius: 10px 20px 30px*/   /*border-radius: 10px 20px 30px 40px*/}

css3 实现文本效果

语法：text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值；
v-shadow：必需。垂直阴影的位置。允许负值；
blur：可选。模糊的距离；
color：可选。阴影颜色；

div {    text-shadow: 2px 2px 2px #F00;}

css 伪类first-letter

语法： first-letter表示向段落文本个字符添加特殊样式

div:first-letter{    font-size: 50px;    color:#f00;    ........}

css 伪类first-line

语法： first-line表示向文本的首行添加特殊样式

div:first-line {    font-size: 50px;    color:#f00;    ........}

css 跨游览器透明

兼容IE8及以下版本

div{    width: 200px;      height: 200px;      background: #00B7FF;      opacity: 0.5; /*标准游览器*/      filter: alpha(opacity=50);/*IE低版本 8*/}

css3 图片裁剪

语法：object-fit: contain | cover | fill | none | scale-down

contain: 缩放内容，保持内容的宽高比；
cover: 填充整个内容框，保持内容宽高比，如果对象的宽高比与内容框不匹配，该对象将裁剪以适应内容宽；
fill: 填充整个内容框（默认值），不保持原有比例；
none: 保持图片宽高不变；
scale-down: 当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致；

div img {    width:;    height:;    object-fit: cover;}

设置 input placeholder 的颜色

div::-webkit-input-placeholder {color: #999} div:-moz-placeholder { color: #999} div::-moz-placeholder {color: #999} div:-ms-input-placeholder {  color: #999}