css

什么是bfc？ 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先记住一个原则：  如果一个元素具有BFC,那么内部元…

大家在写css的时候，肯定有过忘记设计里面存在的临界的情况。举个例子来说吧，当内容的长度超过了我们的期望值，我们也无法解释其中的可能性，页面的设计很可能会因此而崩掉。我们不能保证css总是会按照我们期望的那样工作，但至少我们可以用不同类型的内容来测试，以减少这种情况的发生。 具体情况如下： 一个右侧…

以下以数字开头的 css 类名不会生效： .1st{ color: red;} 一个合法的 CSS 类名必需以下面其中之一作为开头： 1、下划线 _ 2、短横线 – 3、字母 a – z 立即学习“前端免费学习笔记（深入）”； 然后紧跟其他 _ ， – 数字或字母…

本篇文章介绍了使用css实现文本两端对齐的效果，具有一定的参考价值，感兴趣的朋友可以看看。 css实现文本两端对齐的方法 说起text-align，大家一定都不觉得陌生，我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐，当然我们也使用justify来实现文本两端…

本篇文章介绍了如何改变css伪元素样式的方法，希望对学习前端css的朋友有帮助！ 一、CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果。 伪元素的用法如下： selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 selector…

本篇文章介绍了css实现文字过长显示省略号的方法，具有一定的参考价值，希望对学习css的朋友有帮助！ 一、CSS样式 解决文字过长显示省略号问题 1、一般样式 一般 css 样式，当宽度不够时，可能会出现换行的效果。这样的效果在某些时候肯定是不行的，可以修改 css 样式来解决这个问题。 text-…

下面是style部分： *{margin:0;padding:0;} a{text-decoration:none} li{list-style:none;} 设计宽度不要超过轮播图片的总宽度，再加上第一张图片的宽度（加第一张图片的宽度是为了轮播效果看得见）我的是1500宽度和200的高度，再设置溢…

本篇文章为你介绍使用css实现网页遮罩效果，主要是通过控制两个盒子的显示层级，控制遮罩层的背景色和显示透明度来达到遮罩效果。希望对学习css的朋友有帮助。 给你的弹窗加个遮罩 遮罩层效果相信是许多开发需求时候经常会碰到的一个情况，实现遮罩层效果的方式有很多种，下面介绍最简单的一种，利用CSS来实现遮…

1、给父级元素设置高度 效果图： 代码： * { padding: 0; margin: 0; } .header { height: 30px; line-height: 30px; background-color: #333; } .header a { color: #fff; text-d…

flex介绍 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 （推荐学习教程：CSS教程） 立即…