CSS-04元素显示模式

今天你好好生活了吗

已于 2023-01-31 14:49:43 修改

阅读量87

点赞数

文章标签： css 前端 css3

于 2023-01-30 23:21:38 首次发布

本文链接：https://blog.csdn.net/qq_74031198/article/details/128792612

版权

概念

网页有多个类型不同的标签，元素显示模式可以帮助我们更好的布局我们的页面，故元素显示模式就是元素以什么方式显示

HTML元素

块元素

常见的块元素：<h1>~<h6>，<p>，<div>,<ol>,<ul>
特点：

独占一行
高度，宽度，外边距，内边距可以设置
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内元素或块级元素

注意：
1.文字类元素不能使用块级元素
2.<p>,<h1>~<h6>主要用于存放文字，故内部不能使用<div>

行内元素【内联元素】

常见的行内元素:<a>,<strong>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
特点：

相邻行内元素在一行上，一行可显示多个
高、宽直接设置是无效的
默认宽度就是他本身的宽度
行内元素只能容纳文本和行内其它元素
注意：
1.链接里面不可以再放链接，指向不明
2.特殊情况下链接<a>里面可以放块级元素，但是给链接<a>转换一下块级模式最安全

行内块元素

理解：同时具有块元素和行内元素的特点
常见的行内块元素：<img/>,<input/>,<td>
特点：

和相邻行内元素在一行上，一行显示多个
默认宽度是本身内容的宽度
高度、行高、外边距以及内边距都可以控制

元素显示模式转换

理解：增加功能，一种模式需要另一种模式的特性
示例:
为行内元素链接增加块级元素的特性，从而使之可以设置宽和高

<style>
        a {
            width: 150px;
            height: 50px;
            background-color: hotpink;
            display: block;
        }
    </style>
<body>
    <a href="https://www.bilibili.com/">bilibili</a>

语法	作用
display: block	转换为块元素
display: inline	转换为行内元素
display: inline-block	转换为行内块元素

单行文字垂直居中

Tip1:行高等于行间距，也就是height=line-height
原因：行高=上空隙+下空隙+文字本身的高度

类似于在一个盒子里放两块相等大小的砖块，砖块分别在盒子的上下两边，由于盒子的大小有限，中间就是那文字的高度，此时两块砖的高度加上文字的高度就是那盒子的宽度