【CSS】【12】CSS盒子的display属性

最新推荐文章于 2024-08-17 12:54:01 发布

weixin_34007906

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量92

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/weixin_34007906/article/details/85093435

版权

前面依次说到盒子的float（浮动）、clear（消除盒子浮动对其他的影响）、position（定位）属性，本次了解一下display属性，这个是非常有用的一个属性。

1、定义HTML部分内容，但不定义CSS代码：

我们知道div为块级标记，而span为行级标记，由于没有定义CSS代码，所以效果如下：

2、为HTML内容定义CSS样式：

把前三个块级标级<div>展示样式定义为inline（即按行级样式进行展示）；同时把中间三个行级<span>展示样式定义为block（即按块级样式进行展示）；把最后块级<div>和行级<span>两个展示样式定义none（即不显示），其效果如下：

其实display是一个非常有用的属性，通过设置它的显示与否形成动画效果，下面一段代码来源于w3school的教程：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()

{
$("p").click(function()

{
$(this).hide();
});
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

这段代码引入了JQuery，后面会陆续涉及到，目前看不懂没有关系，它的意思是说当单击<p>标记的内容时，它会自动隐藏，其中的$(this).hide()就是JQuery封装了display：none属性。

关注