Task2

task2笔记

chrome调试工具

1. 你好 Devtool

2. 调试HTML和CSS

1. 在网页中，鼠标右键点击审查元素(有的为检查)即可查看网页代码信息。
2. 在打开的网页代码页面中左上角点击Select an element in the page to inspect it可使页面进入活跃状态方便选择。
3. 在相应的代码行中鼠标右键点击Edit text可修改文本内容，点击Edit as THML可修改HTML代码内容。
4. 在网页代码界面右侧CSS中进行勾选√选择是否使用此种CSS。
5. 在CSS中添加或修改的字体大小可用上箭头↑和下箭头↓调整大小。
6. 在右侧CSS中点击源文件可进入Sources中进行调试，完成后右键点击Save as..即可保存到相应文件中。

3. devtools 也是个学习工具

1. 盒子模型
2. 临摹高手作品。在各大网站上使用审查元素(或检查)学习HTML和CSS。
3. 了解浏览器event

小白变怪兽第六章

1. CSS数据类型
2. 长度单位：像素px(绝对单位之一)
3. 相对长度。
   
   1. 百分比。width: 50%;
   2. em。当前元素字体的大小1em。
   3. rem。当前HTML字体大小1rem，与子元素中修改无关。
   4. vh视窗高度的1/100，vw视窗宽度的1/100。
4. 字体font。
   有字库字体

学习CSS布局

1. display属性
   block块级元素，重新开始一行并尽可能盛满容器。举例：div,p,form,和HTML5中的header,footer,section。
   inline行内元素，可以在段落中包裹一些文字不打乱段落整体布局。举例：a。
2. max-width定义元素的最大宽度。

3. 盒模型宽度。元素的边框和内边距会撑开元素，因而会出现相同宽度的元素显示实际大小不同的情况。举例如下：

   .simple {
   width: 500px;
   margin: 20px auto;
   }
   .fancy {
     width: 500px;
     margin: 20px auto;
     padding: 50px;
     border-width: 10px;
   }

4. box-sizing。当设置了box-sizing之后，元素的内边距和边框不再会增加它的宽度。同时，也可以用box-sizing使页面上所有的元素都有如此表现。举例如下：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}