CSS dispaly元素显示模式转换

目录

　　display visibiliry 隐藏元素

　　块级元素

　　行内元素

　　行内块元素

　　块、行、行内块元素转换

隐藏元素

display: none 可以隐藏元素，且隐藏的元素不占用任何空间。

案列：

h1.hidden {display: none;}

visibility: hidden 隐藏元素，但是隐藏的元素仍需占用与隐藏之前一样的空间。也就是说该元素虽被隐藏了，但是还是影响布局。

案例：

div.hidden { visibiliry: hidden}

<h1 class="hidden">这是一个隐藏标题</h1>

CSS 元素显示模式转换

1. 什么是元素显示模式

　　元素显示模式就是元素以什么方式进行显示，比如：<div>独占一行，一行可以放多个<span>

　　作用：网页标签非常多，在不同的地方使用不同的标签，了解它们的特点可以更好的布局网页

2. 元素显示模式的分类

　　HTML元素一般分为快元素和行内元素两种类型

块元素：

　　<hi> ~ <h6> 、<div> 、<p>、 <ul>、 <ol>、<li>

　　特点：

　　1. 自己独占一行

　　2. 是一个容器及盒子，里面可以放行内元素或块级元素

　　3. 宽度默认是父级的100%

　　注意：

　　1. 文字类的元素，不能放块标签

　　2. <p>标签主要存放文字，因此<p>标签不能放块级标签，如：div

行内元素

　　<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

　　特点：

　　1. 一行可以写多个行内元素

　　2. 宽度，高度直接设置没有效果

　　3. 默认宽度就是它本身内容的宽度

　　4. 行内元素内不能放块级元素

　　注意：

　　1. 链接内不能放链接

　　2. <a>可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

　　<img />、<input />、<td>

　　特点：

　　1. 一行内可以放多个行内块元素，元素之间有空格

　　2. 可以设置宽度和高度

　　3. 默认的宽度就是它本身内容的宽度

3. 元素显示模式的转换

　　显示模式之间的转换。如：把<a>行内元素，转换成块级元素

　　元素转换为块元素：display: block;

a {
    width: 120;
    height: 32;
    background-color: red;
    display: block;
}

　　元素转换为行内元素：display：inline

　　元素转换为行内快：display：inline-block