一:行内元素/块级元素/行内块级元素的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
display属性:常用的属性值
display: block; 代表: div,p,<h1>..<h6>,<ol>,<ul>,<table>,<form>
display: inline; 代表: <span>,<a>,<i>
display: inline-block; 代表:<img>,<input|select|textarea|button>
display: none;
*/
*{
margin: 0px;
padding: 0px;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 20px;
margin-top: 20px;
padding-left: 20px;
padding-top: 20px;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
/*行内元素,上下外边距无效!*/
margin-top: 20px;
margin-bottom: 20px;
}
img{
width: 100px;
height: 50px;
border: 1px solid red;
margin-left: 20px;
margin-top: 20px;
padding-left: 20px;
padding-top: 20px;
}
</style>
</head>
<body>
<!--
一:行内元素的特点
1.不会独占一行
2.设置宽高无效,宽高的大小由内容撑开!
3.设置上下外边距无效,(其他的方向的内/外都行)
4.行内元素只能包含行内元素
-->
<span>我是行内元素</span>
<!--
二:块级元素的特点
1.不设置宽度的话,默认会独占一行(是父元素的全部 ),高度是由内容的多少决定的!
2.可以设置宽高,支持上右下左(顺时针)的内/外边距!
3.块级元素可以包含块级元素|行内元素
-->
<div>我是块级元素</div>
<!--
三:行内块级元素的特点
即可以设置宽高(块级元素),又不会独占一行(行内元素),设置上右下左,内/外边距都会生效
注:它和块级元素的区别就是:不会独占一行!!
-->
<img src="../imgs/bd_logo.png" alt="">我是图片啊,
</body>
</html>
二: 脱离了文档流(浮动和绝对定位)之后,不管是行内元素还是块级元素,最终都会变成行内块级元素(inline-block)的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
脱离文档流的两种方式:
1. float
2. position: absolute;
块级元素或者行内元素脱离文档流会变成inline-block;(行内块级元素)
*/
/*去除一些元素的默认样式*/
*{
padding: 0px;
margin: 0px;
}
div{
border: 1px solid red;
float: left;
width: 100px;
height: 100px;
}
span{
border: 1px solid red;
float: right;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--
块级元素脱离文档流之后,
就变成了行内块级元素的特点了!
跟块级元素的区别就是不独占一行了!
-->
<div>我是块级元素</div>
<!--行内元素-->
<span>我是行内元素</span>
</body>
</html>