一、前言

　　行内标签：类似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. 学习记录 div悬停在顶部 。div阻止冒泡

    如何让一个div可点击,并且div里面的a元素也能点击? 楼主应该是想要这样的,阻止事件冒泡 点击里面的a的时候不触发外面的div的点击事件 <script type="text/ja ...

  2. Team Member Introduction and Division of Work

    Team leader Name:宋天舒 Student Number:12061166 Interested In: Information safety. Responsible For: Des ...

  3. 将eclipse上的web项目部署到Tomcat服务器上经验总结

    1.  将Tomcat插件添加到eclipse上 Window --> Preferences --> Server --> Runtime Environment --> A ...

  4. BugPhobia贡献篇章：团队贡献分值与转会确定

    0x01 :无言 0x02 :团队贡献分说明 (1202)冯志睿 54 (1156)李入云 43 (1188)李云涛 56 (1184)马腾跃 26 (1197)钱林琛 60 (1100)王鹿鸣 63 ...

  5. 20172329 2018-2019《Java程序设计与数据结构》课程总结

    作者:lalalouye(20172329王文彬) 2018-2019年大二Java程序设计与数据结构课程总目录:第一周 第二周 第三周 第四周 第五周 第六周 第七周 第八周 第九周 实验一 实验二 ...

  6. 进阶系列（10）—— C#元数据和动态编程

    一.元数据的介绍 元数据是用来描述数据的数据(Data that describes other data).单单这样说,不太好理解,我来举个例子.下面是契诃夫的小说<套中人>中的一段,描 ...

  7. 我对git的认识

    Git 真的是不了解 也没听说过git 所以真的不知道从何谈起 所以就参考度娘啦! Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 Linus To ...

  8. JAVA之路(二)

    学道酬勤,这是第二次学习JAVA,感觉如醍醐灌顶一样,理解很多思想和道理. 本博只是自己对JAVA的一些理解,具体定义以及用法百科里有. 我为什么在博客园内记录自己的学习过程呢,因为我想有人知道我在学 ...

  9. ejb与javabean的区别总结

    EJB的英文全称是企业级的JavaBean 两者是完全不同的 JavaBean是一个组件,而EJB就是一个组建框架 JavaBean面向的是业务逻辑和表示层的显示,通过编写一个JavaBean,可以将 ...

  10. Freemarker中Configuration的setClassForTemplateLoading方法参数问题

    今天使用freemarker中Configuration的setClassForTemplateLoading方法遇到了加载模板目录的一个小问题. 由于网上的其他论坛,博客写的有点乱,故记录一下. F ...