![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
zzzmj_
NYOJ主页
https://acm.nyist.edu.cn/JudgeOnline/profile.php?userid=Leida_%E6%9C%B1%E6%A8%A1%E5%81%A5
展开
-
less使用变量减少伪类:nth-child代码
原有的代码 &:nth-child(1){ margin-top: 0; h4 { top: auto; bottom: 596 / @s; } .fixed h4{ top: 100 / @s; } } &:nth-child(2){ h4 { top: auto; bottom: 465 / @s; } .fixed h4{ t原创 2020-12-31 10:19:51 · 1349 阅读 · 0 评论 -
CSS 清除浮动原理详解
CSS 清除浮动原理详解 一. 浮动float float属性的本质是用来实现文字环绕效果的。 它有一个很大的副作用:会导致父容器的高度坍塌 疑问: 那么将父容器固定高度有用吗? 没用,因为只要浮动元素的区域超过了这个高度,依旧会出现环绕效果影响布局 那么怎么解决这个问题呢? 清除浮动方法很多,但本质上只有两种方法 使用clear清除浮动 形成BFC 1.1 使用clear清除浮动 cle...原创 2019-02-17 23:14:58 · 600 阅读 · 0 评论 -
实现左侧固定宽度, 右侧自适应的两栏布局常见方法
两栏布局方案 实现左侧固定, 右侧自适应的布局方案, 常见的几种, 写了一个各个方案实现效果的Demo, 可以通过这里查看: 预览 首先统一html结构 <div class="container"> <div class="left"> <p>这是左边的盒子</p> </div> &原创 2019-02-26 22:09:24 · 173 阅读 · 0 评论 -
CSS 三栏布局之圣杯布局和双飞翼布局
CSS 三栏布局之圣杯布局和双飞翼布局 主要介绍两种, 圣杯布局和双飞翼布局 两者都是实现左右两栏固定宽度, 中间自适应的三栏布局. 写了两个Demo, 实现了两种布局的效果, 点击可以预览 圣杯布局 双飞翼布局 其实flex可以很方便的解决这种布局方案, 但是这些常见的布局方案还是需要了解, 毕竟现在flex还没有完全推广开来 1. 圣杯布局 圣杯布局来源于文章In Search of the ...原创 2019-02-27 13:29:35 · 226 阅读 · 0 评论 -
用 CSS 画一个带阴影的三角形
1. 思路 怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可 通过 transform 旋转盒子 方法一可以画三角形, 但是画阴影是很难做到的...原创 2019-03-04 13:12:03 · 1034 阅读 · 0 评论 -
选择器特殊性(权重)计算规则
选择器特殊性(权重)计算规则 选择器的特殊性分为4个等级: a、b、c和d, 各等级特殊性逐渐降低(即a > b > c > d). 行内样式, a = 1 b = ID选择器的总数 c = 类, 伪类, 属性选择器的数量 d = 类型选择器(span)和伪元素选择器(:before)的数量 选择器 特殊性 以10为基数的特殊性 style = “” 1,0,...原创 2019-04-09 18:33:23 · 340 阅读 · 0 评论 -
垂直方向margin重叠和margin坍塌问题
垂直方向margin重叠是兄弟元素之间 <div class="container"> <div class="A">A</div> <div class="B">B</div> </div> .A, .B { width: 100px; height: 100px; backgrou...原创 2019-07-05 22:05:48 · 500 阅读 · 0 评论