这次带大家彻底搞懂 flex 布局

大家好,我是前端西瓜哥,今天我来带大家彻底搞懂 flex 布局。

flex 布局,即弹性布局,是前端开发中非常常用的布局方式。主要是馋它很简单就能让容器内元素水平垂直居中的能力。

首先我们需要有一个容器元素(我们叫做 container),然后容器元素内有一些子元素(我们叫做 item)。

1
2
3
4
5
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
阅读更多

img 元素和 background-image 属性的区别

img 是 HTML 元素,基本用法如下:

1
<img src="./img.jpg" alt="图片描述" />

background-image 则是一个 CSS 样式属性,用于设置元素的背景图片。

1
2
3
.bg {
background-image: url("./img.jpg");
}
阅读更多

CSS文本截断方法总结和原理分析

虽然文本截断并不是什么很复杂的东西,但浏览器却没有较完善的原生支持。于是诞生了下面各种妖魔鬼怪的解决方案。每个方案都有各自的优缺点和适用场景,请根据自己的需要选择合适的方案。

阅读更多

CSS居中方法汇总

CSS 实现居中的一些方法的汇总,分为水平居中和垂直居中两部分进行叙述。

阅读更多