第一周（9.15-9.22）学习笔记 24软工陈奕君
学习收获：
掌握了CSS字体样式控制的各项属性和应用场景
深入理解了盒子模型的概念和实际应用
学会了三种布局模型的区别和使用方法
掌握了Flex布局的基本原理和常用属性
自己使用html+css+js制作了一个仿哔哩哔哩的网站（还在制作中），预计第二周内完成
学习笔记：
body {
font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体栈，浏览器会优先使用第一个，找不到则用下一个 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体粗细: normal, bold, 100~900 */
font-style: italic; /* 字体样式: normal, italic */
}
h1 {
text-align: center; /* 文本对齐: left, center, right, justify */
text-decoration: underline; /* 文本装饰: none, underline, overline, line-through */
line-height: 1.6; /* 行高，单位可以是px, em, 或无单位的倍数（推荐） */
letter-spacing: 2px; /* 字符间距 */
text-indent: 2em; /* 首行缩进 */
}
盒子模型：
内容区域：content
内边距区域（内填充）：padding-（top,right,bottom,left）
边框区域：border
作用：给设置边框粗细、边框样式、边框颜色效果。
{
边框粗细 border-width 数字+px
边框样式：border-style（实线solid、虚线dashed、点线dotted）
边框颜色：border-color 颜色取值
}
外边距区域：margin
代码：
div{
width:200px;（内容区域）
padding:20px;（内填充）
border:1px solid red;（边框）
margin:10px;（外边距）
}
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
层模型有三种形式：
1、绝对定位(position: absolute)：相对于其最接近的一个具有定位属性的父包含块进行绝对定位
2、相对定位(position: relative)：相对于以前的位置移动
3、固定定位(position: fixed)：它的相对移动的坐标是视图（屏幕内的网页窗口）本身
flex弹性盒模型：
justify-content：属性定义了项目在主轴上的对齐方式。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items 属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
行内元素：水平居中是通过给父元素设置 text-align:center 来实现的。
块状元素：通过设置“左右margin”值为“auto”来实现居中的（margin:auto）