这次小编给大家整理了理解css中的长度单位网页设计，本文共7篇，供大家阅读参考，也相信能帮助到您。
篇1：理解css中的长度单位网页设计
很基础的一个问题，但是，其实看起来很复杂的样子～～我们来捋一捋吧～～
css3中也对css中用到的单位进行了改进，单位也就是那几个，所以我们要搞清楚再用，
%——百分比
in——寸
cm——厘米
mm——毫米
pt——point，大约1/72寸；
pc——pica，大约6pt，1/6寸；
px——屏幕的一个像素点；
em——元素的font-size；
ex——font-size的x-height值，为小写字母x的高度，通常相当于font-size的一半。
我们常用的有px、%、em，px就不多说了，em和%多说点儿：
123
.box{line-height:1.3em;}
元素的行高是当前元素继承的font-size的1.3倍，
123
.box{font-size:1.3em;}
当前元素的字体大小是其继承的font-size的1.3倍。
123
.box{line-height:130%;}
元素的行高是当前元素继承的font-size的130%倍，等同于1.3em。
123
.box{font-size:130%;}
当前元素的字体大小是其继承的font-size的130%倍，等同于1.3em，
恩，迷惑了吗？
em就是基于当前元素的(如果没设置就是继承其父元素的)font-size。
而%对于font-size、line-height等，是基于其父元素的font-size的，而对于text-indent、margin、padding、width等属性，则是基于父元素的宽度的。
CSS3中的单位：
css3中引入了一些新的单位：
ch——字符0(零)的宽度；
rem——根元素(html元素)的font-size；
vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；
vmin——vw和vh中较小的那个。
显然vw、vh、vmin是针对移动设备的，如果视窗大小变化了，这三个值也会跟着相应的变化。
rem单位感觉就是px+em的变体，是否值得使用还要看你自己的取舍：没有px精确也没有em灵活——或者说，比px灵活，比em更精确～～。。。XD。。。
如果没有定义font-size怎么办？
其实不用担心，传说，各个浏览器史无前例的默认font-size:16px;，所以，即便你在样式文件中忘了定义font-size初始值，也可以放心的使用em、rem。
浏览器支持：
rem，各浏览器基本都支持了， IE9+、FF3.6+、Chrome、Safari 5+、以及 Opera 11.6+
vw、vh、vmin，浏览器支持并不乐观，IE9支持了，Chrome目前不支持，Chrome 20将会重新支持(貌似之前支持过？)、Safari也即将支持了吧，Opera和Firefox也还都不支持。
篇2：彻底了解css中的长度单位网页设计
我们在写css的时候最常用的长度单位是px（像素），经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；
px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的，
譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
em：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pt：点（Point），绝对长度单位。
ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pc：派卡（Pica），绝对长度单位。相当于我国新四号铅字的尺寸。
in：英寸（Inch），绝对长度单位。
mm：毫米（Millimeter），绝对长度单位。
cm：厘米（Centimeter），绝对长度单位。
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ；
容器的大小我们经常用px做单位，大家都没什么异议，
字体大小（font-size）很多国内的人（包括我）使用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。如图。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。
所以多人建议使用em，对于用惯了px的人用em肯定不是很方便，这里提供一些转换公式和对照表供大家参考：
PX to EM:Example: 12px / 16px = .75em
PX to %:Example: 12px / 16px * 100 = 75%
PX to PT:Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
EM to PX:Example: .75em * 16px = 12px
EM to %:Example: .75em * 100 = 75%
% to PX:Example: 75 * 16px / 100 = 12px
% to EM:Example: 75 / 100 = .75em
PT to PX:Example: 12pt * 96ppi / 72ppi = 16px
PixelsEMsPercentPoints6px0.375em37.5%5pt7px0.438em43.8%5pt8px0.5em50%6pt9px0.563em56.3%7pt10px0.625em62.5%8pt11px0.688em68.8%8pt12px0.75em75%9pt13px0.813em81.3%10pt14px0.875em87.5%11pt15px0.938em93.8%11pt16px1em100%12pt17px1.063em106.3%13pt18px1.125em112.5%14pt19px1.188em118.8%14pt20px1.25em125%15pt21px1.313em131.3%16pt22px1.375em137.5%17pt23px1.438em143.8%17pt24px1.5em150%18pt或者直接访问pxtoem.com/（一个px和em互换的网站）；
最后说一句被拍砖的话：
个人认为现在用px做字体单位在IE下无法用浏览器字体缩放的功能的缺点已经不再是那么重要了，
因为新版本ie7，ie8都已经支持整个网页的缩放功能，包括火狐默认也是缩放整个网页，而不是缩放字体，没那么单纯的缩放字体大小还有什么重大的意义吗？我的答案是吃饱了撑着没事找事。按住Ctrl+滚动鼠标的中间的滚轮试试！时代不同了！ie进步了！
本文来自：www.css88.com/archives/821
篇3：浅谈CSS选择器中的空格网页设计
HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图，文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关系’。基于这样的关系模型，CSS定义了后代选择器（descendant selector）也称为上下文选择器（contextual selector）。
后代选择器的写法为，子代元素以空格与父元素形成连接关系构成选择器，如：
div span{color:blue;}
以上规则的结果为：“作为div元素后代的任何span元素显示为蓝色字体”。
选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器——《CSS权威指南》第三版
CSS还有两种选择器：类选择器和ID选择器，个中细则不是本文陈述的重点。本文的重点是：空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题，及解决方式。
先看看以下的规则：
div.blue{color:blue;}
以上规则的结果为：“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样，我的要求是：“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则：
div .blue{color:blue;}
以上规则的改进之处为“div”与“.blue”之间多了一个空格，这样是否就能形成后代选择器呢？答案是否定的！该规则实现的结果依旧是：“所有class属性值为blue的div元素显示为蓝色字体”。
那么该怎么结合类选择器构成后代选择器的效果呢？方法是有的，那就是给父元素div设置一个class或者id属性，假设我给它加上一个class属性，于是规则就变为：
div.contain .blue{color:blue;}
以上规则的结果为：“所有class属性值为contain的div元素，其后代中class属性值为blue的任何元素显示为蓝色字体”。结果虽然不能完全达到我的苛刻要求，但已经很接近了，
接近了，效果一定是很明显的，然而我却发现完全没有了蓝色字体，因为我把规则写为：
div.contain.blue{color:blue;}
以上规则的不同之处在于，“.contain”与“.blue”之间少了一个空格！少了空格，以上选择器就不是后代选择器了，而是另外一种选择器：“多类选择器”。
在HTML中，一个class值中有可能包含一个词列表，各个词之间用空格分隔。那么以上的多类选择器只能将规则应用于如下形式的元素中：
text
以上的class属性值少了其中一个都无法将字体显示为蓝色！
将以上规则放在一起，比较起来会清晰一点：
1div.contain .blue{color:blue;}/*后代选择器*/
2div.contain.blue{color:blue;}/*多类选择器*/
以上两种规则分别应用的元素如下：
1containblue
2contain and blue
值得注意的是：ID属性不允许有以空格分隔的词列表。所以以下的规则将无法应用到任何元素：
div#contain#blue{color:blue;}
以上的规则将无法应用到任何元素。你只能乖乖地用空格将两个ID选择器分隔，构成后代选择器。
综上，选择器之间的空格是一种结合符，如果要构成后代选择器，则空格两边的选择符必须为如下两种形式：
元素选择符 空格 元素选择符
非元素选择符 空格 非元素选择符
后代选择器中绝对不可能出现的一种情形：元素选择符 [空格] 非元素选择符。
最重要一点：两个类选择器之间存在空格则构成后代选择器，之间没有空格的则构成多类选择器。
参考资料：《CSS权威指南：第三版》Eric A.Meyer著 尹志忠 侯妍译
本文来自：www.cnblogs.com/mophee/archive//03/12/1409562.html
篇4：长度单位教学设计
教学内容：
认识厘米用厘米量
教学目标：
1、认识长度单位厘米，初步建立1厘米的长度观念，知道1厘米的实际长度。
2、初步学会用刻度尺量物体的长度。
3、培养学生的动手能力、合作精神。
教学重点：
用厘米量较短的物体。
教学难点：
建立1厘米的长度观念。
教、学具准备：
多媒体课件、刻度尺、图钉、各种不同长度、不谈色的纸条。
教学过程：
一、创设情景，导入新课
1.让学生用小木块来量一量一张纸条的长度。
2.让学生用小木块来量一量一张纸条的长度。
3.让学生谈自己在量的过程中的感受。
4.贴在黑板上一张纸条，让学生来量。（很不方便）
5.说明：在日常生活中用木块来量物体的长度很不方便，为了准确、方便的表示物体的长度，人们发明了刻度尺。
二、认识厘米
（1）出示刻度尺，请小组内先说说自己知道刻度尺的那些知识。
（2）全班进行交流，教师小结（主要让学生知道尺上的1厘米）。
（3）让学生量一量身边的一些物体，说说那些物体的长是1厘米。（图钉，某个手指等）
（4）用自己想的方法表示一下1厘米的实际长度。
三、用厘米量
1.小组合作，两个小组的纸条，并讨论量的方法。
2.全班交流，学生总结方法：量时要把持的“0”刻度对准纸条的左端。在看纸条的右端对着几，这张纸条的长度就是几。
3.请一名学生量黑板上的纸条，边量边说量的方法。
四、巩固练习
练习一第1题
让学生说说量的方法
第2题
量出几厘米，就在纸条上画上竖线，写上几厘米。
第3题
练习是，一要学生明确量的地方,二指导学生测量的方法。
五、总结：通过这节课的学习，你学到了什么知识？
六、布置作业：练习一1～3题，第6题做在课本上。
篇5：长度单位教学设计
课题长度单位
单元教材分析主要内容：统一长度单位，认识厘米、用厘米量，认识米、用米量，认识线段、量画线段。地位与作用：本单元是在学生已经对长、短的概念有了初步认识的基础上帮助学生认识长度单位，初步建立1厘米和米的长度观念，并初步认识线段。这一部分是学生进一步学习长度单位、和几何初步知识的基础。
单元教学目标
1、知识目标：认认识长度单位，初步建立1厘米和1米的长度观念，知道长度单位的作用和1米=100厘米，并初步认识线段。
2、能力目标：会用刻度尺量、画物体的长度及线段的长度（限整厘米）
3、德育目标:初步经历长度单位形成的过程，体会统一长度单位的必要性，培养学生估量物体长度的意识。
单元教学重点
1、经历长度单位形成的过程。
2、帮助学生形成厘米和米的正确表象，知道1米=100厘米。
3、画和量线段的方法。
单元教学难点
正确的使用刻度尺量物体的长度，会用工具量和画线段。
单元教法设计
1、统一长度单位,用不同的物品做计量单位去测量统一长度，来经历统一长度单位的过程。
2、通过多种活动帮助学生形成厘米和米的正确表象。
3、关于线段采取直接描述的方式，多补充线段的练习。
第一课时：
1、使学生经历长度单位形成的过程，体会统一长度单位的必要性，知道长度单位的作用。
2、培养学生估量物体长度的意识。
3、培养学生的动手能力、合作精神和争论意识及探索数学的兴趣和感受成功的喜悦。
第二课时：
1、认识长度单位厘米，初步建立1厘米的长度观念，知道1厘米的实际长度。
2、初步学会用刻度尺量物体的长度。
3、培养学生的动手能力、合作精神。
第三课时：
1、认识长度单位米，初步建立1米的长度观念，知道1米=100厘米。
2、知道量比较长的物体要用米做单位，会用米量物体的长度。
3、培养学生的合作意识。
第四课时：
1、初步认识线段，会用刻度尺量和画线段的长度（限整厘米）。
2、培养学生的动手能力。
篇6：长度单位教学设计
教学内容：
认识厘米 用厘米量
教学目标：
1、认识长度单位厘米，初步建立1厘米的长度观念，知道1厘米的实际长度。
2、初步学会用刻度尺量物体的长度。
3、培养学生的动手能力、合作精神。
教学重点：
用厘米量较短的物体。
教学难点：
建立1厘米的长度观念。
教、学具准备：
多媒体课件、刻度尺、图钉、各种不同长度、不谈色的纸条。
教学过程：
步骤师 生 活 动修改意见
1、创设情景，导入新课
1、让学生用小木块来量一量一张纸条的长度。
2、让学生谈自己在量的过程中的感受。
3、贴在黑板上一张纸条，让学生来量。（很不方便）
4、说明：在日常生活中用木块来量物体的长度很不方便，为了准确、方便的表示物体的长度，人们发明了刻度尺。
认识厘米
（1）出示刻度尺，请小组内先说说自己知道刻度尺的那些知识。
（2）全班进行交流，教师小结（主要让学生知道尺上的1厘米）。
（3）让学生量一量身边的一些物体，说说那些物体的长是1厘米。（图钉，某个手指等）
（4）用自己想的方法表示一下1厘米的实际长度。
用厘米量
（1）小组合作，两个小组的纸条，并讨论量的方法。
（2）全班交流，学生总结方法：量时要把持的“0”刻度对准纸条的左端。在看纸条的右端对着几，这张纸条的长度就是几。
（3）请一名学生量黑板上的纸条，边量边说量的方法。
巩固练习
练习一第1题
让学生说说量的方法
第2题
量出几厘米，就在纸条上画上竖线，写上几厘米。
第3题
练习是，一要学生明确量的地方,二指导学生测量的方法。
总结：
通过这节课的学习，你学到了什么知识？
第三课时
教学内容：
认识米 用米量
教学目标：
1、认识长度单位米，初步建立1米的长度观念，知道1米=100厘米。
2、知道量比较长的物体要用米做单位，会用米量物体的长度。
3、培养学生的合作意识。
教学重点：学会测量长度的方法和建立1米的实际观念。
教学难点：建立1米的实际观念和知道1米=100厘米。
教学、具准备：多媒体课件、米尺、绳子、学生尺、等
教 学 过 程
游戏导入，引起认知冲突
请学生用厘米量黑板。（课独自探索，也可与他人合作）
认识米
提问：这样测量你感觉怎样？
(麻烦)
要想方便的测量就要认识另外一种尺子――米尺。
介绍米尺
展示米尺，告诉学生从1―100厘米着一段正好是“1米”。
建立表象
让学生用米尺和自己的身高比一比。获蒋两臂张开伸平庸米尺量出1米的长度。
用米量
用不同的方法测量1米的绳子长是多少厘米
汇报方法
（得出1米就是100厘米）
实践活动
测一测，你跳远的距离是多少米？
四人一组，分组操作。
每人量一物，其他同学监督帮助。
量一量：黑板长、宽，教室长、宽及教室门的高和宽。
学会解决实际问题：
1、小华用一根3米长的竹竿量水深，竹竿露出水面1米。水深多少米?
2、找一根绳子和一把米尺，去量一课树干周围有多长。想一想，应该怎样量？
总结
这节课你学到了什么本领？1米到底有多长?怎样估测物体的长度？
作业安排：略
第四课时
教学内容：
认识线段
教学目标:
1、初步认识线段，会用刻度尺量和画线段的长度（限整厘米）。
2、培养学生的动手能力。
教学重点：线段的特征。
教学难点：初步理解线段的概念。
教学具准备:尺子、课件等。
教学过程：
创设情景
同学们，我们在一年级的时候已经学习了图形的初步认识，你能说出我们学过的哪些图形吗？
（随学生的回答课件出示）
我们在画这些图形的时候，他们的边都是由线段组成的。
课件演示：将图形分解成线段。
告诉学生上面这些都是线段。
测量线段的长度
用尺子量一量课本第五页上面线段的长度，并把两德的结果些在书上。
线段与曲线的对比认识
线段“直”的特征。
屏显：
在这些图形中哪些是线段？分组讨论
通过刚才的讨论，你多线段有哪些认识？
画给定长度的线段：
在纸上任意画一条线段。
画一条3厘米长的线段。教师巡视指导。
课件出示线段的画法。
指导线段的画法
猜一猜游戏
课件出示同一条线段（横着和竖着的）猜一猜哪条线段长一些？
引起学生的争论，争论后课件演
八、示：把两条线段重合比一比。
学生操作：
如果你不相信，你就做两张同样长的纸条式一式，要一张横着，一张竖着看。
动手做一做
请同学们任选一条铁丝，做成自己喜欢的图形，并量出每条线段的长度。
谁能找出我们生活当中物体上的线段。
小结：
同学们，今天我们学习了线段的有关知识，你对线段有了哪些认识？
篇7：长度单位教学设计
【教学内容】
【教材设想】
一、背景分析
“统一长度单位”是小学阶段学习法定计量单位的开始。人教版教材在安排学习这部分内容时，注意呈现统一长度单位的过程，这是新课程与老教材的明显差异。教材的主题情境是：先让学生选用不同的物品(硬币、曲别针、三角形、木块)作标准去量数学课本的宽，并提示：“为什么同一边量出的结果不一样呢?”;再让学生用不同物品作标准量不同长度，教材让学生自由量，并思考：“为什么不同的东西量出的结果一样呢?”在此基础上，引导学生用相同的物品(如方木块)进行测量，去解决上面两个矛盾冲突，由此体会统一长度单位的必要性。
教材安排的意图十分明显：两个操作层次，实际上都是要让学生体会到统一长度单位的必要性。
通过研读教材，我们发现，虽然教材中两个操作层次最终指向的目的一致，但各自的思维角度不同，对学生来说是非常具有挑战性的。数学呈现时，常常省略了知识产生发展的曲折过程，以非常概括、严谨的形式展现出来，而小学生由于感性认识还不够丰富，抽象思维能力还未形成，所以学习这样的知识还是会感到抽象困难。尤其是本教材面向的上课对象是一年级学生，他们在生活中交流物体长度的经历比较少，要他们分层、理性地还原本教材知识内容的建构过程，是有相当难度的。
通过以上对教材、学情的分析，我们认为本节课的教学呈现以及预期落点有必要作适当的调整。
二、策略选择
1.变素材，降落点。
尊重教材的编写意图，同时考虑到一年级学生的认知基础和现有思维发展水平，改变操作层次，简化思维难度。在组织学生进行探究活动，让学生亲身经历长度单位形成的过程，在活动中建立对数学知识的理解同时，本节课的落点也适当调低，让学生能体会到长度单位不统一会给日常生活、交流带来不便，能初步感受统一长度单位的重要性和必要性。
2.重操作，重体验。
针对知识内容特点以及一年级学生的认知规律，实践操作、体验感悟，是一种重要的教学手段。因此，本节课应注意安排设计多项学生动手实践、合作交流探究的活动，努力使知识的还原建构过程生动活泼，使学生切实感受到数学知识在实际生活中的应用价值。同样，在认识长度单位“厘米”时，不仅要让学生知道单位的名称，更重要的是了解该长度单位的实际长度，能够在实际中应用。为了做到这一点，教学时应注意让学生通过看一看、比一比、找一找、估一估等实践活动，了解1厘米大致有多长，从而初步建立起厘米的长度表象。
【教学目标】
1.使学生经历长度单位形成的过程，初步体会统一单位长度的必要性;
2.通过活动，使学生认识长度单位“厘米”，初步建立1厘米的长度观念;
3.在实际动手测量与交流中，了解测量方法的多样性，提高学生解决问题的能力;
4.培养学生的观察、操作能力以及估测意识，提高学生的估测能力。
【教学准备】
学具准备：课件、边长1厘米的正方体、尺子等
【教学过程】
一、体会统一长度单位的必要性
1.导入新课，交流测量方法
2.动手测量：桌子的宽。
3.汇报结果：测量工具和结果。
4.讨论交流：多样的结果。
二、认识厘米
1.认识尺子
2.认识1厘米
(1)教师介绍1厘米
(2)学生找找1厘米
(3)师生比比1厘米
(4)学生找生活中大约1厘米的物体。
三、应用
(1)撕一撕：动手撕一段1厘米长的纸条。
(2)估一估：书本等物品大约有多长。
四、课堂总结
文档为doc格式
