display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以像span一样显示在一行了。
display:inline比较经典的用法是用在 <ul> 下的 <li> 中 内联 block一般一个块占一行,除非float inline是自动排为一行,就象段内的文字一样,可成为多行。
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div> <span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
display:inline与display:block——行内元素显示与块级元素显示的更多相关文章
- 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载
块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的 ...
- line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- 浅谈css的行内类型标签和块级标签
常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...
- 重要的事情说三遍:列表 ul / ol 等是块级元素,是块级元素,块级元素
HTML 块级元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:“块级元素”译为 block level element,“行内元素”译为 inline element. 块级元素在浏 ...
- html:常见行内标签,常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 块级元素行内元素以及display属性
1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...
- CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- 块级元素、行内元素、display属性
块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...
随机推荐
- CodeSmith自动生成代码使用
官网地址:http://www.codesmithtools.com/ CodeSmith开发系列资料总结 http://terrylee.cnblogs.com/archive/2005/12/28 ...
- Cross compile perl
Alex Suykov had do some work for this purpose, and my compile script is based on her patch. Steps St ...
- Codeforces 448 C. Painting Fence
递归.分治. . . C. Painting Fence time limit per test 1 second memory limit per test 512 megabytes input ...
- 两天学会DirectX 3D之第二天
提要 前几天非常easy地跑了一个DirectX 9 程序,以为DirectX就那么绘制,事实证明有点Naive了. 之前的那个程序最多也就是个固定流水线的东西. 可是今天要用DirectX11来写一 ...
- 53、Gif 控件GifView 的使用,播放gif图片
GifView 是一个为了解决android中现在没有直接显示gif的view,只能通过mediaplay来显示这个问题的项目,其用法和 ImageView一样,支持gif图片.可监视GIF是否加载成 ...
- 高性能javascript 文件加载阻塞
高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完 ...
- dubbo 序列化 问题 属性值 丢失 ArrayList 解决
参考文章:http://blog.csdn.net/wanyanxgf/article/details/6944733 http://tianya23.blog.51cto.com/1081650/5 ...
- FineReport---样式
1.单元格样式 单元格样式说明 2.预定义样式 预定义样式说明 这里发现,改了样式,服务器更新Congfig,需要重启服务器,这样比较麻烦 我的操作是,先设置预定义样式,然后再点击自定义样式,操作是就 ...
- git 学习(一)初始化和提交
git 学习(一) 创建git版本库 $ mkdir gitstudy $ cd gitstudy $ git init nitialized empty Git repository in /Use ...
- hadoop笔记 基础 归档
核心:分布式存储和分布式计算 闲话: 底层基于socket通信 NIO——java异步io,不阻塞,不等待 bt——p2p软件(点对点传输,每个人既是上传者又是下载者.但是会占用大量网络带宽,所以很多 ...