对于css的长度单位真的有必要知道一下。那么css长度单位有哪些呢?

分成两大类:

  1.绝对单位:不会因为其他元素的尺寸变化而变化。坚持自我。

  2.相对单位:没有一个确定的值,而是由其他元素的尺寸影响的。

    1.绝对元素: px(像素,屏幕中的一个点。用得最多的)、pt(Points)、pc(Picas)、in、cm、mm(10mm =1cm)、q(1q =1/4mm);

    2.相对元素: %(相对于父元素的宽度或字体大小)、em(相对于父元素字体大小)、rem(相对于html标签字体大小)、

          ex(当前字体环境中x字母的高度)、ch(当前字体环境中 0 数字的高度)、

          vw(1%浏览器可视区域的宽度)、vh(1%浏览器可视区域的高度)

          

CSS的长度单位的更多相关文章

  1. 简要的谈一谈我对CSS中长度单位的理解

    CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...

  2. CSS rem长度单位

    1. 概述 1.1 说明 rem是css3中新增的一个单位属性(font size of the root element),根据页面的根节点(html)的字体大小进行转换的单位,通过此单位属性可以进 ...

  3. CSS长度单位及区别 em ex px pt in

    1.         css相对长度单位 Ø         em          元素的字体高度 Ø         ex           字体x的高度 Ø         px        ...

  4. CSS中各种长度单位总结

    在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...

  5. Qt ------ CSS 长度单位

    1.         css相对长度单位 Ø         em          元素的字体高度 Ø         ex           字体x的高度 Ø         px        ...

  6. css中pt、px、em、ex、in等这类长度单位详细说明

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...

  7. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  8. 你可能没注意的CSS单位

    扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...

  9. 第 14 章 CSS 颜色与度量单位

    学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一.颜色表方案 颜色的表现形式主要有 ...

随机推荐

  1. tomcat虚拟路径的配置方法

    方式一: 将web项目配置到webapps以外的目录 在conf/server.xml中配置,找到<host>标签,<Content docBase="E:\yqs\Jsp ...

  2. CSS 如何实现当鼠标放在上面时整行变色呢?

    摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...

  3. HTML表单概念、语法及创建表单,案例

    form 标签 Input标签的type属性值 单行文本域 <input type="text" /> 图像域(图像提交按钮) 下拉菜单和列表标签 select 标签属 ...

  4. HTML表格概念、语法、操作、案例

    创建两行三列表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. WIN10与ubuntu双系统安装教程

    按照网上博客的安装教程安装的Win10+Ubuntu16.04双系统安装了好几遍都不成功?启动Ubuntu左上一直有个光标在闪?如果你的电脑也是双硬盘(装Windows系统的固态硬盘+机械硬盘),在安 ...

  6. java 实现大顶堆

    Java实现堆排序(大根堆)   堆排序是一种树形选择排序方法,它的特点是:在排序的过程中,将array[0,...,n-1]看成是一颗完全二叉树的顺序存储结构,利用完全二叉树中双亲节点和孩子结点之间 ...

  7. 限定输入框只能输入数字, TextBox的TextChanged事件调用

    /// <summary> /// 限定输入框只能输入数字, TextBox的TextChanged事件调用 /// </summary> /// <param name ...

  8. 使用这7个隐藏技巧让您的Mac更易于阅读和使用!

    macOS Mojave(10.15)可以说是苹果公司功能最强大,功能最强大的现代Mac软件更新版.它带来了一系列新功能,安全和隐私控制,稳定性增强以及Dark Mode主题! 它也代表了最易于使用的 ...

  9. Pair类模板

    >Pair的实现是一个结构体而不是一个类< 1.标准头文件 #include<utility> 似乎无需引入该文件,在std命名空间内也有pair类型 2.格式为:templa ...

  10. [CF1303A] Erasing Zeroes

    Solution 找到边界然后循环扫一遍数个数即可 #include <bits/stdc++.h> using namespace std; int n; const int N = 1 ...