发表于： 2017-04-22 00:30:47
2 530
开始一个编程工作的第一步，是在计算机中搭建自己的编程环境。经过比对，推荐使用webstorm软件。官网下载地址http://www.jetbrains.com/webstorm/，激活码见任务二。
<!DOCTYPE html>这一声明必须是 HTML 文档的第一行。
<html lang=“en”>声明了页面中的主要语言为英文。
<meta charset="utf-8">表示告知浏览器当前页面要以utf8解码，这一语句必须放在<head>标签中，以上都是标准的html5编程必须注意的部分。
在绘制九宫格的过程中，首先要绘制出九个一模一样的正方形，使用<div>元素绘制即可。<div>元素是块元素，块元素会在文档中划分出独立的一个区域，并且按照html标记中出现的顺序放置在页面上。因此，每一个<div>元素都会在页面中带来换行，九个正方形将依次流入页面呈现一个竖排。为了使正方形能够每三个放置在一排中，使用float属性。
float属性即将元素从页面从上至下的“元素流”中摘出，向左（或向右）浮动一个元素，而其余的元素则会绕着这个元素流动。使用float：right；将全部元素浮动起来，这里不需要将每一个正方形单独命名一个id并依次进行浮动，九宫格是通过调整正方形的尺寸达成的效果。
从CSS的角度看，每一个元素就是一个盒子。
content area为内容区，包含内容，在最内部。
padding包围content area，为内容到边框border之间的内边距。
border包围padding。
margin包围所有部分，是外边距，决定了盒与盒之间的距离。
要保证九宫格的正方形们可以间距均匀的分布，就是通过调整margin达到的。
想要自适应的页面，要使用百分比或em设置正方形尺寸，而不是使用px（像素）。
设置正方形width为30%，正方形的左右方向共6个margin填充，所以宽度为（100%-3*30%）/6=1.6%，竖直方向上margin会发生重叠所以为2倍左右方向上的margin。
设置background-color为yellow，padding在border内进行填充，当padding和margin为竖直方向上时，用百分比作为单位，会按照父级元素作为百分比的缩放标准，所以30%padding使正方形的长和宽相等。
ctrl+shift+I 打开chrome的开发者工具，点击elements左边的图标即可模拟手机访问。
明天计划开始任务二的学习。
用类比的方法记忆盒模型：如果盒模型是一盒巧克力，content area是巧克力本体，padding是固定巧克力位置的食品级塑料托，border是装巧克力的金属盒，margin是最外层包装纸。
返回列表
评论