分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

css 单位

发布时间:2023-09-06 02:23责任编辑:熊小新关键词:暂无标签

CSS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。

长度有一个数字和单位组成如 10px, 2em, 等。

数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。

对于一些 CSS 属性,长度可以是负数。

有两种类型的长度单位:相对和绝对。

  以上为菜鸟教程版权所有!

绝对单位

px: Pixel 像素
pt: Points 磅
pc: Picas 派卡
in: Inches 英寸
mm: Millimeter 毫米
cm: Centimeter 厘米
q: Quarter millimeters 1/4毫米

相对单位

%: 百分比
em: Element meter 根据文档字体计算尺寸
rem: Root element meter 根据根文档( body/html )字体计算尺寸
ex: 文档字符“x”的高度
ch: 文档数字“0”的的宽度
vh: View height 可视范围高度
vw: View width 可视范围宽度
vmin: View min 可视范围的宽度或高度中较小的那个尺寸
vmax: View max 可视范围的宽度或高度中较大的那个尺寸

css计算属性:

calc: 四则运算

实例:h1 {    width: calc(100% - 10px + 2rem) }

vmin / vmax 可视范围的宽度或高度中较小/较大的那个尺寸

假设需要让一个元素始终在屏幕上可见:.box {  height: 100vmin; width: 100vmin;}

如果需要让这个元素始终铺满整个视口的可见区域:.box { height: 100vmax; width: 100vmax;}

 em、rem 是实际生产中我们最常用到的单位,可以使用其配合媒体查询改变 body 字体大小来实现响应式的设计,vh、vw、vmin、vmax也可以很方便地帮助我们控制响应尺寸,但实际的可控性可能不如前者,具体按照我们的业务需求去实践吧!

css 单位

原文地址:https://www.cnblogs.com/dekui/p/10001372.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved