css元素显示模式

这篇具有很好参考价值的文章主要介绍了css元素显示模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 元素显示模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
        /*1. 行内元素 -> 块元素 */
        a {
            width: 150px;
            height: 50px;
            background-color: red;
            display: block;
        }
        /*2. 块元素 -> 行内元素 */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: inline;
        }
        /*3. 行内元素 -> 行内块元素 */
        span {
            width: 100px;
            height: 150px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 
       一, 块元素:<h1>~<h6>,<P>,<div>,<ul>,<ol>,<li>,,,
            其中<div>标签是最典型的块元素;
            块元素特点:
                1. 独占一行;
                2. 高度,宽度,外边距以及内边距都可以控制;
                3. 宽度默认是容器(父级宽度)的100%;
                4. 是一个容器盒子,里面可以放行内或者块级元素。
                5. 文字类的元素内不能使用块级元素;
                [6.] <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>;
                [7.] 同理,<h1>~<h6>等都是文字类块级标签,里面也不能存放其他块级元素。

        二,行内元素:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>,,,
                其中<span>标签是最典型的行内元素(内联元素)。
              行内元素特点:
                1. 相邻行内元素在一行上,一行可以显示多个,它们之间存在默认间距(不知道是多少);
                2. 宽高直接设置是无效的;(需经过特殊转换才行)
                3. 默认宽度就是它本身内容的宽度;
                [4.] 行内元素只能容纳文本或其他行内元素。

        三,行内块元素
                在行内元素中有几个特殊的标签: <img/>,<input/>,<td>,
                它们同时具有块元素和行内元素的特点。
                1. 相邻行内块元素在一行上, 但是它们之间存在空白缝隙, 一行可以显示多个;(行内元素特点)
                2. 默认宽度就是它本身内容的宽度;(行内元素特点)
                3. 高度, 宽度, 外边距以及内边距都可以控制; (块级元素特点) 

        四,特点
                1. 块级元素会独占一行,从上到下顺序排列!
                2. 行内元素按照顺序,从左至右顺序排列,碰到父元素边缘时会自动换行!
     -->

     <!-- 行内元素 => 块级元素  -->
     <!-- 给a添加宽度和高度,a是块级元素,不能指定宽,高; 但是某种需求导致,需要将a进行宽/高设置,转换为块级元素即可 -->
     <a href="#">我是行内元素1</a>
     <a href="#">我是行内元素2</a>

      <!-- 块级元素 => 行内元素 -->
     <div>我是块级元素1</div>
     <div>我是块级元素2</div> <br>

     <!-- 行内元素 => 行内块元素 -->
     <span>我是行内元素</span>
     <span>我是行内元素</span>
</body>
</html>

css元素显示模式

2. 案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test a {
            /* 行内元素  -> 行内块元素 */
            display: inline-block;
            height: 50px;
            width:120px;
            background-color: red;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }
        .test .bk1 {
            background-color: red;
        }
        .test .bk2{
            background-color: yellow;
        }
        .test .bk3 {
            background-color: green;
        }
        .test .bk4 {
            background-color: blue;
        }
        .test .bk5 {
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="test">
        <a href="#" class="bk1">五彩导航</a>
        <a href="#" class="bk2">五彩导航</a>
        <a href="#" class="bk3">五彩导航</a>
        <a href="#" class="bk4">五彩导航</a>
        <a href="#" class="bk5">五彩导航</a>
    </div>
</body>
</html>

css元素显示模式

3. 案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 200px;
            height: 40px;
            background-color: #55585a;
            font-style: 14px;
            display: block;
            color: #fff;
            text-decoration: none;
            /* text-indent: 2em; */    /* 粗略 */
            padding-left: 30px;
            line-height: 40px;
        }
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <!-- 
        1. 行内元素     => 块级元素;
        2. 文字垂直居中 => line-height = height;
     -->
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>
</html>

css元素显示模式文章来源地址https://www.toymoban.com/news/detail-460236.html

到了这里,关于css元素显示模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

    在开发中 , 经常需要使用到 元素的显示 与 隐藏 , 默认状态下 , 按钮下面没有任何内容 ; 将鼠标移动到 红色按钮 后 , 显示一个对话框布局 ; 控制 元素的 显示 与 隐藏 的样式有如下三种 : display visibility overflow 为标签元素设置 可以 隐藏该元素 ; 如果想要 显示该对象 , 为该元

    2023年04月14日
    浏览(53)
  • 8.前端--CSS-显示模式

    元素显示模式就是 元素(标签)以什么方式进行显示 ,比如 div自己占一行 ,比如 一行可以放多个span 。 常见的块元素 常见的块元素: h1~h6 、 p 、 div 、 ul、ol、li div 标签是最典型的块元素。 块元素的特点(重要) 比较霸道, 自己独占一行 。 高度,宽度、外边距以及内

    2024年01月23日
    浏览(38)
  • CSS特性、背景属性和显示模式

    CSS特性:化简代码 / 定位问题,并解决问题 继承性 层叠性 优先级 继承性 继承性:子级默认继承父级的 文字控制属性 。 注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。 层叠性 特点: 相同的属性会覆盖: 后面的 CSS 属性覆盖前面的

    2024年02月09日
    浏览(45)
  • 【CSS 10】浮动实例 处理布局流 display: inline-block 行内块元素 水平显示列表项 align 对齐

    浮动实例 网格/等宽的框 通过使用 float 属性,可以轻松地并排浮动内容框 display: inline-block 与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度 同样,如果设置了 display: inline-block,将保留上下外边距/内边距,而 display: inline 则不会 与 display: b

    2024年02月11日
    浏览(53)
  • 【前端】深入解析CSS:选择器、显示模式、背景属性和特征剖析

    CSS(层叠样式表)作为前端开发的核心技术之一,为网页赋予了美观和交互性。本文将深入探讨CSS的复合选择器、元素显示模式、背景属性以及其三大特征,帮助读者更好地理解和应用CSS。 后代选择器 又称为 包含选择器 ,可以选择父元素里边子元素,其写法就是把外层标签

    2024年02月11日
    浏览(38)
  • Unity3d中Scene场景2D模式下放大后UI元素后不显示的问题

    如题:UI在game视图显示没有问题, 在Play状态下,在Sence视图查看UI对象的时候进行放大操作,然后UI就不显示了或者显示不全,缩小就恢复正常。这让我在Play模式下预览UI状态很麻烦。相关问题描述较少。 初步判定为摄像机问题,但我们的项目最近并没有对相机进行过什么调

    2024年02月03日
    浏览(59)
  • CSS基础:块状元素、内联元素、内联块状元素(行内元素)

    CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 1.常用的块状元素有: 2.常用的内联元素有: 3.常用的内联块状元素有: 什么是块级元素?在html中 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码

    2023年04月12日
    浏览(50)
  • css面试题:css隐藏元素的方式

    特点:父元素设置该属性时,子元素同样会生效,但可以通过visibility:visible;修改子元素的显示效果; 特点:作用是从dom中移除节点,所以子元素也会被移除掉, 该方法通过改变元素透明度来实现隐藏,但需要注意父元素设置为opacity:0后,子元素会继承父元素该属性的效果,

    2024年02月13日
    浏览(37)
  • 【CSS】禁用元素鼠标事件(例如实现元素禁用效果)

    pointer-events 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件。 实际运用中可以通过对 auto 和 none 动态控制,来动态实现元素的禁用效果。 属性 描述 auto 与pointer-events属性未指定时的表现效果相同,对于 SVG 内容,该值与visiblePainted效果相同 none 元素永远

    2024年02月12日
    浏览(64)
  • html5为什么只需要写<!doctype html>? 有多少种Doctype文档类型?

    HTML5只需要写!doctype html是因为HTML5不基于SGML,不需要对DTD进行引用,但仍需要doctype来规范浏览器的行为。而HTML4.01基于SGML,需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。 Doctype文档类型是指用于标识HTML或XML文档类型的声明,它告诉浏览器文档所使用的规范或标

    2024年01月20日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包