前端小伙伴们,在使用css的display的属性的时候是不是经常会迷惑怎么使用,今天就来详细讲解下。
CSS 的 display 属性用于定义元素应如何显示在页面上。它控制元素的布局和行为,是前端开发中非常重要的一个属性。以下是 display 属性的详细用法:
2025年04月26日
前端小伙伴们,在使用css的display的属性的时候是不是经常会迷惑怎么使用,今天就来详细讲解下。
CSS 的 display 属性用于定义元素应如何显示在页面上。它控制元素的布局和行为,是前端开发中非常重要的一个属性。以下是 display 属性的详细用法:
2025年04月26日
提示:点击上方"蓝色字体"↑ 可以订阅噢!
摘要 51RGB官方微信position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用。
postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。
2025年04月26日
React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致,所以当你开始在编写 React-Native 之前,可以先简要了解一下。
2025年04月26日
本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。
这种情况最简单,只需要将行内元素包括在一个display属性为block的父元素中,并且设置父元素text-align为居中即可
2025年04月26日
我调查了身边五六年经验以上的几个前端同学和同事,尽然发现绝大部分人都不知道,当然,在看到这个文章之前,我也不知道这个,平时虽然都一直在做web前端开发,但真没涉及到这块,或者说涉及到了,也解决了,但是还真没探究过这个问题,你是否躺枪了呢?
这是一个很让人困惑的CSS特征,我之前也谈到过它。我们大家都知道,当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top
,
2025年04月25日
CSS 是前端里面的基础之一,也是非常重要的一部分,它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中,总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。
2025年04月25日
在响应式布局逐渐成为主流的今天,网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关,如何让你的网页实现完美的缩放?
我们可以很快速的写出一个响应式布局的页面,首先看一下效果图。
网页布局
其中html部分的代码如下:
2025年04月25日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS实现自适应正方形以及等宽高比矩形</title>
</head>
<style>
/* * {
padding: 0;
margin: 0;
} */
html, body {
height: 100%;
}
/* 方法一: */
.w_son-cont {
width: 20% ;
/*基于父级的宽度设置*/
padding-top: 20% ; /* 或者padding-bottom: 20%; */
background: red ;
}
/* 方法二: 这个方法不能实现正方形; 高度总是要比宽度大几个像素 */
.w_vw-cont {
width: 30%;
height: 30vw;
background: red;
}
/* 方法三: */
.w_mar-outer {
overflow: hidden;
width: 20%;
background-color: skyblue;
}
.w_mar-outer::after {
content: '';
display: block;
padding-top: 100%; /* margin 百分比相对父元素宽度计算 */
}
</style>
<body>
<div class="w_son-cont"></div>
<div class="w_vw-cont"></div>
<div class="w_mar-outer"></div>
</body>
</html>
2025年04月25日
背景:
在使用layui table展示列表数据的时候,有时候单元格的内容有多行,这个时候需要设置单元格的高度自适应,这种情况下,如果有设置表格的某些列固定(fixed)的话,会造成固定列的样式错乱,排序的时候样式也会错乱,需要做特殊处理。
2025年04月25日
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们。其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间。
作为前端开发人员,我们经常会遇到这样的事情。所以我问自己,为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性?
在本文中,我将介绍一些不一样的CSS属性,希望能给你带来点新鲜感,废话不多说,让我们开始吧。
Powered By Z-BlogPHP 1.7.4