<body>
 <div style="display:inline">Box-1</div>
 <div style="display:inline">Box-2</div>
 <div style="display:inline">Box-3</div>
 <span style="display:block">Box-4</span>
 <span style="display:block">Box-5</span>
 <span style="display:block">Box-6</span>
 <div style="display:none">Box-7</div>
 <span style="display:none">Box-8</span>
</body>

这样就把本来"块"div 变成"行"了

把"行"变成"块".

display:none是隐藏了当前行或块

显示的效果跟默认有差别,测试对比看看

对行内元素，需要注意如下：

•设置宽度width   无效。

•设置高度height  无效，可以通过line-height来设置。

•设置margin 只有左右margin有效，上下无效。

•设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的

盒子的display属性的更多相关文章

  1. 0029 定位：position（相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性）

    目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...

  2. 深入理解和应用display属性（二）

    四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...

  3. 深入理解和应用display属性（一）

    Display在官方定义:规定元素应该生成的框的类型.本文只重点分析常用的6个值:none.block.inline.inline-block.inherit.flex.其他table.list-it ...

  4. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  5. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  6. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  7. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  8. 前端,基础选择器,嵌套关系.display属性,盒模型

    基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...

  9. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

随机推荐

  1. [原创][FPGA]Quartus中调用Modelsim波形仿真步骤说明

    0. 简介 在使用QuartusII软件的过程中,经常地需要跑仿真,那么说到仿真就不得不说Modelsim这个仿真软件了,我们这里介绍下该软件在QuartusII中的使用方法. 1. 建立Quartu ...

  2. 搭建高可用服务注册中心-Spring Cloud学习第一天(非原创）

    文章大纲 一.Spring Cloud基础知识介绍二.创建单一的服务注册中心三.创建一个服务提供者四.搭建高可用服务注册中心五.项目源码与参考资料下载六.参考文章   一.Spring Cloud基础 ...

  3. Linux环境下编译JDK

    环境准备 操作系统,ubuntu-14.04.6-desktop-amd64.iso,下载地址:http://59.80.44.100/releases.ubuntu.com/14.04/ubuntu ...

  4. 554 DT:SPM 163 smtp5,D9GowAD3RPYqSvxZjpMaAA--.4817S2 1509706293 坑爹的防垃圾邮件机制

    代码如下 package ssmtest; import java.io.File;import java.io.UnsupportedEncodingException;import java.ut ...

  5. 微信小程序 压缩图片并上传

    转自https://segmentfault.com/q/1010000012507519 wxml写入 <view bindtap='uploadImg'>上传</view> ...

  6. andriod打开摄像头和打开相册

    package com.example.yanlei.picture; import android.support.v7.app.AppCompatActivity; import android. ...

  7. 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能

    他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包的 ...

  8. 大型视频网站YouTube架构学习笔记

    http://www.kaiyuanba.cn/html/1/131/147/7540.htm这几天一直在关注和学习一些大型网站的架构,希望有一天自己也能设计一个高并发.高容错的系统并能应用在实践上. ...

  9. jquery $.proxy使用 Jquery实现ready()的源码

    jquery $.proxy使用   在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个.例如: 1 //正常的this使用 2 $('#myElement') ...

  10. 浅析嵌入式C优化技巧

    嵌入式C语言优化小技巧 1 概述 嵌入式系统是指完毕一种或几种特定功能的计算机系统,具有自己主动化程度高,响应速度快等长处,眼下已广泛应用于消费电子,工业控制等领域.嵌入式系统受其使用的硬件以及运行环 ...