前端网页学习5（css元素显示模式）

最新推荐文章于 2024-08-14 12:22:11 发布

养羊得亿

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量87

点赞数

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

本文链接：https://blog.csdn.net/qq_40551957/article/details/113471652

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

元素显示模式

元素显示模式定义

元素显示模式：元素标签以什么方式进行显示。

块与行内元素

块元素
 <h><p><ul><ol><div>
 独占一行
 高度宽度，外边距，内边距都可以控制。
 默认宽度是容器（父级的百分百）
 是一个容器或者盒子，可以放块级元素
 文字类不能放块级元素，如p/h
行内元素（内联元素）
 相邻的行内元素一行可以占多个
 高宽设置无效
 默认宽度是本身宽度
 智能容纳文本和其他行内元素
 链接不能再放链接
 特殊情况下a可以放块级元素
块内行元素
 <img/>,<input/><td>
 可以一行多个，但是有空隙。
 默认宽度是本身
 宽度，行高，边距可设置。

元素显示模式的转换

元素显示模式的转换：
 用处：增加a的触发范围
 Display：block
 Display：inline
 Display：inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式的转换</title>
    <style>
        /* div是块元素，span是行内元素，a是行内元素 */
        .div1 {
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
        }
        .div2 {
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
            display: inline;
        }
        .a1 {
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
        }
        .a2 {
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
            display: block;
        }
        .span1 {
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
        }
        .span2 {
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 300px;
            /* 盒子宽 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div1">div1</div>
    <br/>
    <div class="div2">div2</div>
    <div class="div2">div2</div>
    <br/>
    <a href="#" class="a1">a1</a>
    <a href="#" class="a1">a1</a>
    <br/>
    <a href="#" class="a2">a2</a>
    <a href="#" class="a2">a2</a>
    <br/>
    <span class="spa1">spa1</span>  
    <span class="spa1">spa1</span>   
    <br/>
    <span class="spa2">spa2</span>
    <span class="spa2">spa2</span> 
    <br/>  
</body>
</html>

养羊得亿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端网页学习5（css元素显示模式）

元素显示模式元素显示模式元素显示模式：元素标签以什么方式进行显示。块与行内元素块元素 <h><p><ul><ol><div> 独占一行 高度宽度，外边距，内边距都可以控制。 默认宽度是容器（父级的百分百） 是一个容器或者盒子，可以放块级元素 文字类不能放块级元素，如p/h行内元素（内联元素） 相邻的行内元素一行可以占多个 高宽设置无效 默认宽度是本身宽度 智能容纳文本和其他行内元素 链接不能再放
复制链接

扫一扫

专栏目录