CSS 基础系列：inline-blcok和float

因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。 3.如何消除inline-block带来的空隙; 3.1 思路一： 元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。 -- -->我是一个span

inline-block清除空隙2

hack*/ *zoom:1; /*触发hasLayout*/ } IE7及以下浏览器：block level元素转换为inline-block，在IE7及以下浏览器下元素间不出现间隙；inline 的元素，在IE7及以下浏览器下这俩元素间不出现间隙；紧跟inline level转换为inline-block的元素之后有个block level转换为inline-block的元素，在IE7及以下浏览器下这俩元素间出现间隙 只要把标签写成一行或者标签直接没有空格，就不会出现间隙。但是这种方式是不太可靠，存在太多不可控的因素导致失效，例如：代码生成工具、代码格式化、或者其他人修改了代码等等。 回到顶部​​ 移除inline-block元素间隙方法 （1）移除标签间的空格 元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。 display: inline-block; font-size: 14px; /*要设置相应的字号*/ } 总结 在移动端的页面中，个人倾向于设置font-size:0这种方法来清除掉

CSS魔法堂："那不是bug，是你不懂我!" by inline-block

为啥inline-level element设置了display:inline-block后之间没有诡异的间隙呢？  还记得杨过是如何变成神雕大侠的吗？ 对于问题2，我们先看看是否真的没有间隙吧！ 可以看到蓝色块k和红色块h间存在一个空格，而红色块k后也存在一个空格。可是代码中我们看到蓝红色块间有4个 HTML实体，为啥只有一个空格呢？而红色块中仅仅换了行而已，怎么就有个空格呢？   实际上除了IE5.5/6/7外其他浏览器均遵守之一规定的。也许你会说上面的实验不是已经证明chrome43不遵守这个法则吗？ 虽说这方法从根本上清除了white-space字符串，但那种丑不是一般人能接受的。

前端成神之路-浮动

如何让多个盒子(div)水平排列成一行？ ? 如何实现盒子的左右对齐？ ? 浮动元素与兄弟盒子的关系 在一个父级盒子中，如果前一个兄弟盒子是： 浮动的，那么当前盒子会与前一个盒子的顶部对齐； 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。 清除浮动 2.1 为什么要清除浮动 因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。 ? 总结： 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响 准确地说，并不是清除浮动，而是清除浮动后造成的影响 2.2 清除浮动本质 听pink老师说清除浮动本质： ​ 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 父级有了高度，就不会影响下面的标准流了 2.3 清除浮动的方法 在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。

两个CSS知识点：BFC和选择器权重

决定元素的内容如何渲染以及与其他元素的关系和交互。BFC 有一个重要的特点：具有隔离作用。 如何解决 margin 塌陷？ CSS 提供了 clear 属性可以给一个元素清除浮动。 BFC 内的元素按正常流排列，元素之间的间隙由元素的外边距（margin）控制。 BFC 中的内容不会与外面的浮动元素重叠。 计算 BFC 的高度，需要包括 BFC 内的浮动子元素的高度。 除此之外，还有一种格式： [attr operator value i] 它表示在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I，大小写不敏感），可以在匹配属性值时忽略大小写。

CSS浮动知识

浮动元素与兄弟盒子的关系 在一个父级盒子中，如果前一个兄弟盒子是： 浮动的，那么当前盒子会与前一个盒子的顶部对齐； 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。 防止引起问题 清除浮动 因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。 ? ? 所以： 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响 准确地说，并不是清除浮动，而是清除浮动后造成的影响 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 父级有了高度，就不会影响下面的标准流了 清除浮动的方法 在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。 父级overflow:hidden; 书写简单 溢出隐藏 父级after伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题 父级双伪元素 结构语义化正确 由于IE6-7不支持:after

MYSQL 我说的那个锁，不是你的那个锁

举例：如果我们的数据表中 的数据记录是 1 6 7 8 9 10 select * from t where number = 6 for update 此时锁定的记录 （1 6 7） ，此时如果在 1和 6之间插入数据会无法插入 GAP LOCK 间隙锁，间隙锁的知名度比 NEXT KEY LOCK 要大的的 （），标识间隙锁，间隙锁本来也可以理解成为范围锁，他将防止其他事务在这个范围内插入或修改记录 添加间隙锁和间隙锁之间是不冲突的，而添加间隙锁会严重影响数据库的并发性，还以上面的例子来说，他是要锁定 1（23456）7 ，同时不同的事务可以在间隙上持有冲突锁。 允许存在冲突的间隙锁的原因是，如果从索引中清除一条记录，则必须合并不同事务在记录中持有的间隙锁。 那如何避免上面的情况 ，直接将数据库的隔离级别从 RR 改为 RC 这样的死锁就不会在存在了。 待......

CSS中的vertical-align跟line-height相互作用

//zxx: IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height 三、背地里无处不在的基友关系 //zxx: 注意，vertical-align和line-height 还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。 但是，空格是透明的，为了便于大家理解，我就直接使用很明显的匿名inline box, 也就是字符代替。如下，大家会发现，图片下面的间隙，依旧是那个间隙。 ? zxx 下面要解释这个间隙就好解释了。 zxx 会发现，图片下面的间隙，依旧是那个间隙。但是，我们的理解就好理解了。回答下面几个问题，我们就知道表现的原因了： vertical-align默认的对齐方式是？ 后面zxx文字的高度从何而来？ 结果会发现，上面巨大的空隙是由占位i元素上面和下面的间隙共同组成的。 下面问题来了：上面的间隙是如何产生的？下面的间隙是如何产生的？如果去除这些间隙呢？

深入解析Java系统设计：事务隔离级别、MVCC与Gap锁

间隙锁（Gap Lock）：锁定索引记录之间的间隙，防止其他事务在间隙中插入数据。 临键锁（Next-Key Lock）：记录锁和间隙锁的组合，锁定记录及其前面的间隙。 MySQL采用延迟清理策略，仅当确认没有事务需要访问旧版本时才会清除undo log，这保证了版本链的完整性。值得注意的是，undo log本身也会被持久化到磁盘，并非纯内存结构。 问题5：请解释Gap锁如何防止幻读？ -- 在id=7不存在时，会锁定(5,10)间隙 SELECT * FROM table WHERE id=7 FOR UPDATE; 问题6：什么情况下会触发间隙锁？ 日志 问题8：如何证明MySQL使用了MVCC机制？

去除inline-block元素间间距的N种方法

二、方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。 a { font-size: 12px; } 这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。 :none; } 您可以狠狠地点击这里（去年制作的一个简单demo）：​​font-size:0清除换行符间隙demo​​ ​补充：​根据小杜在评论中中的说法，目前Chrome浏览器已经取消了最小字体限制 因此，上面的​​-webkit-text-size-adjust:none;​​代码估计时日不多了。 根据我去年的测试，该方法可以搞定基本上所有浏览器，包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，​​

Css详细介绍

模式，写在body前，页面还未开始展示，不会出现页面白屏效果；写在body后，爬到css代码的时候，爬虫进入css模式，可能会出现白屏的情况。 24、解决li和li之间的看不见的空白间隙问题 浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度 28、清除浮动 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 45、display:inline-block 什么时候会显示间隙？ 有空格时候会有间隙——解决：移除空格 margin 正值的时候——解决：margin使用负值 使用 font-size 时候——解决：font-size:0、letter-spacing、word-spacing

灵异留白事件——图片下方无故留白

还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。 但是，空格是透明的，为了便于大家理解，我就直接使用很明显的匿名inline box, 也就是字符代替。如下，大家会发现，图片下面的间隙，依旧是那个间隙。 ? zxx 下面要解释这个间隙就好解释了。 zxx 会发现，图片下面的间隙，依旧是那个间隙。但是，我们的理解就好理解了。回答下面几个问题，我们就知道表现的原因了： vertical-align默认的对齐方式是？ 后面zxx文字的高度从何而来？ 这种通过line-height定高，元素vertical-align:middle垂直居中的方法不仅适用于现代浏览器，连IE7浏览器也是支持的： ? 结果会发现，上面巨大的空隙是由占位i元素上面和下面的间隙共同组成的。 下面问题来了：上面的间隙是如何产生的？下面的间隙是如何产生的？如果去除这些间隙呢？

一篇文章彻底搞懂Mysql事务相关原理

例如，如果该id列具有唯一索引，则以下语句仅使用一个具有id值100 的行的索引记录锁定，其他会话是否在前面的间隙中插入行并不重要： SELECT * FROM child WHERE id = 100 ; 如果id未建立索引或索引不唯一，则该语句会锁定前面的间隙。 允许冲突的间隙锁的原因是，如果从索引中清除记录，则必须合并由不同事务保留在记录上的间隙锁。 间隙锁定InnoDB是“ 纯粹抑制性的 ”，这意味着它们的唯一目的是防止其他事务插入间隙。间隙锁可以共存。 此锁发出插入意图的信号是，如果多个事务未插入间隙中的相同位置，则无需等待插入到同一索引间隙中的多个事务。假设存在索引记录，其值分别为4和7。 单独的事务分别尝试插入值5和6，在获得插入行的排他锁之前，每个事务都使用插入意图锁来锁定4和7之间的间隙，但不要互相阻塞，因为行是无冲突的。

前端基础篇之CSS世界

而元素高度坍塌就导致元素后面的非浮动块状元素会和其重叠，于是他就像脱离文档流了。 前三个特性都是正能量满满，但是最后一个特性却给我们开发者带来了很多麻烦，需要用到clear来清除浮动。 `clear`的作用和不足 大家都知道clear: both可以清除前面浮动元素的浮动，但实际上，他并不是真的清除了浮动。 clear的定义是：元素盒子的边不能与前面的浮动元素相邻。 不要被表面意思误导，word-spacing指的是字符“空格”的间隙。 如果一段文字中没有空格，则该属性无效。下面代码设定空格间隙是20px，也就是说空格现在占据的宽度是原有的空格宽度+20px的宽度：

我有空 格，我该死...... 此时i标签的基线发生错位，位移到下面与幽灵空白节点基线对齐，导致产生了间隙。 所以只需要再改变i标签的对齐方式，就能彻底清除间隙：地址 ?

CSS的盒子模型

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。 如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序： 1border-width:10px 20px; 2border-style:solid dashed dotted; border-color 清除浮动方法1：给浮动的元素的祖先元素加高度。 如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。 ? 只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。 但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。 两个div之间，没有任何的间隙了。 3）隔墙法： 在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 墙用自己的身体当做了间隙。

外边距折叠（Margin collapsing）笔记?

可能的情况 毗邻的兄弟元素 相邻的兄弟元素垂直边距会发生折叠，但最后一个元素需要清除浮动时例外。 区分margin-top的方法有设置border、padding、inline content、清除浮动、避免创建BFC区域。 :yellow">上面的间隙是10px

前端面试题2（CSS）

简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 然后用float或者inline使其不换行即可 经常遇到的浏览器的兼容性有哪些？ 行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了 为什么要初始化CSS样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的 (携程) 移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing 谈谈浮动和清除浮动 浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止 由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout 清除浮动最佳实践（after伪元素闭合浮动）： .clearfix:after{ content: "\200B :top; 消除垂直间隙 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差 overflow: scroll