首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何以厘米为单位指定div的确切位置和大小

以厘米为单位指定div的确切位置和大小,可以通过CSS样式来实现。

  1. 位置指定: 使用CSS的position属性来指定div的位置,可以使用以下几个值:
    • static(默认值):元素按照正常文档流进行布局,忽略top、bottom、left、right等属性。
    • relative:相对于元素自身的位置进行定位,可以使用top、bottom、left、right属性来指定偏移量。
    • absolute:相对于最近的已定位的祖先元素进行定位,如果没有已定位的祖先元素,则相对于初始包含块(通常是浏览器窗口)进行定位。
    • fixed:相对于浏览器窗口进行定位,即使页面滚动,元素的位置也不会改变。
    • 例如,要将一个div定位在距离页面左上角10厘米的位置,可以使用以下CSS样式:
    • 例如,要将一个div定位在距离页面左上角10厘米的位置,可以使用以下CSS样式:
  • 大小指定: 使用CSS的width和height属性来指定div的大小,可以使用以下几种单位:
    • px(像素):最常用的单位,表示像素。
    • em:相对于元素自身的字体大小,例如,1em表示当前元素的字体大小。
    • rem:相对于根元素(html元素)的字体大小,例如,1rem表示根元素的字体大小。
    • cm(厘米):表示厘米。
    • %:相对于父元素的百分比。
    • 例如,要将一个div的宽度设置为20厘米,高度设置为10厘米,可以使用以下CSS样式:
    • 例如,要将一个div的宽度设置为20厘米,高度设置为10厘米,可以使用以下CSS样式:

综上所述,通过CSS的position属性和width、height属性,可以以厘米为单位指定div的确切位置和大小。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一篇文章带你了解CSS单位相关知识

指定 CSS 单位对于非零值是必须,因为没有默认单位。丢失或忽略单位将被视为错误。但是,如果该值 0,则可以省略该单位(毕竟,零像素与零英寸是一样)。 注意: 长度是指距离测量。...长度包括数字值,后面加单位,比如 10px、2em、50% 等。数字单位之间不能出现空白。 二、相对长度单位 相对长度单位指定相对于另一个长度属性长度。...相对单位是 描述 :em当前字体大小 。 ex :当前字体 x 高度 。 em ex 单位取决于套用至元素字体大小。 1....>ddad Hellow world 代码解析:浏览器中字体默认大小 16px。...绝对单位由物理单位 in、cm、mm、pt、pc) px 单位。表中j进行属性详细介绍。 单位 描述 in 英寸 - 1 英寸等于 2.54 厘米。 cm 厘米。 mm 毫米。

53510

「css基础」一次搞懂CSS 字体单位:px、em、rem %

示例展示指定多大 px 字体就会多大。...(浏览器预设字体大小16px,若无特别指定则会直接继承父元素字体大小) 1.2em <div style="font-size:1.2em...h6~h1标签文字大小,根据W3C规范,以medium预设16px基础(若html字体预设大小改变,medium也会跟着变),使用固定百分比乘以medium大小,例如xx-small预设为16px...larger、smaller larger smaller 就是固定百分比为单位,larger 父层120%,smaller 父层80%。...熟悉了字体大小单位之后,你就更够能系统进行设计整个网站CSS字体架构,不过font-size 本身font-family 有着一些复杂关系,不同font-family 有时也会影响font-size

4.1K20
  • IT课程 CSS基础 021_值类型、单位大小、颜色

    关键字:表示具体含义词,auto、initial、inherit等,理解关键字含义作用,确保正确使用。 单位 CSS中单位用于表示长度、角度、时间、频率等属性值。...长度单位: 在CSS中,长度单位用于表示尺寸距离,可以应用于各种属性,宽度、高度、边距、填充等。 相对长度单位: em: 相对于父元素字体大小。...1.5em表示元素字体大小其父元素字体大小 1.5 倍。 rem: 相对于根元素(html元素)字体大小。1rem等于根元素字体大小。 ex: 通常用于垂直尺寸,相对于小写字母”x”高度。...像素大小取决于显示器分辨率。 in: 英寸是长度单位,通常用于表示显示器或其他电子设备尺寸,1英寸等于96像素。 cm: 厘米是长度单位,通常用于表示物理对象尺寸。...pc: 派卡 (pica) 缩写,也是传统印刷术中使用单位。1pc 等于 12pt,约为 4.21752 毫米,1pc等于16像素。在打印样式表或需要确切打印尺寸情况下推荐。

    9710

    IT课程 CSS基础 022_文本、字体、链接

    属性可以接受绝对值或相对值,绝对值单位包括像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等,相对值单位包括 em、rem、vw、vh 等。...用于设置文本字体大小。字体大小可以使用绝对值或相对值来指定。 使用绝对值时,字体大小大小是固定,不会随着屏幕分辨率变化而变化。...绝对值单位包括:像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等。 使用相对值时,字体大小大小是相对于父元素字体大小。相对值单位包括: em、rem、vw、vh 等。...使用关键字指定字体大小,可以提高可读性一致性。关键字包括:xx-small、x-small、small、medium、large、x-large、xx-large。...字体单位选择: 使用相对单位(em、rem、%)可以更好地适应用户浏览器中设置字体大小偏好,增加网站可访问性。 行高设置: 根据字体大小适当设置行高,以提高文本可读性。

    10710

    机制原理——样式

    单位 CSS中值有以下几种类型: 颜色值 颜色值应用场合有:背景颜色,边框颜色,字体颜色等 长度值 长度值应用场合有:元素大小,边框颜色,字体颜色等 时间值 角度值 颜色值——颜色取值...长度值 长度值单位有绝对单位相对单位两种: 绝对单位 in 英寸, cm 厘米 mm 毫米 pt 磅,1pt等于1/72 英寸 pc 派卡,印刷术语 相对单位 em 1em等于当前字体尺寸...比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中所有子元素文本,这里子元素span标签。...这是因为CSS样式是有优先级,按照CSS优先级规则,通过ID指定样式最终获得胜出。...等级3 类,伪类属性选择器(:.cls1)属于第3等级,权值10。 等级4 元素伪元素选择器(:.div)属于第4等级,权值1。 特殊性 通过!

    55630

    论CSS中可使用font-size长度单位

    参考像素是指,在约一臂长距离处(大约28英寸)「译者注:约71厘米」,在像素密度96DPI屏幕上一个像素尺寸大小。也就是说,一个像素宽高约等于0.26mm。...设置1rem值会让元素root元素 font-size大小相同。这样你就不需要考虑字体 font-size继承问题了。...容器 div font-size设置rem,避免了字体大小继承关系。 正如本例那样,你可以使用这个这个单位,给某个不同模块设置对应 font-size。...这些值分别使用0.0123或者0.1666英寸单位。类似的,你还可以使用英寸(in),厘米(cm)毫米(mm)来设置页面的打印边距。...使用关键字来设置字体大小 另一个选择是使用关键字设置 font-size。有两种类型关键字:绝对相对。绝对值关键字常用在指定字体大小,其值是根据不同用户浏览器计算出一个数据表里某项。

    2.4K20

    Adobe Photoshop使用,选框工具进行选择教程

    原标题:「Adobe国际认证」Adobe Photoshop使用选框工具进行选择教程 选框工具允许您选择矩形、椭圆形宽度 1 个像素列。...单行或单列选框:将边框定义宽度 1 个像素行或列。 2.在选项栏中指定一个选区选项。 3.在选项栏中指定羽化设置。椭圆选框工具打开或关闭消除锯齿设置。详情请参文末阅柔化选区边缘。...输入长宽比值(十进制值有效)。例如,若要绘制一个宽是高两倍选框,请输入宽度 2 高度 1。 固定大小选框高度宽度指定固定值。输入整数像素值。...注意: 万像素 (px) 之外,还可以在高度值宽度值中使用特定单位英寸 (in) 每厘米 (cm)。...若要从选框中心拖动它,请在开始拖动之后按住 Alt 简 (Windows) 或 Option 简 (Mac OS)。 对于单行或单列选框工具,在要选择区域旁边单击,然后将选框拖动到确切位置

    2.5K30

    SVG精髓阅读笔记

    在矢量图形系统中,图像被描述一系列几何形状,矢量图形阅读器接受在指定坐标集上绘制形状指令,而不是接受一系列已经计算好像素.有人把矢量图形描述一组绘图指令,而位图则是在特定位置填充颜色点....二个属性定义svg像素宽和像素高 SVG一些基本元素用法, SVG坐标原点在左上角(0,0) 元素circel可以画圆相关图形, 指定中心点x坐标y坐标以及半径,<circle cx=”...,默认字体大小,ex 字母x高度,px像素,pt点pc12点cm厘米,mm毫米,in英寸可混用,没有单位默认为像素 默认坐标是水平坐标向右递增,垂直坐标垂直向下递增 元素svg上属性viewBox属性...,有四个值,分表代表想要叠加在视口上用户坐标系统最小x坐标,最小y坐标,宽度高度 下面一行代码是在4厘米*5厘米图纸上,设置每厘米16个单位坐标系统 <svg width=”4cm”height..., PreserveAspectRatio=”alignment[meet | slice]” 其中alignment指定位置, x,y Min Mid Max Meet参数适配viewBox视口

    1.4K20

    【CSS】禅意花园--心得分享

    绝对单位与相对单位 绝对单位指预先可以确定单位长度度量单位,包括cm(厘米)、in(英寸)、pt(磅)等。 相对单位:包括% 、em、larger、smaller等,这是一种可变尺寸。...间距 line-height:不需要单位,1.21.2em或者120%是同义。未加单位值表示基于当前文字大小相对值。...IE不能支持选择器: 子选择器(div#content>p{}); 邻接选择器(div#warning p + p{ }); 属性选择器及匹配模式 id=“waning”{} CSS签名 主要思想是页面的...如果同时设置了2个,那么第一个值表示水平位置,第二个值表示垂直位置。 如果只设定一个值,那么它将表示水平位置,而垂直位置将取默认50%或者居中。 设置水平位置“负值”在背景定位中是合法。...(10)指定图片路径时,不要使用单引号 (11)若使用了锚点(anchor),那么在为超链接应用样式时要格外小心 如果代码使用了传统锚点(:),将发现:hover

    28330

    理解CSS | 青训营笔记

    定义子元素位置:通过grid-row、grid-column属性指定每个子元素要占据哪些行与列,或者使用grid-area属性直接每个子元素指定代表区域。...transition-duration 必填参数,transition-timing-function transition-delay 选填参数,非必要可以省略不写。...下面是一些常见CSS单位及其解释: 单位名称 含义 px(像素) 一个基本屏幕上点,通常用于定义元素具体大小。 em 相对大小,相对于父元素字号大小而言。...:font-size: 1.2em; 表示当前元素字号是父亲1.2倍。 rem 相对大小,与根元素(即 html)字号大小有关。...pt(磅) 印刷单位,1pt=1/72英寸;用于打印样式表中。 mm/cm/in 计量单位,毫米/厘米/英寸,用于打印样式表中。

    9610

    前端课程——变形

    该CSS属性可用于内联元素块级元素。其默认值none,表示匹配元素不进行任何变形。 transorm-list:表示作用于元素一个或多个变形CSS函数。...preserve-3d 指示元素子元素应位于 3D 空间中。 perspective 指定了观察者与 z=0 平面的距离,使具有三维位置变换元素产生透视效果。...perspective-origin 指定了观察者位置,用作 perspective 属性消失点。...可以使用transform-origin属性,可以使用像素单位厘米单位以及关键字(left,top等) 移动后效果: ? 不移动效果: ? 代码 <!...如果该角度值正值的话,表示顺时针旋转;如果该角度值负值的话,则表示逆时针旋转。 rotate(angle) 其中: angle:表示旋转角度值,单位deg。

    1.1K30

    一文读懂 CSS 单位

    这里给父元素设置了字体大小20px,然后给子元素border宽度设置1em,这时,子元素border值20px,确实是相对于父元素字体大小设置: image.png 那如果我们给子元素字体设置...而0 宽度通常是对字体平均字符宽度,它是一个估计值。由于 ch 是一个近似等宽单元,所以在设置容器宽度时很有用,比如一个容器想要显示指定个数字符串时,就可以使用这个单位。...CSS 将光栅图像(照片等)显示方式定义默认每一个图像大小1px。...派卡也是印刷术语,1派卡等于12点。它 px 换算关系如下: 1pc = 16px (4)cm cm 全称为 Centimeters,表示厘米。...(3)定位中百分比 在CSS中用控制 position 位置top、right、bottom、left都可以使用百分比作为单位。其参照物就是包含块同方向widthheight。

    76710

    LaTeX基础操作

    % 这是正文区内容 \end{document} \documentclass指定文档类别,比如article、book、report等 格式 粗体:\textbf{文本} 斜体:\emph{文本}...使用\section、\subsection等命令定义标题可以通过\tableofcontents命令自动生成目录 可以使用titlesec宏包自定义标题字体、大小、间距等样式 段落 使用空行分隔不同段落...\parskip(段落间距)\parindent(首行缩进)值来改变段落间距缩进 列表 无序列表(itemize环境) 有序列表(enumerate环境) 每个列表项使用\item命令开始 \begin...命令插入图片 \includegraphics[选项]{文件名} 选项用来指定图片各种属性,大小、缩放比例等,文件名包括扩展名 图片大小与缩放 使用widthheight选项来指定图片宽度高度...、2厘米、3厘米4厘米 数学公式 行内公式:$1 \div 2$ 单独公式:equation环境 引用 在文档中引用章节、图片、表格等 % 章节、图表等对象添加标签 \section{引言}\label

    23410

    CSS入门13-单位详解

    这些长度由数字单位组成,数字单位之间是没有空格。长度单位类型有两种:绝对长度单位相对长度单位。 2. 绝对长度单位 绝对长度单位含义,就是客观上绝对存在单位,放在任何地方都一样。...相对长度单位 3.1 相对字体大小长度单位 3.1.1 em em相对于应用在当前元素字体尺寸。...{ /*相对于父元素,大小40px*/ font-size: 2em; /*相对元素本身,高度5*40=200px*/...3.1.2-1 但是根部元素设置成rem或者使用默认大小不方便计算,所以一般将根部元素字体大小设置100px。为什么不是10px呢,因为chrome下字体大小最小12px。 <!...3.2 相对视窗宽高长度单位 视窗相关长度值相对于初始包含块大小。当初始包含块宽高变化时,它们都会相应地缩放。然而,当根元素overflow值auto时,任何滚动条会假定不存在。

    62820

    深度解析CSS中单位以及区别

    css中有几个不同单位表示长度,使用时数字加单位。如果长度0,则可以省略单位。 长度单位可分为两种类型:相对绝对。...具体单位以及解释如下: px像素:一个像素就相当于我们屏幕中一个小点,屏幕实际就是由很多个像素点构成,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。...vw:vw(viewpoint width)视窗宽度,1vw = 视窗宽度1% vh:vh(viewpoint height)视窗高度,1vh = 视窗高度1% vmin:vwvh中较小那个。...vmax:vwvh中较大那个。 一些设置css长度属性有width、height、margin、padding、font-size、border-width等。...举例: html{ font-size:14px } div{ width:3rem; height:2.5rem } 把div大小单位换算成px是多少呢?

    43310

    【CSS】343- CSS Grid 网格布局入门

    grid-template-columns 属性允许我们指定网格中列数及列宽度。您可以指定任何单位尺寸大小,包括像素,百分比其他单位fr,我们将在下一步学习。...fr 单位(等分) fr 是网格布局定义一个新单位。它可以帮助你摆脱计算百分比,并将可用空间等分。...这意味着在我们之前例子中,有四条垂直线四条水平线包含它们之间列。 ? 在将网格项从一个位置跨越到另一个位置时,网格线变得非常有用。 网格轨道是两条线之间空间。网格轨道可以是一行或一列。...(注,如果单纯这样效果图,用FlexBox布局实现问题不大)但是如果我们使用网格模块,改变网格中网格项位置是一件轻而易举事情。要将第6个框移到第2个框位置,我们必须确切知道第2个框在哪里。...它所做只是在两个网格区域之间添加一个间距。你也可以使用 grid-row-gap grid-column-gap 来指定不同间距值。 CodePen上这个例子: <!

    1.9K10

    Python Tkinter Gui 常用组件介绍 基本使用

    ,推荐此方法 2.pack()–>按照控件添加顺序其进行排列,遗憾是此方法灵活性较差 3.place()–>(x,y)定位摆放,可以指定组件大小以及摆放位置,三个方法中最为灵活布局方法 四、示例代码...ipadx 设置组件内部"左右"间距,单位像素§,或者厘米©、英寸(i) ipady 设置组件内部"上下"间距,单位像素§,或者厘米©、英寸(i) padx 设置组件外部"左右"间距...,单位像素§,或者厘米©、英寸(i) pady 设置组件外部"上下"间距,单位像素§,或者厘米©、英寸(i) sticky 该属性用来设置控件位于单元格那个方位上,参数值 anchor 相同,...§,或者厘米©、英寸(i) padx 设置组件外部"左右"间距 ,单位像素§,或者厘米©、英寸(i) pady 设置组件外部"上下"间距,单位像素§,或者厘米©、英寸(i) 3.place...,默认值是 NW x、y 定义控件在根窗体中水平和垂直方向上起始绝对位置,(单位像素),绝对定位 height、width 控件自身高度宽度(单位像素),绝对定位 relx 设置距离左上角水平长度百分比

    2.7K20
    领券