资讯专栏INFORMATION COLUMN

常用前端布局,CSS技巧介绍

Rocture / 1431人阅读

摘要:不推荐,特别是九宫格通过来实现。有一定的兼容性问题元素高度可变,需要元素内部元素水平垂直居中主要是垂直方案通过实现,给最外部元素,同时添加一个次外层元素设置,这时第三层的元素即可垂直居中。

常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍

css常用技巧之可变大小正方形的绘制
1:若通过设置width为百分比的方式,则高度不能通过百分比来控制.
在这个地方可以使用padding来实现,首先,元素的高度=height+padding*2+border*2;所以我们可以将widht设置为0,
然后用padding来实现盒子的高度(若元素padding的值是一个百分比,则是基于其父元素的宽度来计算的)
    width: 50%;
    height: 0;
    background: red;
    padding-bottom: 50%;
2:通过在元素中添加一个正方形的图片实现,设置图片宽度100%,高度auto,元素不设置高度即可。(不推荐,特别是九宫格)

3:通过vw,vh来实现。(有一定的兼容性问题)

元素高度可变,需要元素内部元素水平垂直居中(主要是垂直)方案
1:通过display:table实现,给最外部元素display:table,同时添加一个次外层元素 
设置display:table-cell,vertical-align: middle;这时第三层的元素即可垂直居中。
.container { display:table; widht:50%; height:50vw; } .center { display: table-cell; vertical-align: middle; } .center > span { display: block; widht: 20px; height: 20px; background: #ff0000; margin: 0 auto; }
2:通过flex布局,父元素设置为justify-content:center,align-items:center;

3:通过grid布局,父元素设置为justify-content:center,align-items:center;

4:通过position + transform(margin)实现,如果使用margin则需要知道子元素的宽高且这个宽高不可变(这是由于magin如果设置为百分比是基于父元素的widht来计算的),
如果使用transform则没有这个限制(transform的值是基于元素本身的widht和height来计算的),但又一点兼容的问题(推荐使用transform的方式)
.parent { width: 200px; height: 200px; position: relative; background: yellow; } //transform: translate(-50%, -50%); .child { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -50px; background: green; }
对于单行文本和多行文本超出部分 ...
//注意是单行文本可用

这时一段单行文本

.text{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; } //多行文本 需要注意盒子的高度要调整适当,不然会出行最后一行文字只显示一半的情况 //该方法适用于WebKit浏览器及移动端

这时一段多行文本

.text{ height: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
自定义文本选择样式

Select some of this text.

//全局设置选中文本样式 ::selection { background: aquamarine; color: black; } //针对某个class设置 .custom-text-selection::selection { background: deeppink; color: white; }
杂项
//文字阴影
text-shadow: 1px 1px #ad6969;

//CSS3 filter(滤镜) 属性
fliter: blur(50px); //设置高斯模糊 单位px 会导致边缘变大
filter: grayscale(100%); //灰度100%
filter: brightness(150%) //设置亮度
filter: contrast(180%);  //设置对比度
...

clip: rect(0,0,0,0)  //元素剪切(只在定位元素中生效)

cubic-bezier属性 三阶贝塞尔曲线 用户控制动画速度
用法:transition: transform 1s cubic-bezier();

user-select: none; //文本不能选择
css变量使用
//基础用法

var-dynamic

.body { --customize-height: 100px; } .var-dynamic { height: var(--customize-height); } //扩展高级 通过js来控制css中的变量值

var-dynamic

.var-dynamic { height: var(--customize-height); } //和less sass等预处理器的变量比较 1:预处理器的变量不是实时的,在media中试图改变变量的值是不可行的,css变量可以 2:不继承,不级联

查看详情

border为1像素的边框
//由于设备的dpr不同,我们设置的1px边框在不能的设备中呈现的效果不一。
//那么通过设备dpr来设置不同的border的值不可以吗?
//我们需要知道border-widht的最低值为1px,低于1的无效

//使用 box-shadow: 0 0 0 0.5px; 来处理
//Browser Support 95.5%

.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}
对于列表元素针对某个元素的样式做多带带处理(:not 选择器)
//对每个li元素 添加右border 最后一个不加
  • One
  • Two
  • Three
  • Four
//传统解决 li { border-right: 2px solid #d2d5e4; } li:last-child { border-right: none; } //简洁写法 li:not(:last-child) { border-right: 2px solid #d2d5e4; } //关于not的其他写法 li:not(.a) //not中放入其他选择器 ui:hover li:not(:hover) { opacity: 0.5; }
css三角形的绘制
//通过border的方式间接实现 .triangle { width: 0; height: 0; border-top: 20px solid #333; border-left: 20px solid transparent; border-right: 20px solid transparent; } //css3 clip-path裁剪属性 clip-path: polygon(50% 0px, 100% 100%, 0px 100%);
一个小小的loading动画
@keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donut { display: inline-block; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #7983ff; border-radius: 50%; width: 30px; height: 30px; animation: donut-spin 1.2s linear infinite; }
css实现switch



.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all 0.3s;
}
.switch::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
}
input[type="checkbox"]:checked + .switch::after {
    transform: translateX(20px);
}
input[type="checkbox"]:checked + .switch {
    background-color: #7983ff;
}
.offscreen {
    position: absolute;
    left: -9999px;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53242.html

相关文章

  • 常用前端布局CSS技巧介绍

    摘要:不推荐,特别是九宫格通过来实现。有一定的兼容性问题元素高度可变,需要元素内部元素水平垂直居中主要是垂直方案通过实现,给最外部元素,同时添加一个次外层元素设置,这时第三层的元素即可垂直居中。 常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 showImg(https://segmentfault.com/img/bVbjkih); css常用技...

    EsgynChina 评论0 收藏0
  • HTML-CSS-JS

    摘要:本周于上海闭幕,掘金和知乎上都有对应的实录和问答,但会议的视频目前都还没放出来,有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主,有业界大牛,也有小鲜肉,也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

    mikasa 评论0 收藏0
  • HTML-CSS-JS

    摘要:本周于上海闭幕,掘金和知乎上都有对应的实录和问答,但会议的视频目前都还没放出来,有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主,有业界大牛,也有小鲜肉,也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

    李世赞 评论0 收藏0
  • HTML-CSS-JS

    摘要:本周于上海闭幕,掘金和知乎上都有对应的实录和问答,但会议的视频目前都还没放出来,有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主,有业界大牛,也有小鲜肉,也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

    MudOnTire 评论0 收藏0
  • css - 收藏集 - 掘金

    摘要:绝对底部前端掘金来自国外的设计达人,纯,可以实现当正文内容很少时,底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

    phpmatt 评论0 收藏0

发表评论

0条评论

Rocture

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<