一、前言

　　行内标签：类似span，无法设置高度，宽度，padding，margin

　　块级标签：类似div，可以设置高度，宽度，padding，margin

　　默认情况下是这个样子的，但是可以通过display来进行设置

二、display样式

　　2.1 display：inline

　　作用：可以将块级标签转换成行内标签

<head>

    <meta charset="UTF-8">

    <title>display</title>

    <style>

        .c1{

            background-color: #a0fff9;

            border-left: 1px dotted gray;

            display: inline;

        }

    </style>

</head>

<body>

    <div class="c1">首页</div>

    <div class="c1">一区</div>

    <div class="c1">二区</div>

</body>

inline

　　如下：

　　

　　2.2 display：block

　　作用：将行内标签转换为块级标签　

<head>

    <meta charset="UTF-8">

    <title>block</title>

    <style>

        .c1{

            background-color: #48fffd;

            height: 80px;

            display: block;

        }

    </style>

</head>

<body>

    <span class="c1">1234</span>

    <span class="c1">1234</span>

</body>

block

　　

　　2.3 display：inline-block

　　①具有inline属性，默认自己有多少占多少②具有block属性，可以设置高度，宽度，padding，margin。可以称为中性的标签

<head>

    <meta charset="UTF-8">

    <title>block</title>

    <style>

        .c1{

            background-color: #48fffd;

            height: 80px;

            width: 300px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="c1">从前有座山</div>

</body>

inline-block

　　如下：

　　

　　2.4 display：none

　　·　　作用：可以使标签消失

CSS之display样式的更多相关文章

  1. css之display样式,padding,margin

    1. 块级标签变成行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  3. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  4. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  5. Code笔记之：CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  6. CSS的display属性

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

  7. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  8. Css - 选择器和样式

    Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style>     div{ background:red; } </style> <div&g ...

  9. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

随机推荐

  1. 关于php的array_diff和array_diff_assoc的使用总结

    关于php的array_diff和array_diff_assoc的使用总结 2015-11-07 17:01 184人阅读 评论(0) 收藏 举报  分类: php学习感想(1)  版权声明:本文为 ...

  2. selenium+python 自动化

    <a class="big_images_new" target="_blank" href="http://photo.xcar.com.cn ...

  3. P2P通讯原理

    1.简介 当今互联网到处存在着一些中间件(MIddleBoxes),如NAT和防火墙,导致两个(不在同一内网)中的客户端无法直接通信.这些问题即便是到了IPV6时代也会存在,因为即使不需要NAT,但还 ...

  4. DPDK skeleton basicfwd 源码阅读

    学习这个例子用于理解单纯的 dpdk 转发过程,L2 和 L3 的转发是基于此:在rte_eth_rx_burst()收包后进行解包,提取 mac.ip 等信息然后在转发到输出网卡. 如果要写出自己的 ...

  5. 团队作业7——第二次项目冲刺（Beta版本12.04——12.07）

    1.当天站立式会议照片 本次会议在5号公寓3楼召开,本次会议内容:①:熟悉每个人想做的模块.②:根据项目要求还没做的完成. 2.每个人的工作 经过会议讨论后确定了每个人的分工 组员 任务 陈福鹏 实现 ...

  6. 修改shell命令的history记录个数

    修改history记录的命令如下所示:# vi /etc/profile 找到histsize=1000,将其改为histsize=100(这条可根据实际情况而定). 不重启系统就可让其生效,如下所示 ...

  7. apache重写规则 rewrite

    Rewrite规则表达式的说明: . 匹配任何单字符 [chars] 匹配字符串:chars [^chars] 不匹配字符串:chars text1|text2 可选择的字符串:text1或text2 ...

  8. [转帖] InfiniBand主流厂商和产品分析

    https://blog.csdn.net/swingwang/article/details/72935461 InfiniBand主流厂商和产品分析 2017年06月08日 22:03:46 Ha ...

  9. windows版本 rac 报错信息

    原因 - 安装程序无法在一个或多个节点上执行指定的脚本.这可能是由于在节点上执行脚本时出现异常错误. 操作 - 有关详细信息, 请查看日志文件 'C:\Users\ADMINI~1\AppData\L ...

  10. QVariant相当于一个包含大多数Qt数据类型的联合体（源码解读）

    将数据存储为一个Private结构体类型的成员变量d: <qvariant.cpp> 1 QVariant::QVariant(Type type) 2 { create(type, 0) ...