这节课我学到了span这个标签，对于文字的重点描述还是比较重要的，其他的像</p><h1> 等，他们如果出现的话会另外加一行的，而span不会的，span只会对所圈的文字进行标记，加粗等设置样式用，很不错。而设置某一段文本的样式的话我们只需要z在<>这个中括号中设置，比如设置颜色 style=“color :red".

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

设置position:absolute(表示绝对定位

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

分类

    HTML元素可以分为: 

        块级元素、内联元素《行级元素》、内联块级元素《行内块级元素》

块级元素

1、一个块级元素独占一行;

2、元素的高、宽度、行高、margin、padding都可以设置;

3、宽度不设置的情况下默认是父元素的100%;

4、设置元素display: block可以将元素转换为块级元素。

5、常见的块级元素:  <div>、<p>、<h1>...<h6>、

                                <ol>、<ul>、<table>、<form>、

                                <dl>、<address>、<blockquote> 

内联元素

1、和其他元素都在同一行上;

2、元素的宽度和高度都不能设置;

3、顶部和底部边距不能设置(margin,padding):

4、元素的宽度就是它包含的内容的宽度，不可改变;

5、设置display: inline可以将元素转换为内联元素

6、常用的内联元素有:   <a>、<i>、<br>、<span>、<label>、

                                    <em>、<strong>、<q>、<var>、<cite>、<code>

内联块级元素

1、和其他元素都在一行上;

2、元素的宽度、高度、边距(margin、padding)都能设置

3、设置inline-block可以将元素转换为内联块级元素

4、float: left/right、position: absolute/fixed可以将元素设置为内联块级元素

5、常见的内联块级元素有:   <img>、<input>

长度值(font-size:xx): 

    px                90像素=1英寸

    em                例: 如果font-size 为 14px ，那么 1em = 14px；

                              如果 font-size 为 18px，那么 1em = 18px。

    百分比            例: p{font-size:12px;line-height:130%}
                               设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form
 <label for="email">输入你的邮箱地址</label>
 <input type="email" id="email" placeholder="Enter email">
</form>

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）

border:1px solid red  实线边框    dotted black 虚线边框

text-indent:2em;  空格缩进 两倍

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

text-decoration：overline

line-through underline 上中下线

align-items: flex-start | flex-end | center | baseline | stretch;

结合右侧编辑器中的布局以及下面的样式设置进行理解：

flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

center： 交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

.box {
       height: 300px;
       background: blue;
       display: flex;
       align-items: stretch;
   }

   .box div {
       /*不设置高度，元素在垂直方向上铺满父容器*/
       width: 200px;
   }

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

flex-end：右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

center： 居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

space-between：两端对齐，项目之间的间隔都相等。

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }