<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css元素显示模式</title>
<link href="css/yuansu.css" rel="stylesheet"/>
</head>
<body>
<!-- 元素的显示
1、块元素block
比较霸道,单独占一行元素宽度的100%
默认的宽度和父级
可以给盒子设置宽、高属性
可以设置对齐属性
块元素中可以包含其他行内元素和块元素
div,ul,li,p,h1~h6
2、行内元素inline
一行显示多个
默认的宽度就是内容的宽度
宽、高属性无效
不能设置对齐属性
行内元素只包含文本或其他行内元素
span ,a, del,strong,
3、行内块元素inline-block
一行显示多个,两个行内块元素之间有一定的空白间距
默认的宽度就是内容的宽度
可以给盒子设置宽、高
input,img,td
元素显示模式的转换:
display:模式的名称;
文本下划线删除:
text-decoration:none;
-->
<div class="bo1">hello box</div>
<p class="bo1">hello 段落</p>
<h1>一级标题</h1>
<span class="bo1">hello span</span>
<del>hello 删除线</del>
</body>
</html>
html元素显示模型
于 2024-05-11 08:48:40 首次发布