浮动元素具有行内块元素特点(HTML、CSS)
原创
©著作权归作者所有:来自51CTO博客作者CMMKK的原创作品,请联系作者获取转载授权,否则将追究法律责任
浮动元素具有行内块元素特点(HTML、CSS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素具有行内块元素特点</title>
<style>
/* 任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性 */
span,
div {
float: left;
width: 200px;
height: 100px;
margin-right: 2px;
/* span为行内元素 没有宽和高,不能直接设置宽和高 */
background-color: skyblue;
/* 如果行内元素有了浮动,则不需要转换为块级/行内块元素 就可以直接设置高度和宽度 */
}
p {
height: 200px;
background-color: purple;
}