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. 【Luogu】P4381 [IOI2008]Island

    一.题目 Description 你将要游览一个有N个岛屿的公园.从每一个岛i出发,只建造一座桥.桥的长度以Li表示.公园内总共有N座桥.尽管每座桥由一个岛连到另一个岛,但每座桥均可以双向行走.同时, ...

  2. linux(centos8):用grep命令查找文件内容

    一,grep的用途: linux平台有最常用的三大文本处理工具:awk/sed/grep grep的功能:搜索指定文件的内容,按照指定的模式匹配,并输出匹配内容所在的行. 需要注意的地方:grep只支 ...

  3. 理解 PHP 依赖注入 和 控制反转

    理解 PHP 依赖注入 和 控制反转   要想理解 PHP 依赖注入 和 控制反转 两个概念,就必须搞清楚如下的两个问题: DI -- Dependency Injection 依赖注入 IoC -- ...

  4. 第十三章 Linux三剑客之老二—sed

    一.sed #擅长增删改查 替换 选项: -n #取消默认输出 -r #支持扩展正则使用 -i #改变文件内容 -e #允许多项编辑 内部指令: p #print 打印 d    # 删除 排除 a ...

  5. PyCharm搭配github错误处理

    ssh -T git@github.com 验证时 报错Could not open a connection to your authentication agent. 删除前面生成的.ssh文件 ...

  6. BGP - 不同 AS 间运行的协议

    在之前介绍的网络场景中,ERGRP,OPSF,RIP 等都是运行在单独一个 AS(自治系统之间).这些协议统称为 IGP - 内部网关协议 ,目的主要是为自治系统内发现邻居和计算路由,从而找到合适的路 ...

  7. JavaScript实现异步的4中方法

    一:背景简介 Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须 ...

  8. 通俗的讲解Python中的__new__()方法

    2020-3-17更新本文,对本文中存争议的例子进行了更新! 曾经我幼稚的以为认识了python的__init__()方法就相当于认识了类构造器,结果,__new__()方法突然出现在我眼前,让我突然 ...

  9. git学习(九) idea git stash操作

    在前面说过,git stash 命令的作用就是将目前还不想提交的但是已经修改的内容进行保存至堆栈中,后续可以在某个分支上恢复出堆栈中的内容:git stash 作用的范围包括工作区和暂存区中的内容,没 ...

  10. 常见ascii码记忆

    常见字符的ASCII码值如下:空格的ASCII码值为32:数字0到9的ASCII码值分别为48到57:大写字母"A"到"Z"的ASCII码值分别为65到90:小 ...