一、前言

　　行内标签：类似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 抽象类和接口区别

    php中抽象类和接口的区别 1) 概念 面向对象的三大概念:封装,继承,多态 把属性和方法封装起来就是类.      一个类的属性和方法被另外的类复制就是继承,PHP里面的任何类都可以被继承,被继承的 ...

  2. 新手学ajax2

    今天主要解决了一个困扰两天的ajax问题,就是关于从服务器获取数据时的同步和异步问题 , xhr.open("GET", url,false): 这里有三个参数“GET”表示获取的 ...

  3. Maven教程--02设置Maven本地仓库|查看Maven中央仓库

    一:设置Maven本地仓库 Maven默认仓库的路径:~\.m2\repository,~表示我的个人文档:例如:C:\Users\Edward\.m2\repository:如下图: Maven的配 ...

  4. mvc拦截请求IHttpModule

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  5. 使用成员资格管理用户Membership

    ASP.NET成员资格使您可以验证和管理Web应用程序的用户信息.它提供验证用户凭据,创建和修改成员资格用户以及管理用户设置(如密码和电子邮件地址)的功能. ASP.NET成员资格主要用于ASP.NE ...

  6. 团队作业4--第一项目冲刺3（Aplpha）

    1.会议 第三次会议: ①:总结前两天出现的问题 ②:总结前端学习的心得 ③:安排后两天任务 2.任务安排 3.任务分解图 4.燃尽图 5.适当的项目程序/模块的最新(运行)截图 6.心得 组员之间要 ...

  7. Tensorflow踩坑之tf.nn.bidirectional_dynamic_rnn（）报错 “ValueError: None values not supported.”

    详细解决方法见链接:https://stackoverflow.com/questions/39808336/tensorflow-bidirectional-dynamic-rnn-none-val ...

  8. wait 和 sleep 区别

    /* wait 和 sleep 区别? 1,wait可以指定时间也可以不指定. sleep必须指定时间. 2,在同步中时,对cpu的执行权和锁的处理不同. wait:释放执行权,释放锁. sleep: ...

  9. Objective-C KVC讲解,包你看懂会用

    KVC:Key Value Coding,取其三个单词首字母浓缩而成.直白翻译过来就是键值编码,什么意思呢?简单来说,就是操作一个对象,也可以像操作字典一样,通过key来取值和赋值. 我们先创建一个H ...

  10. scp命令与Screen服务的区别

    scp:远程传输命令.(通过网络传送给其他主机,又恰好两台主机都是linux系统,便可以使用scp传输文件) 参数 作痛 -v 先是详细的连接进度 -P 指定远程主机的sshd端口号 -r 传送文件夹 ...