今天回头看看这些细节好多都忘记了,就做简单记录下。
元素的显示模式分为 1、块元素 2、行内元素两大类
1、块元素(占据一行,可以设置宽高属性)
h1~h6, p , div,ul, ol, li等
2、行内元素(一行内可有多个,不可以设置宽高属性)
a, strong,b, em, i, del, s,sin,u,span等
其中span标签是最典型的行内元素(也叫内联元素)
3、行内块元素
img,input,td等。
其中CSS样式为
- 行元素转块级元素 dispaly:block;
- 块元素转换成行内元素 display:inline;
- 行内元素转换成行内块元素 display:inline-block;
下面我们举例具体分辨下
- 行元素转块级元素 dispaly:block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hang {
width: 100px;
height: 100px;
background-color: rgb(154, 243, 237);
}
.chang {
width:</