前端页面练习--2023/3/21

1.多使用div，对布局要多分析，到底要几个盒子来装

2.margin的使用方法

margin是外边距，即盒子与盒子之间的距离，在元素外边的空白区域

属性值可以是负数，注意设置为负值后会被覆盖，

margin简写的4种方式：

四个值：上 右 下 左 {margin:0px 0px 0px 40px;}

三个值：上 左右 下 {margin:10px 20px 30px ;}

二个值：上下 左右 {margin:10px 20px ;}

一个值：四个方向 margin:2px;（定义元素四周填充为2px）

3.padding的使用方法

padding是内边距，是盒子的边与盒子内部元素的距离。

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

4.使用display：none和visibility：hidden隐藏的区别

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

5.缩进 
text-indent: 1.5em;  em相对于当前字符

6.文字或者图片不能单独存在

7.改变图片地址
.weibo:hover {
      content: url("../img/icon_12_f0on.png");
  }