加粗要这样写

<td><b>知识点</b></td>        

<td><b>重要程度</b></td>        

<td><b>难度</b></td>        

<td><b>学习周期</b></td>

<th> 必须放在 <tr> 行里面，不能直接放在 <table> 下面

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

超链接创建语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

这些都是img的属性

<ul>

<li></li>

</ul>

是无序列表这个最常用

<ol>

<li></li>

</ul>

是有序列表

先定义背景墙类

.box{

background:blue;

display: flex;

justify-content: center; /*flex-start; flex-end; flex-between;*/

}

再统一定义每个块大小

.box div {

     width:  20px;

      height: 20px;

}

分别定义每个块的颜色：

.box1 {

     background: red;

}

.box2 {

     background: orange;

}

.box3{

      background: green;

}

margin:-100px 0 0 -100px;

使用 这句代码让绝对定位的元素精确居中

1、top: 50%; left:50%;

这句是让.box1的左上角位于父容器中心点

2、margin:-100px  0 0 -100px;

将元素向左移动自身宽度的一半（100px),向上移动自身高度的一半（100px),使元素的中心点与父容器的中心点重合。

除了框长宽的设置，还需要考虑文字大小，别溢出框外

定位

绝对定位 position: absolute

相对定位position : relative

固定定位  position: fixed

块元素

<div><p>(<h1>....<h6>)<ol>\<ul>\<dl>,<table>\<address>\<blockquote>\<form>

内联元素

<a>\<span>\<br>\<i>\<em>\<strong>\<label>\<q>\<var>\<cite>\<code>

内联块元素

<img>\<input>

固定定位：

position: fixed; 

定位原点：

bottom:0

right:0

没理解任务，定位是什么意思

原点坐标？

层模型的相对定位，需要先建立关联关系

position: relative;

再进行位移：

left\top\bottom\right

向右移动，要选left

div1{ float:left;}

div2{float:right;}

元素的三种布局模型

1、流动模型 flow

2、浮动模型 float

3、层模型  layer

margin(top,right,bottom, left)

padding(top,right,bottom,left)

border(top,right,bottom,left)

填充后并未居中

需要使用text-align: ceter; 和line-height: 100px; 

#box1 {

    width: 100px;

    height: 100px;

    border: 1px solid red;

    padding: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

}

原来可以缩写，按（左上、右上、右下、左下）顺序

border-radius: 15px 30px 10px 30px;

设置圆角的命令有点长。不太方便。

border-top-right(left)-radius

border-bottom-left(right)-radius

这节课为何不讲清楚把哪个属性的值设为none?

display的值设置为none 

元素的高宽行高顶底边距都可设置

内联块状元素（inline-block）

同时具备内联元素、块状元素的特点，代码 display:inline-block

内联元素: <span>,<a><label>,<strong>,<em>(行内元素）

div{

       display:inline;//将元素设置 为内联元素。

}

内联元素特点：

常用的块状元素

<div>

<p>

<h1>

<h6>

<ol>

<dl>

<table>

<address>

<blockqueote>

<form>

常用的内联元素

<a> <span><br><i><em><strong><label><q><var><cite><code>

内联块状元素

<img><input>

设置文字或者图片居中

text-align: center/left/right.

字母间距： letter-spacing: 50px

单词间距：word-spacing: 20px

缩进  text-indent

2em:   文字的2倍

加大号

font-size

加粗

font-weight