css基础知识
HTML与CSS的关系：HTML是构建网页的基础，不光负责网页的内容部分还负责人网页的呈现部分，这让显示形式变得非常呆板，CSS的出现改变了不断修改的HTML凌乱不堪的格局，实现了样式与内容的分离，方便团队的开发。
CSS基础知识：
在页面中定义CSS写法：我们一般把CSS放到head中使用一对style标签组织起来样式如下：选择器{ 属性+属性的值}
初识选择器（简单选择器）：
CSS将简单选择器划分三大类：
1、标签选择器：标签名称定义，应用于此类标签。
2、ID选择器：#字打头定义，应用于对应的HTML元素。
3、类选择器： .字打头定义，应用于对应的class的HTML元素。
规则——类型：
1、font-size：文本字体的大小。
2、font-family：文本字体的样式。
3、font-weight：文本加粗。
4、line-height：行高
5，text-decoration：装饰线的设置
6，text-indent：文本缩进。
规则——背景（background）：
1、background-color：背景颜色
2、background-image：背景图片
3、background-repeat：平铺样式
4、background-position：背景图片的定位
规则——区块：
1、Word-spacing：词间距
2、letter-spacing：字符间距
3、text-align：文本对齐
规则——定位（position）：
1、absolute：绝对定位（可以通过margin来进行微小的移位）
2、relative：相对定位（相对于元素自身在网页中的位置）
3、static：默认值（静态定位）
溢出：
如果我们给一个容器设置了宽度和高度，而内容太多，超出了这个宽度和高度，这就叫溢出。CSSoverflow定义了元素的溢出应如何显示：
1、hidden：表示溢出的部分隐藏掉。
2、scroll：表示溢出时显示滚动条。
3、visible：表示即使溢出也要显示。
4、inherit：表示根据父容器的值进行继承
5、auto：表示溢出时显示滚动条，不溢出则不显示
鼠标形状：通过设置Cursor可以修改鼠标形状。
选择器（复杂选择器）：
1、通用选择器：适用于所有的页面元素，类似于通配符。用法 *{ 属性+属性的值}
2、派生选择器（后代选择器）：用法：两个选择器之间用空格隔开 选择器1 选择器2{ 属性+属性的值}
3、子类选择器：用法：两个选择器之间使用大于号隔开 选择器1>选择器2{ 属性+属性的值}
4、属性选择器：用法：*[属性+属性的值]
5、相邻选择器：用法：选择器1+选择器2{ 属性+属性的值}
伪类:
1、长子伪类
2、锚点伪类
3、动态伪类
4、语言伪类
块元素和行内元素：
块级元素 和行级元素的互相转换：
1、设置行内元素的display为block或者inline-block
2、把块级元素display属性设置为inline
3、补充说明：设置inline元素为float时，此元素自动变为block元素。
CSS引用方式：
1、内联样式表（行内样式）：直接定义在标签内部style中
2、文档样式表（内部样式）：定义在head中
3、外部样式表：定义在单独的文件中利用link元素引用
布局基础：
记忆要点：1、盒子的整体宽度并非width属性而是=border-left+padding-left+width+padding+right+border-right高度同理
2、盒子A和盒子B同行显示宽度等于两者相加，上下等于两者的最大值
布局模型：
布局模型可以分为：1、流动模型：不浮动、不定位、标注流写法
2、半浮动模型：不定位 浮动写法
3、完全浮动模型：定位、浮动结合写法
浮动塌陷问题以及解决办法：
浮动塌陷：如果一个父亲盒子中，包含多个孩子盒子，我们一般不设置父亲盒子的高度，其高度往往由内（例如：孩子盒子）容撑起来。如果孩子盒子使用了float，那还能撑起父亲盒子么？答案是否定的。因而如果父盒子中的所有孩子盒子都是float的，则此父容器的高度为0，这就是父亲盒子的塌陷问题。
解决办法：1、空标签并设置清除浮动：clear 设置属性：left：清除左侧浮动引起的塌陷。right：清除右侧浮动引起的塌陷。both：清除左右两侧浮动引起的塌陷。
2、父亲盒子设置样式：overflow为auto或者hidden。
3、为父亲盒子设置after伪类
宏观布局：页面都是由一个个方块 组成的，方块之间可以并行排列，可以嵌套，有各自的宽度和高度，方块的叠加和排列最终会形成页面的基本布局。
微观布局：如果说宏观布局是大刀阔斧地构建出轮廓的话，那微观布局往往就是精雕细琢的加工，因而更加复杂。
总结：
- 进行基于上中下的宏观布局、在某个区域内进行基于左中右的布局。
- 使用相对定位的方式实现。
- 使用绝对定位的方式实现。
- 理解了基于叠盖的微观布局技巧。
- 父容器的背景在最下方，其内部的孩子容器，一个一个地叠盖其上。
- 体会和理解了padding和margin等的使用。
