CSS 的显示方式和效果

最新推荐文章于 2024-08-20 21:00:21 发布

Python小子

最新推荐文章于 2024-08-20 21:00:21 发布

阅读量763

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43883022/article/details/88861019

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 的显示方式与效果

1、显示方式

决定了元素在网页中的显示方式
属性：display

取值	说明
none	让元素不显示，但会脱离文档流，不占页面空间
block	元素显示的和块级元素一致
inline	元素显示的和行内元素一致
inline-block	元素显示和行内块元素一致

行内块元素特点：
1、多个元素能够在一行内显示
2、每个元素都允许修改尺寸

<head>
    <style>
        a{
            width: 100px;
            height: 50px;
            border: 1px solid #111111;
        }
        #a1{display: block}   /* a1变成块级元素，独占一行 */
        #a2{display: inline-block} /* a2变成行内块元素，可以修改尺寸 */
    </style>
</head>
<body>
    <a href="#" id="a1">块级元素</a>
    <a href="#" id="a2">行内块元素</a>
    <a href="#">普通a标签</a>      /* 行内元素 */
</body>

2、显示效果

属性： visibility
作用：控制元素的可见性

取值	说明
visible	可见的，默认值
hidden	隐藏的，未脱离文档流，占用页面空间

属性： opacity
作用：控制元素的透明度
取值：0—1的数字，0（完全透明），1（不透明）

<head>
    <style>
        #d1{background:rgba(255,0,0,0.5)} /* 背景透明度改变，但内容透明度不变 */
        #d2{background:rgb(255,0,0); opacity: 0.5}  /* 背景和内容透明度都改变 */
    </style>
</head>
<body>
    <div id="d1">csdn one</div>
    <div id="d2">csdn two</div>
</body>

属性： vertical-align
1、用在td中，设置td中内容的垂直对齐方式（取值：top / middle / bottom）
2、用在图片和行内块元素中，设置图片和行内两端的文本，相对于自身的垂直对齐方式（取值：top / middle / bottom / baseline(基线对齐，默认值)）