语源科技BlogJava-OldBoy

HTML 5漫谈-04-流式布局

OldBoy — Wed, 04 Jan 2017 06:33:00 GMT

流式布局的关键，是用百分比设计HTML元素的with、margin和padding属性。

首先看一段HTML和CSS代码，如代码清单4-1所示。

------------------------------------------------------------------------ 代码清单 4-1 ------------------------------------------------------------------------

DOCTYPE html>

<html>

<head>

<title>流式布局title>

<title>Documenttitle>

div {

width: 90%;

height: 200px;

background: blue;

margin: 0 auto;

}

style>

head>

<body>

body>

html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

元素的相对宽度的参照物是其父元素。代码中div元素的父元素是body，所以CSS中对div的宽度设计为90%，是指其占body元素宽度的90%。

有必须要提示一点，在《HTML5漫谈-03-盒子模型》中提到过元素的width属性的默认值是content盒子的宽度，元素实际占的宽度还要加上padding和border的值。

在上面代码的基础上，于div元素中增加两个p元素，如果代码清单4-2所示。

------------------------------------------------------------------------ 代码清单 4-2 ------------------------------------------------------------------------

DOCTYPE html>

<html>

<head>

<title>流式布局title>

<title>Documenttitle>

div {

width: 90%;

height: 200px;

background: blue;

margin: 0 auto;

}

p.no1 {

width: 60%;

height: 150px;

background: yellow;

padding-left: 10%;

float: left;

}

p.no2 {

width: 20%;

padding: 0 5%;

height: 150px;

background: red;

float: left;

}

style>

head>

<body>

<div>

div>

body>

html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

p.no1和p.no2的width属性值分别是60%和20%，是指相对它们父元素div的width属性来说的。很重要的一点是，p.no01还设置了padding-left的值为10%，这个值也是相对于父元素div的width属性来说的！所以p.no1实际占用的宽度为70%。同理p.no2实际占有的宽度为30%。

不管是width属性，还是padding和margin属性，对其进行百分比设置的时候，参照的都是父元素的width属性的值。

min-width属性、max-width属性

当宽度是百分比来指定时，通常要设置最小的宽度和最大的宽度。详见代码清单4-3所示。

------------------------------------------------------------------------ 代码清单 4-3 ------------------------------------------------------------------------

div {

width: 90%;

height: 200px;

background: blue;

margin: 0 auto;

max-width: 1215px;

min-width: 400px;

}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

div的宽度是body宽度的90%，但是最大不会超过1215px，最小不会小于400px。

OldBoy 2017-01-04 14:33 发表评论

HTML 5漫谈-03-盒子模型

OldBoy — Wed, 04 Jan 2017 05:04:00 GMT

页面的结构要与页面的表现分离，HTML负责页面结构，CSS负责页面表现。也就是说，CSS是用来修饰HTML元素的。这就涉及到一个问题，就是从CSS的角度如何看待一个HTML元素。答案就是“盒子模型”。从CSS的角度看，每一个HTML元素都是以盒子的方式呈现的。

首先看一段HTML代码，如代码清单3-1所示。

---------------------------------------------- 代码清单 3-1 -----------------------------------------------

DOCTYPE html>

<html>

<head>

<title>HTML 5 Demotitle>

head>

<body>

<div>CSS盒子模型div>

body>

html>

----------------------------------------------------------------------------------------------------------

在Chrome浏览器“开发者工具”视图中可以看到示例代码中div元素的盒子模型，如图3-1所示。

---------------------------------------------- 图 3-1 ----------------------------------------------------

----------------------------------------------------------------------------------------------------------

示例中的div元素除了内容之外（蓝色部分），还包括padding、border和margin，就像多个盒子套在一起，这也许就是“盒子模型”名字的由来吧。如果打个比方的话，HTML元素在CSS看来就相当于一幅画，内容就是画本身，padding相当于画周围的留白，border是画框，margin就是两幅画之间的距离。

在Chrome浏览器下，padding和border的默认值为0，margin的默认值为8。运行这段代码的电脑的屏幕分辨率为1366，而1350 x 10是div内容部分的宽度，也就是div元素width属性的值。可以看得出来，HTML元素width属性的宽度默认是以“外扩”的方式呈现的。

下面通过CSS对这个div盒子的各个部分做设置，如代码清单3-2所示。
---------------------------------------------- 代码清单 3-2 -----------------------------------------------
div {

width: 200px;

padding: 10px;

border: solid 5px;

margin: 20px;

}

----------------------------------------------------------------------------------------------------------

在HTML页面的head元素中以link方式引入CSS样式表，如代码清单3-3所示：
---------------------------------------------- 代码清单 3-3 -----------------------------------------------

DOCTYPE html>

<html>

<head>

<title>HTML 5 Demotitle>

head>

<body>

<div>CSS盒子模型div>

body>

html>

-----------------------------------------------------------------------------------------------------
设置了样式之后，这个div盒子模型的变化如图3-2所示。

---------------------------------------------- 图 3-2 ----------------------------------------------------

----------------------------------------------------------------------------------------------------------

此时，这个div实际占有的宽度为230 x 48，即在with的基础上加padding和border的宽度。

在CSS中增加一个有关元素宽度设置的属性：box-sizing，这个属性是用来规定width设置的是谁的宽度。修改之前的CSS代码，增加box-sizing的设置，如果代码清单3-4所示。

---------------------------------------------- 代码清单 3-4 -----------------------------------------------
div {

width: 200px;

padding: 10px;

border: solid 5px;

margin: 20px;

box-sizing: border-box;

}

----------------------------------------------------------------------------------------------------------

修改后这个div的盒子模型如图3-3所示。

---------------------------------------------- 图 3-3 ----------------------------------------------------

----------------------------------------------------------------------------------------------------------

box-size的值设置为border-box表示元素的with属性是指border这个盒子的宽度，而不再是内容（content）这个盒子的宽度了。此时with属性的值表现在“内减”，而不是之前默认的“外扩”。

box-sizing属性的值还可以是padding-box和content-box(默认)。这个属性在流式布局中特别的常用！

OldBoy 2017-01-04 13:04 发表评论

HTML 5漫谈-02-HTML5带来的变化

OldBoy — Wed, 04 Jan 2017 03:33:00 GMT

    首先看一段HTML4中常见的JavaScript代码：


     在HTML5中同样的页面会是怎样的代码呈现呢？


    原本在HMTL4中一些需要借助于JavaScript实现的功能，被HTML 5的新属性所取代。
    在HTML4中，通常会使用div标签完成页面的布局，通过div的id属性和class属性来区别每一部分div的语义。


    同样的页面结构，在HTML5中是如何实现的呢？

HTML4中用于页面布局的div，被HTML 5中增加的一些带有语义的标签所取代。这样不但使页面结构更加清晰，而且有利于搜索引擎解析页面。本质上来讲，header、footer这样的标签就是命名的div。此外HTML 5更加强调文档结构与呈现相分离。例如， b标签在HTML 4中会只是浏览器以粗体显示其中的内容，而HTML 5不再提倡这种纯粹用于呈现的标签，转而用CSS来负责呈现。

HTML 5的另一大改进就是支持在浏览器中直接播放音频和视频文件。请注意是“直接”，这意味着不需要任何插件。这可以看作是W3C对于插件泛滥的一种反应。原生的（native）多媒体支持再结HTML的其它特性，可以大有作为。

在HTML 5新增的元素中，canvas可谓震撼。canvas提供了一个通用的绘图平面，开发人员可以用它完成一些通常要用Adobe Flash来完成的任务。此外，因为canvas必须要用到JavaScript，从而编程成了HTML文档中第一层次的事情，这是一个重大的转变。

OldBoy 2017-01-04 11:33 发表评论

HTML 5漫谈-01-响应式网页设计

OldBoy — Wed, 04 Jan 2017 02:48:00 GMT

响应式网页设计追求的是根据用户设备的不同、备朝向的不同，以及设备屏幕大小的不同，提供不同的网页设计，以达到都美观的效果。

为了解决手机浏览网页的问题，许多网站都提供了单独的手机版本。比如，在手机浏览器地址栏输入：www.sohuc.om，打开搜狐的主页后，再去看浏览器地址栏，上面的网址实际上是：http://m.sohu.com；同样的，用手机浏览器访问淘宝的主页，实际访问的网址会是：https://m.taobao.com。

这种解决方案下，需要用到设备检测技术，最简单的实现方式就是应用名为deviceJS的JavaScript库（http://www.devicejs.org）。deviceJSDevice.js 是一个可以检测设备、设备方向和操作系统和方向等。deviceJS的简单的示例：

if (device.mobile()) {

window.location = "http://m.sohu.com";

}

script>

开发可以使用Chrome浏览器的设备模拟功能，来实现移动设备的测试。打开Chrome浏览器之后，按F12，进入“开发者工具”界面。单击开发者工具栏右上角的“Toggle Device Model”按钮，就会打开设备模式。

这时在浏览器地址栏输入：www.sohu.com回车，就会看到搜狐移动版的页面，而浏览器地址栏会变为：m.sohu.com。

网站的移动版仅仅解决了手机浏览网页的问题，远远不能适应众多上网设备屏幕宽度的差异，于是流式布局技术应运而生。有关流式布局网站的示例，可以访问：http://mediaqueri.es，上面收录了各种风格的使用流式布局设计的网页。

流式布局的本质，就是在不同屏幕宽度下应用不同的CSS样式，以适应设备宽度或者浏览器宽度的改变。要做到这一点，有两个关键的技术，一是HTML标记的宽度和高度要使用相对值，二是对窗口宽度改变做出判断并更换样式表。

先来说第一点，网页中的HTML标记的宽度和高度，必须使用相对值（百分比），而不能是绝对值。下面是一个简单的示例网页：

DOCTYPE html>

<html>

<head>

<title>流式布局 - 相对宽度和高度值title>

html, body {

height: 100%;

}

div {

width: 90%;

height: 45%;

background: blue;

margin: 0 auto;

}

p.class1 {

width: 60%;

height: 70%;

background: yellow;

padding-left: 10%;

float: left;

}

p.class2 {

width: 20%;

padding: 0 5%;

height: 30%;

background: red;

float: left;

}

style>

head>

<body>

<div>

<p class="class1">文字内容p>

<p class="class2">文字内容p>

div>

body>

html>

可以观察浏览器在全屏状态下页面的显示效果，然后调整浏览器窗口宽度后，观察页面的显示效果。
流式布局的另外一项关键的技术就是对窗口宽度改变做出判断并更换样式表。听起来挺难，实际上很容易，就是使用CSS3的媒体查询，看下面的代码片段：

这段代码的意思是说：当屏幕宽度大于等于800时，应用样式表1.css；当屏幕宽度小于等于799和大于等于600时，应用样式表2.css；当屏幕宽度小于等于599时应用样式表3.css。

OldBoy 2017-01-04 10:48 发表评论