sherlockkid7
学无止境
获得徽章 9
- #每天一个知识点#
响应式 Web 设计是一种设计和开发网页的方法，使得页面能够在不同的设备上以最佳方式展示，包括桌面电脑、平板电脑和手机等。通过使用 HTML、CSS 和 JavaScript 等技术，响应式 Web 设计能够根据设备的屏幕大小、分辨率和方向等特征，自动调整页面的布局、字体大小、图片尺寸等元素，以适应不同的使用环境。
实现方法：
使用流式布局（Fluid Layout）：使用百分比或弹性单位（如flex）来设置元素的宽度和高度，使其随着布局容器的变化而自适应调整大小。
媒体查询（Media Queries）：使用CSS中的媒体查询功能，根据不同设备的特征（如屏幕宽度）来应用不同的样式规则。展开评论点赞 - #每天一个知识点#
在CSS中，"px"（像素）和"rem"（根据根元素的字体大小进行相对计算）是两种不同的单位
主要区别：
px是绝对单位，而rem是相对单位。
px的大小是固定的，不会随其他因素改变，而rem会根据根元素字体大小的改变而自动调整展开评论点赞 - #每天一个知识点#
CSS盒模型是指在网页布局中，将HTML元素看作一个矩形框（盒子），并通过不同的属性来定义其尺寸、边框、内边距和外边距。
CSS盒模型由以下几个部分组成：
Content（内容区）：盒子的实际内容，例如文本、图像等。它的大小可以通过设置width（宽度）和height（高度）属性来控制。
Padding（内边距）：内容和边框之间的空间，可以使用padding属性来设置。内边距可以在盒子内部增加空白区域。
Border（边框）：围绕在内容和内边距外部的线条，可以使用border属性来设置。边框可以包括宽度、样式和颜色。
Margin（外边距）：盒子与其他元素之间的空白区域，可以使用margin属性来设置。外边距可以控制元素与其周围元素之间的距离。
在标准的W3C盒模型中，元素的宽度和高度仅包括内容区，而在IE盒模型中，宽度和高度包括内容、内边距和边框。展开赞过 评论1 - #每天一个知识点#
去除a标签默认样式
a {
text-decoration: none;
color: inherit;
/* 去除移动端点击a标签的背景色*/
-webkit-tap-highlight-color: rgba(0,0,0,0);
}展开评论点赞 - #每天一个知识点#
object-fit: none; 用于设置元素中的内容（如图片）在容器中的显示方式。表示内容不会被裁剪或缩放，它将按照原始尺寸完全展示，可能会超出容器的边界。评论点赞 - #每天一个知识点#
css可以实现三种类型的渐变：线性渐变（linear-gradient）、径向渐变（radial-gradient）、圆锥渐变 (conic-gradient)评论点赞 - #每天一个知识点#
去掉 <input type="number"> 元素的自定义上下箭头。
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}展开1点赞