一、前言

　　行内标签：类似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. “Hello World!”团队第七周召开的第六次会议

    博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七.燃尽图 八 .功能说明书 一.会议时间 2017年12月6日  11:20-12:00 二 ...

  2. 做一名合格的程序员(learning of a previous team)

    合格程序员的基本素质 作一个真正合格的程序员,或者说就是可以真正合格完成一些代码工作的程序员,应该具 有的素质.  1 团队精神和协作能力 把它作为基本素质,并不是不重要,恰恰相反,这是程序员应该具备 ...

  3. 【每日scrum】第一次冲刺day2

    和小伙伴一起找地图 ,学习了mapinfo地图格式的基本知识,数据和图像分开存储

  4. 【Coursera】支持向量机

    一.最大间隔分类器 1. 函数间隔:\(γ^{i} = y^{i}(w^{T} x + b)\), 改变w和b的量级,对分类结果不会产生任何影响,但是会改变函数间隔的大小.因此,直接对函数间隔求最大值 ...

  5. DPDK L3fwd 源码阅读

    代码部分 整个L3fwd有三千多行代码,但总体思想就是在L2fwd的基础上,增加网络层的根据 IP 地址进行路由查找的内容. main.c 文件 int main(int argc, char **a ...

  6. angularJS1笔记-(2)-$watch方法监听变量的变化

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. 由于MDK5.0A没有STM32F103程序错误 stm32f10x.h(298): error: #67: expected a "}"

    转自:http://blog.163.com/lby147612@126/blog/static/17041045220150130438428/ 由于MDK4.72A没有STM32F030,所以升级 ...

  8. autoit获取ie浏览器简单操作网页（GUI小工具）

    需要稍稍熟悉一下autoti提供的语言, 我简单做了一个带GUI的小工具,实现根据IE标题点击页面内的LinkText 注意:使用时IE窗口是显示状态才可以获取到(可以在脚本中加入搜索IE句柄,将ie ...

  9. selenium使用execl实现数据驱动测试

    import java.io.FileInputStream;import java.io.IOException;import java.io.InputStream;import java.uti ...

  10. [51CTO]反客为主 ，Linux 成为微软 Azure 上最流行的操作系统

    反客为主 ,Linux 成为微软 Azure 上最流行的操作系统 [世界上唯一确定不变的就是世界在不停的变化] 三年前,微软云计算 Azure 平台 CTO Mark Russinovich 说有四分 ...