一、行内元素
1.行内元素概念:所有行内元素可以在一行中显示。
2.行内元素不可以设置宽高,但是可以设置行高line-height:,同时设置外边距margin上下没有用,左右有效,padding内边距同样上下没有用,左右有用。
3.行内元素和块级元素可以相互转换,通过display:block; 或者display:inline来把行内元素转换为块级元素,这样的话就可以设置行内元素的宽高以及它的内边距和外边距。以下是行内元素设置宽高的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素设置宽高</title>
</head>
<style>
/*方式一*/
.one{
display: block;
height: 100px;
width: 100px;
background-color: red;
}
/*方式二*/
.two{
position: absolute;
height: 100px;
width: 100px;
background-color: teal;
}
/*方式三*/
.three{
float: left;
height: 100px;
width: 100px;
background-color: #ccc;
}
</style>
<body>
<!--
总结:将行内元素设置为块级元素,就可以设置宽高
1.使用display
display:block/inline-block
2.使用position
position:absolute/fixed
3.使用float
float:left/right
-->
<span class="one">test</span>
<span class="two">test</span>
<span class="three">hello</span>
</body>
</html>
4.以下是行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素、块级元素</title>
</head>
<body>
<a href="">a标签为行内元素</a> <!-- 锚点 -->
<a href="">a标签为行内元素</a><br>
<span>span标签为行内元素</span>
<span>span标签为行内元素</span><br>
<b>b标签不推荐</b> <!-- 加粗 <--><br>
<p>br是一个空标签<br>可以换行</p><br>
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var><br>
<i>斜体</i><br>
<sub>文本居下</sub><br>
<sup>文本居上</sup><br>
<label for="">label for属性规定label绑定的表单元素</label><br>
<img src="" alt="">图片也为行内元素<br>
</body>
</html>
二、块级元素
1、块级元素概念:独占一行空间,通俗来讲就是太霸道了,这一行空间div占位所有,块级元素总是在新的一行排列,垂直向下排列,要想使块级元素在一行排列,可以使用float:left/right;或者display:inline-block;
2.块级元素可以包含行内元素或者块级元素。还可以容纳内联元素和其他元素。
3.宽高和内容无关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素、块级元素</title>
</head>
<body>
<div>div为块级元素,也是css layout的主要标签</div>
<p>p为块级元素</p>
<h1>h1为块级元素</h1>
<h2>h2为块级元素</h2>
<h3>h3为块级元素</h3>
<h4>h4为块级元素</h4>
<h5>h5为块级元素</h4>
<h6>h4为块级元素</h6>
<ul>ul为无序列表,配合li使用
<li></li>
<li></li>
<li></li>
</ul>
<ol>ol为有序列表,配合li使用
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>