您的位置:

CSS Measurments List

一、像素(pixel)

像素是CSS中的基本单位,表示网页上的长度或距离。1个像素等于显示屏上一个点的大小。在CSS中,像素可以用来设置元素的高度、宽度、边框、内边距、外边距、字体大小等属性。


div {
  width: 200px;  /* 设置宽度200像素 */
  height: 100px;  /* 设置高度100像素 */
  border: 1px solid #ccc;  /* 设置边框 */
  padding: 10px;  /* 设置内边距 */
  margin: 10px;  /* 设置外边距 */
  font-size: 14px;  /* 设置字体大小为14像素 */
}

在不同的设备上,像素的实际大小会有所不同,比如在高分辨率的Retina屏幕上,1个像素的大小会比普通屏幕上要小。因此,我们需要使用其他单位来适配不同的设备屏幕。

二、百分比(%)

百分比是相对于其容器元素的长度或高度来计算的单位,在CSS中可用于设置元素的宽度、高度等。例如,可以使用百分比来设置网页布局的宽度,以实现响应式设计。


.container {
  width: 80%;  /* 设置容器宽度为父元素宽度的80% */
  margin: 0 auto;  /* 水平居中 */
}

由于百分比是相对于其容器元素的大小计算的,因此在不同的设备屏幕上,元素的大小会随着其父元素的变化而变化。

三、视口宽度和高度(vw和vh)

视口宽度和高度是相对于浏览器窗口的大小来计算的单位,在CSS3中引入。vw单位表示视口宽度的1/100,vh单位表示视口高度的1/100。使用vw和vh可以实现响应式设计,确保元素的大小能随着浏览器窗口的大小变化而变化。


.container {
  width: 50vw;  /* 设置容器宽度为视口宽度的50% */
  height: 50vh;  /* 设置容器高度为视口高度的50% */
}

需要注意的是,vw和vh在IE浏览器中的支持度不高,因此在使用时需要注意浏览器兼容性。

四、EM和REM

EM和REM均是相对单位,用于设置字体大小和容器的尺寸。EM单位是相对于父元素的字体大小来计算的,而REM单位是相对于根元素(html元素)的字体大小来计算的。


body {
  font-size: 16px;  /* 设置根元素字体大小 */
}

.container {
  font-size: 1em;  /* 设置字体大小为父元素字体大小的1倍 */
}

.box {
  width: 10rem;  /* 设置容器宽度为根元素字体大小的10倍 */
}

EM和REM可以用于实现响应式设计,同时也有助于提高代码的可维护性。

五、自适应单位

自适应单位是CSS3中引入的相对单位,能够根据屏幕密度和显示屏幕尺寸变化而自动变化。自适应单位主要包括以下三种:

  • fr:网格布局单位,代表可用空间的一部分
  • ch:字符宽度单位,代表“0”的宽度
  • vw、vh、vmin、vmax:视口百分比单位,相对于视口大小计算

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* 设置两列宽度比为1:2 */
}

.box {
  width: 20ch;  /* 设置容器宽度为20个“0”的宽度 */
}

.element {
  width: 50vmin;  /* 设置元素宽度为视口宽高中较小的一半 */
}

自适应单位在实现响应式设计时非常方便,同时也可以提高用户体验。

结语

CSS中的单位非常丰富,可以根据实际需求选择合适的单位进行布局和设计。在实际开发中,我们需要根据页面特点和业务需求来选择合适的单位,以实现良好的用户体验。

CSS Measurments List

2023-05-12
使用CSS list-style-position属性

2023-05-12
CSS边框笔记

2023-05-12
CSS Web Fonts List

2023-05-12
CSS list-style详解

2023-05-20
CSS list-style-type的全面解析

2023-05-20
前端学习笔记

2023-05-12
CSS Marker

2023-05-12
重学java笔记,java笔记总结

2022-11-23
CSS Listing Styles

2023-05-12
CSS列表测量

2023-05-12
CSS子选择器

2023-05-19
CSS 列表属性

2023-05-12
python学习笔记1基础篇(Python基础笔记)

2022-11-11
CSS Web Safe Fonts List

2023-05-12
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
css设置的js对话框(js 选择文件对话框)

本文目录一览: 1、怎样用 CSS + JS 美化网页中的 select 下拉框 2、笔记:JS设置CSS样式的几种方式 3、怎么用div+css和js制作回复窗口 4、如何用JS点击超链接弹出对话框

2023-12-08
怎样在js中写css,js或者怎么写

本文目录一览: 1、css在js里面怎么连写 2、如何在JS中定义CSS 3、js 写CSs样式 4、js中用cssText设置css样式的简单方法 5、笔记:JS设置CSS样式的几种方式 css在j

2023-12-08
javascript简要笔记,JavaScript读书笔记

2022-11-17
js行内样式怎么写,css行内样式怎么写

本文目录一览: 1、js的行内写法是什么 2、笔记:JS设置CSS样式的几种方式 3、JS里添加样式 4、JS如何设置表格行样式? js的行内写法是什么 就是把方法写在标签里面input type="

2023-12-08