居中方法总结

今天是根据网上提供的JPG和psd设计稿来实现网页的设计，首先先切图，然再敲网页代码，切图过程是需要涉及到使用ps的，而我也在学习切图的过程中，学习了ps，熟悉了它的一些基本操作。在敲代码的过程中也是遇到很多问题，但是经过这些问题的解决，自己的实际水平得到了更深一步的提高。
这是我这次作业的demo：转换图片格式到网页

圣杯布局

圣杯模型

圣杯模型就是分为三栏，中间一栏用来渲染自适应，左右两侧两栏是固定宽度。有三种办法可以实现三栏左右两栏宽度固定，中间自适应。

绝对定位法

左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

CSS布局

display属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素：header 、 footer 、 section等等。

弹性盒子

flex

弹性盒子是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。
长久以来，唯一可用的且有稳定的跨浏览器兼容性的能用来构建 CSS 布局的工具只有 floats 和 positioning。这些都很好而且有效，但是在某些布局方面它们就有限制，并且难以实现。
以下简单的布局要求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的：

定位

定位

定位的整个想法是允许我们覆盖基本文档流行为，以产生有趣的效果。如果想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是我们的工具。或者，如果想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。
有许多不同类型的定位，可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用position属性。

巩固框模型

今天继续巩固一些CSS知识点，我所记的都是我平时容易忽略或者记得不是非常熟悉的知识点，要想看全面的知识点的话可以去看我前面的CSS笔记博文，上面就是一系列比较详细的知识点，第二次所学的系列里面都是比较零散的知识点。

框模型

文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下:

width 和 height

width和height设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。

背景+边框+列表+表格

继续巩固CSS样式
今天继续巩固学习CSS样式中的背景、边框和列表属性。

背景

元素的背景是指，在元素内容、内边距和边界下层的区域。默认情况下就是这样——在新的浏览器中，你可以使用 background-clip属性改变背景所占用的区域。
背景并不在外边距下层——外边距不是元素区域的一部分，而是元素外面的区域。

CSS样式巩固

今天又重新接触到了CSS，在第三天的课程里面也学到了，所以不仅重温了CSS理论知识，也让我更系统性的记住了这些样式属性的使用方法。

盒模型

CSS盒模型是网络布局的基础——每个元素表示为一个矩形盒子，矩形盒子的content、padding、border 和 margin像是洋葱一样嵌套。当浏览器渲染一个页面的时候，它会分析哪些样式渲染到每个盒子的内容 (content) 当中，盒子周围的 “洋葱层” （padding、border、margin）有多大，以及盒子间的位置关系。在学习如何使用CSS布局之前，你需要理解盒子模型。

思考问题

1、HTML是什么，HTML5是什么

1
2

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
HTML5是最新的HTML标准，拥有更丰富的语义、图形以及多媒体元素等内容。

2、HTML元素标签、属性都是什么概念？

1
2

HTML不是编程语言，是标记语言，所以要使用标记标签来描述网页。
属性是用来提供HTML标签更多的信息。

HTML+Css阶段一

今天巩固了前端，重新把那些知识点都看了一遍，发现自己差的还很远，基础知识也很不牢靠，特别是JS，好在我这几天买了一本红宝书，专门来学习JS框架。
由于我现在在跟着百度前端技术学院重新学习前端的相关知识，并且它也将课程按照天数来分，所以，我也将在接下来的日子里，按照天数，记录我每一天的学习情况和学习笔记，还有一些我自己的心得体会，当然我也会跟着它的指示做一些小实验和小项目，动手的部分就不用写的太详细，但是在我的博客里面记录的这些笔记可能是很零散的，也可能会有一些重复，因为我是把我自己容易搞混的点和我自己觉得很重要的知识点记了下来。