CSS小技巧收藏
CSS 技巧 收藏
2023-09-11 14:15:07 时间
居中对齐
很多时候我们需要把一个元素在其父级容器里水平、垂直居中对齐。以下我列出了常用的几种方法:
1.在知道子元素宽度与高度的情况下进行居中,采用位置定位:absolute + margin
.parent {
position: relative;
}
.child {
position: absolute;
width: 100px;
height: 60px;
top: 50%;
left: 50%;
margin: -30px 0 0 -50px;
}
2.在不知道子元素高与宽的情况下,采用位置定位:absolute + transform
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.采用flexbox进行居中对齐
.parent {
display: flex;
justify-content: center;
align-items: center;
}
选择某范围内的子元素
选择5-10的子元素
ul li:nth-child(n+5):nth-child(-n+10) {
background-color: red;
}
最佳适应图片
这段代码非常适用于给文章列表加缩略图的时候用,能最好的避免图片比例不协调的问题,统一排版。你可以随意更改width与height来查看效果。
.thumbnail {
width: 200px;
height: 150px;
background-image: url("https://s.yimg.com/uy/build/images/sohp/inspiration/sage3.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
占满全屏
.fullScreen {
width: 100vw;
height: 100vh;
}
自适应视频播放器
当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的,而且你在用手机浏览的时候视频播放器还变形了,以下代码自动让播放器按16:9的比例显示并自适应各个设备。
CSS代码:
.media-wrap {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML代码:
<div class="media-wrap">
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe>
</div>
相关文章
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
- C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 你所不知道的 CSS 动画技巧与细节
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- 【CSS】DIV左右并排不换行,且超出部分隐藏(示例代码招呼)
- Css之【字体系列】综合技巧总结(持续更新中...)
- CSS Modules 解决 react 项目 css 样式互相影响的问题
- CSS - 左右摇曳摆动动画(无限循环)
- Day8:html和css
- CSS模块化
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- CSS 居中(拿来主义自用)
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- CSS_css sprite原理优缺点及使用
- CSS阻塞渲染、怎么防止css阻塞
- CSS学习知识整理(六)Css position(定位)、margin 简写
- CSS学习知识整理(四)Css 盒子模型
- CSS之BFC
- css选择器顺序的小技巧
- Vue3 CSS渲染
- css有趣实用的技巧和一些冷门知识点