html5页面尺寸

html5页面尺寸相关知识

• 网页尺寸scrollHeight、offsetHeight

  网页尺寸scrollHeight scrollHeight和scrollWidth，获取网页内容高度和宽度。 一、针对IE、Opera: scrollHeight 是网页内容实际高度，可以小于 clientHeight。 二、针对NS、FF: scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。 三、浏览器兼容性 var w=document.documentElement.scrollWidth document.body.scrollWidth; var h=document.documentElement.scrollHeight documen
• DOM 尺寸和位置

  我们经常在页面中，对 DOM 进行一些复杂的操作和计算中会对元素的尺寸和位置做计算，要想对元素的尺寸和位置很好的控制我们必须了解以下知识：clientWidth & clientHeightclientLeft & clientTopoffsetWidth & offsetHeightoffsetLeft & offsetTopoffsetParentscrollWidth & scrollHeightscrollLeft & scrollTopgetBoundingClientRect()clientWidth & clientHeight它们分别表示 DOM 的宽度和高度即元素的内容+内边距的大小，不包含 border 和 margin：clientLeft & clientTop它们表示 DOM 内边距到边框外边缘之间的水平和垂直距离，也就是左、上边框宽度：offsetWidth & offsetHeight它们表示 DOM 的内
• padding与容器尺寸关系

  padding与容器尺寸关系： padding不支持任何形式的负值。 1、对于block水平元素 padding百分比均是相对于宽度计算，轻松实现正方形。 padding值暴走（指值偏大），一定影响尺寸； width非auto，padding影响尺寸； width为auto或者box-sizing为border-box， 同时padding值没有暴走，不影响尺寸 2、对于inline内联水平元素 padding百分比均是相对于宽度计算。 默认的高度宽度细节有差异 padding会断行 水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景色（占据空间） 利
• CSS中的尺寸单位

  浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到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 可视范围的宽度或高度中较大的那个尺寸运算calc: 四则运算实例：h1 {    width: calc

html5页面尺寸相关课程

• 前端主流布局系统进阶与实战，轻松解决页面布局难题 实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。本课将围绕前端4大主流布局，通过大量的实际案例，带你边学习，边实操，让你系统掌握CSS布局进阶技术，轻松解决各种精美页面布局难题。

  讲师：西门老舅 初级 541人正在学习

• 掌握Taro多端框架 快速上手小程序/H5开发 对前端开发者而言，众多的技术栈中需要逐个学习，逐个开发。Taro的推出适应了潮流及趋势：一套代码运行在多种小程序/H5/React Native上，React式的代码风格便于学习，详实的项目开发过程带你了解Taro开发。

  讲师：水若寒宇 中级 668人正在学习

• Canvas玩儿转红包照片 通过实现最新的腾讯微信红包中图像模糊，图像展示等效果，深入了解canvas的潜能，将canvas的功能更好的结合到自己的产品中。同时完成一个炫丽的，能同时运行在多端的移动web app。

  讲师：liuyubobobo 中级 55395人正在学习

html5页面尺寸相关教程

• 3. 当前窗口的尺寸 通过 innerHeight 和 innerWidth 属性就可以获取到当前窗口的视口尺寸，视口可以理解为窗口中显示页面的部分。function logSize() { var width = window.innerWidth; var height = window.innerHeight; console.log('窗口尺寸：' + width + 'x' + height);}logSize();window.addEventListener('resize', function() { logSize();});
• 视频页面：ViewPager ViewPager 是一种可以让用户通过左右滑动来切换页面的控件，通过它我们可以展示超过屏幕尺寸大小的内容，在某种程度上它可以说是实现多页面的最佳方式，同时 ViewPager 还支持任意动态的添加/删除页面。比如我们可以将不同的类别的内容分别放在不同页面当中，然后通过滑动切换不同的类别从而给用户展示不同的页面，这个在类似百度App等新闻类App中非常适用。在 ViewPager 中插入“娱乐”、“国际”、“体育”、“星座”等等新闻类别，然后在不同的 View 中展示不同的新闻内容，还可以根据用户的喜好动态增加/删除某些页面，接下来就一起来看看如何完成多页视图。
• 3. 利用表格分割页面 众所周知，初期的网页设计都是用表格来分割页面的内容和结构。那么作为一节学习表格的知识点，我们势必也要掌握一下，如何用表格来规划网页的结构，由于已经不怎么用了，所以在这里简单给大家说一下原理就可以。它的原理就是把表格单元格作为单独的区域，甚至表格与表格之间的嵌套。我们都知道，在表格中 tr 标签代表了行。td 标签代表了列。th 标签代表了标题 （ table head ）。而 tr td th 又都能够设置大小，也就是长度和宽度。那么我们假设整个网页就是一个大表格，里面的形形色色的网页元素，比如图片，音频，视频，文字都分别位于这些不同尺寸的单元格里，这样就是利用表格这种 HTML 元素的特性来实现了网页内容的结构化。
• HTML5 地理位置 地理定位功能是 HTML5 新增的标准，早期的 HTML 和 JavaScript 没有操控硬件和文件的权限，因为页面交互效果比较简单；但是 HTML5 之后网页已经逐渐应用于各种复杂场景包括移动设备，所以增加了各种与硬件交互的 API 接口，地理位置就是其中之一。
• 1. 官方定义 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
• 2. 慕课解释 @media 通常被人们称为媒体查询，其实就是响应式，它通过设定后面的参数来实现在不同的浏览器可视尺寸下的展示效果。它不仅仅可以用来设置 CSS 样式，也可以设置 HTML页面中 link 的引用。

html5页面尺寸相关搜索

h1 h6 hack hadoop halt hana handler hanging hash hashtable haskell hatch hbase hbuilder hdfs head header header php headers headerstyle

查看更多慕课网实用课程