1.display属性

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>08display属性</title>

    <style>

        .c1 {

            background-color: red;

            /*display: none;  !* 让其在页面上不显示 *!*/

            /*display: inline;    !* 让其变成一个行内标签 *!*/

            display: inline-block;  /* 让其具有块级标签和内联标签（行内标签）特点，就是可以设置长和宽的行内标签 */

        }

        .c2 {

            width: 100px;

            height: 100px;

            background-color: green;

            /*display: block; !* 让其变成一个块级标签*!*/

            display: inline-block;  /* 让其具有块级标签和内联标签（行内标签）特点，就是可以设置长和宽的行内标签 */

        }

        #ulid1 {

            background-color: darkslategrey;

            display: inline-block;

            list-style-type: none;  /* 将标题前面的点去掉 */

        }

        li {

            display: inline-block;  /* 将li标签变为行内标签，并且可以设置长和宽 */

            border-right: 2px solid bisque; /* 设置右边框2像素 实线 */

        }

        li.last {

            border-right: none; /* 将li最后一个标签的右边框设置成没有 */

        }

    </style>

</head>

<body>

<div class="c1">div</div>       <!-- div是块级标签，可以设置长和宽 -->

<span class="c2">span</span>    <!-- span标签是一个内联标签，自己占多大就占多大,不能设置长和宽 -->

<span class="c2">span</span>

<ul id="ulid1">

    <li>玉米商城</li>

    <li>电脑</li>

    <li>手机</li>

    <li class="last">平板</li>

</ul>

</body>

</html>

CSS属性（display）的更多相关文章

  1. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  2. CSS属性display的浅略探讨

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

  3. CSS属性Display（显示）和Visibility（可见性）

    隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”.但是请注意,这两种方法会产生不同的效果. Visibility:hidden可以隐藏某个 ...

  4. CSS属性中Display与Visibility的不同

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...

  5. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  6. css的display属性小实验

    div与span是常用的盒子模型; 区别: div默认是垂直分布(独占一行)   span默认是水平分布(一行可以有多个) 通过float属性可以改变div容器的分布方式达到span容器的效果; 下面 ...

  7. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  8. css 可继承属性 display:inline-block 历史

    1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...

  9. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  10. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

随机推荐

  1. elk-日志方案--使用Filebeat收集日志并输出到Kafka

      1,Filebeat简介 Filebeat是一个使用Go语言实现的轻量型日志采集器.在微服务体系中他与微服务部署在一起收集微服务产生的日志并推送到ELK. 在我们的架构设计中Kafka负责微服务和 ...

  2. spring boot:swagger3文档展示分页和分栏的列表数据（swagger 3.0.0 / spring boot 2.3.3）

    一,什么情况下需要展示分页和分栏的数据的文档? 分页时,页面上展示的是同一类型的列表的数据,如图: 分栏时,每行都是一个列表,而且展示的数据类型也可能不同 这也是两种常用的数据返回形式 说明:刘宏缔的 ...

  3. C++ 设置软件激活不息屏

    SetThreadExecutionState(ES_CONTINUOUS | ES_SYSTEM_REQUIRED | ES_DISPLAY_REQUIRED);

  4. MySQL安装版本介绍

    MySQL安装 源码安装 二进制格式的程序包 程序包管理器安装 yum dnf MySQL在CentOS上的情况 6上只有mySQL 7上只有mariadb 8上既有mysql也有mariadb Ce ...

  5. 项目 git 仓库允许服务器访问

    我们 deployer 的运行机制是从 git 或者其它你指定的代码库 clone 代码到目标服务器,所以如果你的代码不是公开的仓库,我们通常需要添加 SSH 公钥才可以从代码库 clone 代码,所 ...

  6. RxJava用法

    首先导入依赖: implementation 'io.reactivex.rxjava2:rxjava:2.2.9'implementation 'io.reactivex.rxjava2:rxand ...

  7. react-native 签名

    完成项目时,我们需要将项目打包成一个apk,方便测试以及发布版本. 这时,需要把js代码和图片资源都放进apk中, 并且发布版本还需要签名,今天把这一系列操作记录下来. 一.生成离线bundle包 离 ...

  8. 原生JS结合cookie实现商品评分组件

    开发思路如下: 1.利用JS直接操作DOM的方式开发商品评分组件,主要实现功能有:显示评价评分的样式以及将用户操作后对应的数据返回到主页面 2.主页面引入商品评分组件的js文件并根据规定格式的数据,生 ...

  9. 把 Console 部署成 Windows 服务，四种方式总有一款适合你！

    一:背景 1. 讲故事 上周有一个项目交付,因为是医院级项目需要在客户的局域网独立部署. 程序: netcore 2.0,操作系统: windows server 2012,坑爹的事情就来了, net ...

  10. NB-IoT成为3GPP后会有哪些优势

    NB-IoT无线接入的设计使用了很多LTE设计大的原则,并且得到了传统蜂窝网络和芯片组供应商的支持,使MBB取得了成功.NB-IoT采用与LTE(E-UTRA)相同的设计原则,尽管它使用单独的新载波, ...