盒子的display属性
<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属性的更多相关文章
- 0029 定位:position(相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性)
目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...
- 深入理解和应用display属性(二)
四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...
- 深入理解和应用display属性(一)
Display在官方定义:规定元素应该生成的框的类型.本文只重点分析常用的6个值:none.block.inline.inline-block.inherit.flex.其他table.list-it ...
- CSS传统布局之display属性+float属性+position属性
这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...
- 块级元素行内元素以及display属性
1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
随机推荐
- (4)Unity3d镜头
Input.GetMouseButton()://获取鼠标按钮状态,0-鼠标左键,1-鼠标右键,2-鼠标中键: Input.GetAxis("Mouse X ") //鼠标水平向移 ...
- Codeforces 196C Paint Tree(贪心+极角排序)
题目链接 Paint Tree 给你一棵n个点的树和n个直角坐标系上的点,现在要把树上的n个点映射到直角坐标系的n个点中,要求是除了在顶点处不能有线段的相交. 我们先选一个在直角坐标系中的最左下角的点 ...
- ElasticSearch常用结构化搜索
最近,需要用到ES的一些常用的结构化搜索命令,因此,看了一些官方的文档,学习了一下.结构化查询指的是查询那些具有内在结构的数据,比如日期.时间.数字都是结构化的. 它们都有精确的格式,我们可以对这些数 ...
- DTrace Oracle Database
http://d.hatena.ne.jp/yohei-a/20100515/1273954199 DTrace で Oracle Database のサーバー・プロセスをトレースしてみた Oracl ...
- 从零开始开发iPhone,教你如何在真机调试iPhone应用程序
对于真机调试,首先要在苹果网站上注册APP ID,以及购买iPhone Develop Program(iDP) 开发者授权,99美元.然后要创建证书请求CSR,创建步骤如下:设置OCSP和CRL为关 ...
- 8.【nuxt起步】-vue组件之间数据交互
那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
The await operator is used to wait for a promise to settle. It pauses the execution of an async func ...
- 百科知识 ass文件如何打开
直接拖入视频即可播放 鼠标右键 用记事本打开 也有一些软件支持比如POPSUB(也比较方便调整时间轴) 如果你是说如何加载字幕的话 用VOBSUB是最好的... ASS是视频的字幕,和视频放在同一文件 ...
- jQeury入门:遍历
一旦用jQuery创建一个初始的包装集.你就能深度遍历刚刚选择的包装集. 遍历能够被分为三个基础元件:父级.子级,同级.jQuery为全部这些元件提供丰富易用的方法.注意每个方法都能轻易的传递给字符串 ...
- 数据库 ""和null的在java 持久化中的区别
如果查找的时候查找了dealerCarType中a字段,但是数据库中a字段为"",那么持久化结果dealerCarType.getA() 结果为""; 如果查找 ...