CSS基础(12)_行内元素的盒模型、元素显示类型/状态设置、隐藏元素的两种方式

原创已于 2024-11-15 06:41:45 修改

· 386 阅读

1 ·

版权

文章标签：

#css

于 2021-09-20 22:11:59 首次发布

CSS 专栏收录该内容

28 篇文章

订阅专栏

行内元素的盒模型、元素显示类型/状态设置

行内元素的盒模型特点：
1、行内元素不支持设置宽度和高度。
2、行内元素可以设置padding，border，margin，但是垂直方向的padding、border、margin不会影响页面的布局(垂直方向设置无法移动行内元素位置)。

元素显示类型设置
display: 用来设置元素显示的类型。
可选值：
inline：将元素设置为行内元素
block:：将元素设置为块元素
inline-block：将元素设置为行内块元素(行内块元素既可以设置宽度和高度，又不会独占一行)
table：将元素设置为一个表格
none：元素不在页面中显示，不占据页面位置（常见于下拉菜单）

元素显示状态设置
visibility：用来设置元素的显示状态
可选值：
visible：默认值，元素在页面中正常显示
hidden：元素在页面中隐藏不显示，但是依然占据页面的位置

隐藏元素的两种方式

方式1:visibility属性
特点：隐藏，元素看不见了，还占有原来的位置，元素大小宽高依然保存。

visibility:hidden;

方式2:display属性
特点：彻底隐藏，不但看不见，也不占用任何位置，没有大小宽高。

display: none;

下面展示一些例子：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/inline_element.css">
    <title>行内元素的盒模型</title>
</head>
<body>
    <span>我是span1</span><span>我是span2</span>
    <div>我是div</div>
</body>
</html>

span{
    /* 行内元素设置宽度和高度无效 */
    width: 100px;
    height: 100px;
    background-color: darkgreen;

    /* 垂直方向的padding、border、margin的设置不会改变元素选择器div的布局（位置） */
    
    /*
    padding: 10px;
    border: 5px yellowgreen solid;
    margin: 20px;
    */
    
    /* display: inline-block; */
}
div{
    width: 100px;
    height: 100px;
    background-color: cadetblue;
}