block,inline和inline-block概念和区别   总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV,…

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,…

经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a> 点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳. 但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比: <div>这里是块元素</div> <span>用于测试(没有…

用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 block 解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样) 特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器  2.可以应用margin/padding  3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素  4.处…

 本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等.而float表示的是浮动,float:left,是针对块级元素的浮动形式,是不同形式的两种状态.  CSS display:inline和float:left两者的区别  CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默…

http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行…

(1)<block></block>标签 block常用于结合循环 <block wx:for="{{array}}" wx:key="{{index}}"> <view class="aaa">{{item}}</view> </block> array: [, , , , ] 循环结果: (2)<view></view> 接下来用view标签进行循…

基本知识点 行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局. 块级元素(block):独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽. 行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高. 行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排. 其中img和input为…

block 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(很霸道,一个块级元素独占一行) 2.元素的高度.宽度.行高以及顶和底边距都可设置. 3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度. inline 内联元素特点: 1.和其他元素都在一行上: 2.元素的高度.宽度及顶部和底部边距不可设置: 3.元素的宽度就是它包含的文字或图片的宽度,不可改变. inline-block 内联块状元素(inline-block)…

回忆一下盒子流动等概念! 1.盒子模型的宽度与高度,都是包括padding的值.(代码的理解如下:) 这样的结果的到就是  宽度和高度都是220了 2.流动型,在标签中存在块级元素和行内元素, 块级元素(在页面中独占一行,会自动填充margin,不可以独排显示.display的属性为block) div.p.ul.li.h1~h6.form.ol.等 行内元素(没有特定的宽高,可以一排显示.display的属性为inline) span.textarea.b.i.a.em等 3.block的属性…

display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以像span一样显示在一行了. 它可以让行内显示为块的元素,变为行内显示,例如 <div> DIV1 </div> <div> DIV2 </div> 这里DIV1和DIV2分…

我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a> <a…

1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px solid #ccc;margin:10px;} .inline-element a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;} </style> <div class=&q…

inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示,多个block元素会各自新起一行. inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示) 常見的inline元素:span,a,strong,em等. 常見的block元素:div,p,h1到h6,form,ul,ol等. 常見的inline-block元素:im…

inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能容纳文本和其他内联元素 只有水平方向margin-left.margin-right.padding-left.padding-right会产生边距效果 block元素 会独占一行,默认情况下,其宽度自动填满父级元素宽度 高度.行高.以及外边距和内边距都可控制 宽度缺省时默认容器的百分之百 可以容纳…

“包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块的角色,我们称之为:一个(元素的)框为它的子孙节点建造了包含块.包含块是一个相对的概念. <div> <table> <tr> <td>hi</td>…

<css权威指南>P167: The Containing Block Every element is laid out with respect to its containing block; in a very real way, the containing block is the "layout context" for an element. CSS2.1 defines a series of rules for determining an elemen…

BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的. 相邻两个盒子之间的垂直的间距是被margin属性所决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的 咱们看个例子: 代码如下: 在图中我们发现…

不是说用了display:lnline就变内联原素 和span有区别更奇怪的是ff里面执行就没区别 <span style="">xxx</span> <span style="">xxx</span> <div style="display:inline">xxx</div> <div style="display:inline">xxx&l…

inline-block 控制台-代码: PS:inline-block是让元素以内联形式存在,也就是不是块级,但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding,height) 二· 如果是inline的话,也就是内联,inline是只有水平的宽度可以调的,没有高度,任何的属性调高度都无效 三.如果不用上述两个的话,div作为块级元素,会占整个水平块,而inline-block则让他只占住自己元素所在的空间.…

经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top,margin-bottom,padding-top,padding-bottom.经过测试,margin-top和margin-bottom都没有作用.而设置padding-top以后,元素边框则会向上超出父元素,如下图所示,而不是像正常的块元素一样表现. 而给行内元素加上padding-bott…

一.定义: BFC就是一个黑盒子,可以保证盒子内部元素不管如何变化,都不会影响盒子附近的元素:它属于普通流.浮动.定位方案中的普通流. 二.触发条件: 1.body: 2.float(不包含none),position(不包含static); 3.display 为 inline-block.table-cells.flex 4.overflow(不包含visible) 三.BFC特性以及其应用: 1.同一个BFC盒子下面的2个元素的下外边距会发生折叠: 2.BFC元素可以包含浮动元素: 3.B…

…

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg…

在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示讲解方法来学习和了解DIV CSS display. 目录 CSS display使用 display的值有哪些 css display block显示 css display none隐藏 css display inline 一.CSS display使用     -   TOP 以下为DIV…

css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block.inline和inline-block. HTML组件中呈现一片空白区域的组件都可当盒模型(box modal),而CSS则提供了display属性来控制盒模型的外观. 1. block类型(块) 这种盒模型的组件默认占据一行,允许通过CSS设置宽带.高度. 例如:<div .../>.<p ../.> .<form../>.<table../.<h1&g…

转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline…

display:block;和display:inline;的区别block元素特点: 1)处于常规流中时,如果width没有设置,会自动填充满父容器 2)可以应用margin/padding 3)在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4)处于常规流中时,布局在前后元素位置之间(独占一个水平空间) 5)忽略vertical-aligninline元素特点: 1)水平方向上根据direction依次布局 2)不会在元素前后进行换行 3)受white-space控制 4)margi…

1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): -常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,…

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,…