一、前言

　　行内标签：类似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. Final阶段中间产物

    空天猎功能说明书:https://git.coding.net/liusx0303/Plane.git 空天猎代码控制:https://coding.net/u/MR__Chen/p/SkyHunte ...

  2. Daily Scrum5 11.7

    今日任务: 姓名 任务 时长 徐钧鸿 学习了java连接sqlserver的方法并且实现了连接池 2h 张艺 继续完成和用户管理有关的类的移植(Register.Success.Validate等) ...

  3. bing词典

    一.bug寻找 bug1:点击单词挑战之后选择四级词汇,然后一直狂击答案,点到一个时候就会出现一个情况:不管点击哪一个选项都不会跳至下一题,而且屏幕上方的已做题目数 x/20中的x会乱跳. bug2: ...

  4. 第二阶段每日站立会议Third Day

    昨天对图片显示的大小进行调整 今天对于程序中的字体显示进行细化修改,使界面更美观 遇到的问题:当图片太小时,显示一块灰色区域,不美观

  5. 关于 Java连接sql的转载

    Java连接SQL Server 2000数据库时,有两种方法: (1)通过Microsoft的JDBC驱动连接.此JDBC驱动共有三个文件,分别是mssqlserver.jar.msutil.jar ...

  6. angularJS1笔记-(3)-购物车增删改查练习

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

  7. keil51下使用sprintf问题

    测试环境:keil c51 + STC89C52说明: 1.keil的不定参数只有15个字节也就是说sizeof(...) 加起来总共不能超过15字节,否则会出错 2.当不定参数中有常数时,你也会得不 ...

  8. STM32F103 CAN中断发送功能的再次讨论

    转自:http://yiyutingmeng.blog.163.com/blog/static/124258578201191584629146/ 我在之前的一篇博客日志中,写过关于CAN发送功能如何 ...

  9. “Unable to open kernel device \\.\Global\vmx86

    启动vm中虚拟机中的时候,弹出窗口的时候,弹出窗口 Unable to open kernel device \\.\Global\vmx86;系统找不到指定的文件,Did you reboot af ...

  10. Docker使用阿里云镜像加速

    1.进入阿里云镜像加速页面: https://cr.console.aliyun.com/#/accelerator 2.修改/etc/docker/daemon.json文件配置,没有则新建: { ...