<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
/>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<
title
>Page Title
</
title
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<
link
rel=
"stylesheet"
type=
"text/css"
media=
"screen"
href=
"main.css"
/>
<
script
src=
"main.js"
>
<
/
script
>
<
style
type=
"text/css"
>
p{
width:
800px;
height:
100px;
background-color:
aqua;
}
div{
width:
300px;
height:
100px;
background-color:
green;
}
span{
background-color:
teal;
}
img{
width:
300px;
height:
300px;
}
input{
width:
300px;
height:
30px;
}
/* Display: inline 将元素转化为行内元素
Display：inline-block 将元素转化行内块元素
Display: block 将元素转化为块元素 */
a{
width:
300px;
height:
300px;
background-color:
red;
/* display: inline-block; */
/* 将行内元素转化为行内块元素 */
display:
block;
/* 将行内元素转化为块元素 */
}
div{
width:
300px;
height:
300px;
background-color:
pink;
/* 将行内元素转化为行内元素 因为行内元素不能设置宽度与高度所以不起作用 */
display:
inline;
}
<
/
style
>
</
head
>
<
body
>
<
p
>段落标签
典型代表：
div,p,li,h1...
<
br
>
特点：
☞元素自己独占一行显示（与宽度无关）
<
br
>
☞可以设置宽度和高度
<
br
>
☞当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。
</
p
>
<
div
>div标签
<
p
>
<
span
>块级元
</
span
>
</
p
>
</
div
>
<
br
>
<
br
>
<
p
>
<
span
>
行标签
行内元素
典型代表:
Span， a, font, strong...
特点：
<
br
>
☞元素在一行上显示
<
br
>
☞不能直接设置宽度和高度
</
span
>
</
p
>
<
strong
>中国
</
strong
>
<
a
href=
"https://www.baidu.com"
>百度
</
a
>
<
br
>
<
br
>
<
p
> ３.3 行内块元素
典型代表:
Image, input(表单控件)
特点：
<
br
>
☞ 元素在一行上显示
<
br
>
☞ 可以设置宽度和高度
<
br
>
</
p
>
<
img
src=
"D:\html\img\TIM图片20180116211527.jpg"
alt=
"女孩"
>
<
input
type=
"text"
>
<
input
type=
"button"
value=
"提交"
>
<
br
>
<
br
>
<
br
>
<!-- Display: inline 将元素转化为行内元素
Display：inline-block 将元素转化行内块元素
Display: block 将元素转化为块元素 -->
<
div
></
div
>
<
a
href=
"#"
>百度
</
a
>
<
a
href=
"#"
>google
</
a
>
</
body
>
</
html
>