<!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>
<link rel="stylesheet" href="css.css">
<style>
* {
padding: 0px;
margin: 0px;
}
/* 1、把行内元素转换为块元素 */
a {
width: 100px;
height: 100px;
font-size: 12px;
border: 1px solid black;
display: block;
text-decoration: none;
align-items: center;
line-height: 100px;
}
/* 2、设置清除浮动样式 */
.clear::before,
.clear::after {
content: '';
display: block;
clear: both;
}
.list ul li {
list-style: none;
}
.list .pic img {
width: 100px;
height: 100px;
}
.list .pic,
.title {
float: left;
}
</style>
</head>
<body>
<!--
HTML元素分类
1、块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li
2、行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span
3、行内块元素：可以设置宽度和高度，不独立成行。input、button、img
display属性
1、block:转换为块元素
2、inline:转换为行内元素
3、inline-block:转换为行内块元素
4、none:隐藏元素
元素浮动float布局,脱离文档流，不占位。缺点：导致浮动元素跟后面的元素重叠
解决方法：清除浮动，在浮动元素的容器中添加clear类,添加伪元素样式(clear:both;)
-->
</body>
<!-- 1、把行内元素转换为块元素 -->
<a href="https://www.iconfont.cn/">阿里巴巴矢量库</a>
<!-- 2、元素浮动布局 -->
<div class="list">
<ul>
<li class="clear">
<div class="pic">
<img src="image.jpg" alt="">
</div>
<div class="title">
<h3>标题</h3>
<p>内容时间</p>
<button>按钮</button>
</div>
</li>
<li class="clear">
<div class="pic">
<img src="image.jpg" alt="">
</div>
<div class="title">
<h3>标题</h3>
<p>内容时间</p>
<button>按钮</button>
</div>
</li>
</ul>
</div>
</html>
