block,inline和inlinke-block细节对比
block,inline和inlinke-block细节对比
- display:block
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
- display:inline
- inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
- display:inline-block
- 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
block,inline和inlinke-block细节对比的更多相关文章
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- dispay属性的block,inline,inline-block
转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 bl ...
- display:block;inline;inline-block大总结
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- block, inline和inline-block的区别
display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- div横排放置对齐问题;block,inline,inline-block区别
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. 缺点:不易控制 2.只有左侧div设置为float:left,右侧div设置 ...
- block inline 和 inline-block
概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素). block元素通常 ...
随机推荐
- 一周试用yii开发一个带各种该有功能的web程序(二)
上篇随笔写完的是yii能使用简单的命令创建出一个基本的架构,我们只需要在这个架构上进行代码编写,扩展功能.而生成的一个小型系统是可以操作的,但是不是我们想要的,所以,这篇结合源码讲如何创建出我们自己的 ...
- JavaScript随笔目录
DOM DOM节点 浏览器环境 遍历节点 DOM的基本属性 Attribute和自定义Property 在DOM中搜索元素 对文档进行操作
- nginx auth
location / { auth_basic "closed site";##Context:http, server, location, limit_except auth_ ...
- wex5 实战 手指触屏插件 hammer的集成与优劣
前言 前几天,给客户做了一个图片点击放大,很简单,客户说能不能双手指缩放图片呢? 想到了hammer,不管好用不好用,总得试. 网上居然没有像样的中文文档和成熟案例,有的文写的鬼都看不懂.还是自已动手 ...
- thinkPHP 5.0.x 使用SQLite3 进行缓存设置 Cache
1. 配置 thinkPHP cache [application/config.php] 把type设置为sqlite3(默认是小写,第一个字母不区分大小写) 把path换成db,并指定sqlite ...
- 005_重写 Standard Delete Button
以后会用JS直接删除,但是在加载.js时候出现问题,会在以后进一步追踪完善: <apex:page standardController="Opportunity" > ...
- Salesforce 执行顺序
在服务器上,Salesforce按以下顺序执行: 1,从数据库加载原始记录或初始化一个用于更新插入(upsert)语句的记录. 2,从请求加载新记录的字段值并覆盖旧的值. 如果请求来自一个标准的UI( ...
- 【转载】Windows下VSCode编译调试c/c++
懒得自己配置或自己配置出现不明问题的朋友可以点这里: [VSCode]Windows下VSCode便携式c/c++环境 http://blog.csdn.net/c_duoduo/article/de ...
- linux的mount(挂载)命令详解
本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用 ...
- No row with the given identifier exists:错误另解
这是一个hibernate常见的问题.搜索出来最多的答案都是如下面这篇文章所述: http://blog.csdn.net/eyejava/article/details/1896492 但我觉得我问 ...