HTML基础知识（二）margin属性、float浮动、：hover鼠标悬停、文本属性、＜img＞图片的引入

一、margin属性、float浮动、：hover鼠标悬停、文本属性、<img>图片的引入

margin 外边距

• margin-top

• margin-right

• margin-bottom

• margin-left

值

• 一个值 控制4个方向

• 两个值 控制上下 左右

• 三个值 控制 上 左右 下

• 四个值 分别控制4个方向

注：值的控制方向是按照顺时针方向

特殊：

margin的值:

• px

• auto 块级元素 水平方向的居中

float 浮动(布局方式之一)

• left 向左浮动

• right 向右浮动

• none 默认值

:hover 鼠标悬停

/* 鼠标悬停 添加背景颜色 */
.box:hover{
    background-color: hotpink;
}

文本的属性

• font-size 字体大小

• text-align 文本对齐方式

  • left 左对齐

  • right 右对齐

  • center 居中对齐

  • justify 两端对齐

• line-height 行距

  • 当行距与高度值相等的时候，做【单行文本】垂直居中

• color 字体颜色

<img> 图片的引入

<img src="图片的路径" alt="提示信息" >

示例

<img src="./images/pic5.jpg" alt="">    <!--相对路径-->
​
<!--绝对路径-->
<img src="C:\Users\Administrator\Desktop\0713基础班\day03\images\5.jpg" alt=""> 
<img src="https://img.alicdn.com/tps/i4/TB1soMIJVXXXXbjXXXXSutbFXXX.jpg" alt="">
​

./ 同一目录

/ 表示下一级目录