![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 57
码飞飞
大家好!我是练习时长五年的前端练习生码飞飞
展开
-
什么是BFC?
从效果上看,因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,所以两个盒子之间距离只有 100px,而不是 200px。这时候其实第二个元素有部分被浮动元素所覆盖,(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖,可触第二个元素的 BFC 特性,在第二个元素中加入。是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。通俗一点来讲,可以把。原创 2023-07-02 17:11:05 · 191 阅读 · 0 评论 -
CSS伪元素absolute后最原始的位置
伪元素::after和::before最近伪元素用的多,总结一下她们绝对定位后的相对于主元素的最原始的位置:图片示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&原创 2021-01-11 11:06:45 · 834 阅读 · 0 评论 -
CSS实现宽为奇数的线与其伪元素直径为偶数的圆居中对齐
问题如上图所示,如何通过伪元素::before和::after实现中间宽度为奇数px的竖线与其伪元素的上下两个直径为偶数px的圆居中对齐呢?这是我实际开发中遇到的一个问题。当然,两圆的直径也为奇数就没这么多事了。我的实际需求是: 竖线宽为1px,上圆直径为10px,下圆直径为20px。不是伪元素的话,很多方法可以实现它们居中对齐,但是用伪元素怎么做呢?下面就是我的骚操作了。思路一番冥思苦想,终于想到用transform: scale()来解决这个问题:首先我们给div.line设个borde原创 2021-01-11 10:40:11 · 355 阅读 · 1 评论 -
CSS中子元素margin-top对父元素产生作用的问题
问题在实际开发中遇到一个问题,子元素想通过margin-top留白时,会把父元素也拉下来。问题图片如下:问题代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&原创 2020-10-16 18:26:12 · 898 阅读 · 0 评论 -
CSS实现button按钮的点击效果
如下图所示,如果我们要实现这样的按钮点击效果,用。个人方法是通过伪元素。原创 2020-05-24 13:01:19 · 16805 阅读 · 1 评论 -
CSS Scrollbar样式设置
正文内容请看这里注意事项如果我们不想全局修改Scrollbar的样式的话,在其前面补充id、class或者元素标签名即可,如下所示:// 只作用于body标签body::-webkit-scrollbar { width: 8px; background-color: #f2f2f2;}body::-webkit-scrollbar-thumb { border-radi...转载 2020-03-17 16:22:03 · 782 阅读 · 0 评论 -
Flex布局下如何使用text-overflow:ellipsis省略过长文本
问题试想一下我们如何通过Flex布局实现下面这个组件呢?中间显示的文字内容过长是可以自动省略Flex布局实现方法一(推荐)HTML:<div class="container"> <div class="field"> <div class="title">文本输入</div> <div cl...原创 2020-01-30 14:51:45 · 3879 阅读 · 0 评论 -
CSS3之border-radius深度解析
语法解析border-radius : none | <length>{1,4} [ / <length>{1,4} ]<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。其中每一个值得数值可以为 px、%、em 等表达形式。如果 “/” 前后的值都存在,那么 “/” 前面的值设置其水平半径, “/” 后面值设置其垂直半径。如果没有 “/...原创 2019-11-10 12:38:49 · 485 阅读 · 0 评论