二〇二三·二·十五——日报

知识点：

1. margin：

   1. 两个参数情况下，（上下），（左右）
   2. 四个参数情况下：（上）,（右）,（下）,（左）

2. 使用转义字符在html里插入字符：

     空格
   > 大于 >
   &lt; 小于 <
   

3. 段落缩进：

   text-indent: xem; 
   

4. 块命名条件

   1. 不同对象
   2. 未来可能更改

5. 获得图片内容地址并通过hover事件更改内容

   <div>
       <img class="map" src="XXXXXXXXXXXX">
   </div>
   

   .map:hover{
       content: url("YYYYYYYYYY")
   }
   

问题：

块的排列问题：

父容器调用

display:flex;

函数时，所有子容器都会放在一行，如果想要将多个子容器垂直排列水平居中，建议在多个子容器外再套上一层div块，在父容器调用

display:flex;
justify-content: center;/*居中对齐*/
align-items: center;/*上下居中*/

形如

<div id="father">
	<div>
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	</div>
</div>

明天继续敲前端