一、前言

　　行内标签：类似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. 团队博客作业Week5 --- 团队贡献分--分配规则

    团队会议 时间:公元2015年10月26日22时3分20秒 地点:宿舍楼716房间 与会人员:陈谋,李剑锋,卢惠民,刘夕霆,仉伯龙,潘成鼎. 会议内容:今天的组会主要讨论的是项目团队贡献分的计算方式, ...

  2. java实验三 敏捷开发与XP实践

    一.实验内容 (一)敏捷开发与XP 软件开发流程的目的是为了提高软件开发.运营.维护的效率,并提高软件的质量.用户满意度.可靠性和软件的可维护性. 光有各种流程的思想是不够的,我们还要有一系列的工具来 ...

  3. 敏捷开发与XP实践

    北京电子科技学院(BESTI) 实  验  报  告 课程: Java        班级:1352          姓名:黄伟业         学号:20135215 成绩:           ...

  4. spring冲刺第四天

    昨天进行了地图的初步编写,但是存在BUG. 今天上网查找了错误的原因,改进了源代码,使程序可以执行. 遇到的问题;感觉地图界面太简单,需要作出更多的场景,这就需要不断的完善.

  5. "私人助手"NABCD分析

    ---恢复内容开始--- 团队开发项目“私人助手”需求分析NABCD模型: (1)N(Need需求):“私人助手”解决了几类人遇到非常多的事情,非常繁琐,“私人助手”为用户解决这个问题,让用户的工作更 ...

  6. 在新的电脑上部署 Hexo，保留原有博客的方法

    用U盘从旧的电脑拷贝整个blog文件夹. 在新的电脑上装好git并配置好用户名和密钥. 安装 node.js 安装 hexo:npm install hexo-cli -g 用U盘把blog文件夹拷贝 ...

  7. Internet History, Technology and Security (Week⑨)

    Week ⑨ We are now on the second to last week of the class and finishing up our look at Internet Secu ...

  8. sqlserver 修改表字段长度

    ALTER TABLE Table1 ALTER COLUMN column1 VARCHAR(255)

  9. es6 let关键字

    1.let关键字 var arr = [ ]; for(var i=0; i<10; i++){ arr [i] = function(){ alert(i) } } arr [8](); // ...

  10. DataTable List 相互转换

    This uses the FastMember's meta-programming API for maximum performance. If you want to restrict it ...