区块标签和分组标签通常在文档中充当容器和包含块等角色HTML中负责页面总体布局的文档结构都应由区块元素来定义这些新增标签主要是为替代div标签。这些新增的区块标签和div最大的区别就是其标签名带有语义代表浏览器的所有可视区域。body标签比较特殊，该标签同时也是区块标签。在大部分浏览器中，body标签有默认的宽度，即代表body中的主要内容区域。一个文档中只能有一个main标签，并且其父标签必...
一、静态布局(StaticLayout)网页上的所有元素的尺寸一律使用px作为单位。1、布局特点不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的，也就是设置了min-width，这样的话。如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法PC：居中布局，所有样式使用绝对宽度/高度(...
一、移动设备和电脑pc端的区别我们要学习移动端布局首先要了解“移动端”和“网页端”布局的不同之处在于哪里？也就是屏幕的尺寸！讲到屏幕尺寸我们就不得不提viewport，它是设备终端用来显示网页的那一块区域，而非浏览器的可视区域。它可以比浏览器可视区域大可以比可视区域小，但一般来说移动设备里的viewport都比可视区域要来的大。现在的浏览都会给提供一个viewport的一个默认的值，一般以9...
什么是盒模型？（1）css盒子模型仅仅是一个比喻，HTML中所有的标签都是盒子（2）就是在HTML中所有标签都可以设置（3）宽度/高度：指可以存放内容的区域（4）内边距：内容与边框的距离-填充物（5）边框：（6）外边距：盒子与盒子之间的距离盒子的宽度有不同的宽度（1）盒子宽度和高度–1、内容的宽度和高度就是通过标签的width/height属性设置的宽度和高度–2、元素的宽度和高度宽度=左边框...
1、NativeApp原生app手机应用程序使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C2、HybridApp混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用3、WebApp基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用视口是移动设备上用来显示网页的区域，一般会比移动设备可...
流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕宽度进行伸缩，不受固定像素限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。传统布局：兼容性好布局繁琐局限性，不能在移动端很好的布局flex弹性布局：操作方便，布局极为简单，移动端应用广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅支持部分建议：如果是PC端页面布局，我们还是传...
流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下：目标元素宽度/父盒子宽度=百分数宽度下面通过一个案例来演示固定布局如何转换为百分比布局，如示例1所示。【示例1】 固定布局转换为百分比布局打开Chrome浏览器访问示例代码，页面效果如图1所示。图1运行效果可以尝试改变浏览...
我们结合移动设备（手机和平板电脑）的特性，介绍HTML5中新增的语义化标签元素，以及在移动Web浏览器下Web页面布局的知识及例子。HTML5标准添加的新元素当中，用于标识常见页面结构的包括：section、header、footer、nav、article和mark等。元素定义文档的页面组合，通常是一些引导和导航信息。而定义中说明标签内通常包含section的头部信息，如hl-h6或hgro...
HTMLCSS+DIV实现整体布局1、技术目标：开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局2、什么是W3C标准？W3C：WorldWideWebConsortium，万维网联盟W3C的职能：负责制定和维护Web行业标准W3C标准包括一系列的标准：HTML内容方面：XHTML样式美化方面：CSS结构文档访问方面：DOM页面交互方面：ECMAScript……等...