![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
风里有诗句哈
有事请私信
展开
-
CSS好用的技巧
移动端使用vw定制rem自适应布局(不兼容低版本移动端系统)/* 基于UI width=750px DPR=2的页面 */html { font-size: calc(100vw / 7.5);}原创 2020-03-18 10:05:34 · 141 阅读 · 0 评论 -
通用sass样式汇总
// 当超过宽度时,显示省略号@mixin ell() { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; display: inline-block;}// 利用绝对定位后margin自适应实现水平垂直居中,兼容IE6+@mixi...原创 2019-09-15 17:13:11 · 1137 阅读 · 0 评论 -
通用css和sass样式汇总
// 当超过宽度时,显示省略号@mixin ell() { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; display: inline-block;}// 当超过n行时,显示省略号@mixin elln($n) { over...原创 2019-11-06 13:26:54 · 596 阅读 · 0 评论 -
滚动条样式修改
#tab1tree2::-webkit-scrollbar { width: 3px;}#tab1tree2::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}#ta...原创 2019-10-22 14:15:55 · 192 阅读 · 0 评论 -
移动端高分辨率适配
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWi...原创 2019-09-09 18:02:00 · 283 阅读 · 0 评论 -
CSS世界精选
目录基本概念流块级元素和内联元素width: auto 和 height: auto外在盒子和内在盒子css权重和超越`!important`盒模型(盒尺寸)内联盒模型替换元素盒模型四大金刚contentpaddingmarginborder好基友`line-height`和`vertical-align`字母 x 的角色line...原创 2019-08-08 12:58:07 · 487 阅读 · 0 评论 -
Flex 布局教程:语法篇
一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webki...转载 2019-03-06 20:25:03 · 196 阅读 · 0 评论 -
BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,需要先介...转载 2019-02-25 20:40:22 · 132 阅读 · 0 评论 -
浮动后的 <li> 如何在 <ul> 中居中显示?
只要 ul 的父元素 css 样式设置了 text-align: center; 然后 ul 设置了 display: inline-block; 因为li浮动后变成了inline-block,所以不需要设 置display: inline-block; 就可以了。html标签<div id="header"> <ul> <...原创 2019-03-04 22:44:52 · 2292 阅读 · 0 评论 -
CSS详解水平和垂直居中
水平居中行内和行内块级元素水平居中text-align: center;一个块级元素水平居中或多个块级元素竖直排列水平居中margin: 0 auto;多个块级元素横向排列水平居中设置父元素flex布局display: flex;justify-content: center;垂直居中行内和行内块级元素垂直居中1.子元素使用相同内边距撑开父元素...原创 2019-03-01 10:31:22 · 258 阅读 · 0 评论