（11）css常用样式—display显示模式

2023-09-18 阅读 19 评论 0

摘要：标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。 css动态样式、示例1：没有添加display属

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。

属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。

css动态样式、

示例1：没有添加display属性，div容器标签和span文本标签的结果

示例2：给文本级标签添加display属性：转换成块元素

<!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>css-display属性</title>   <style>/* 并集选择器(群组选择器) */div {width: 100px;height: 100px;background-color: #0f0;}span {display: block;width: 100px;height: 100px;background-color: #00f;}</style>
</head> 
<body><div>这是div</div><span>这是span</span>
</body>
</html>