CSS 基础系列：inline-blcok和float

因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。 3.如何消除inline-block带来的空隙; 3.1 思路一： 元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。 /div> .demo span{ background:#ddd; display: inline-block; } 3.3 思路三： 不管是思路一还是思路二，都只适用于写静态页面的时候 ，而空格会被当成字符处理，因此通过给父元素设置字体大小为0，则空格字符大小也为0，相当于消除了其大小。 3.4 思路四： 上面的思路其实已经很完美，但可惜不兼容Safari，以下给出终极方案,即font-size:0配合letter-space:-N px。

inline-block清除空隙2

这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。 ；其它浏览器任何情况下均出现间隙； ​​回到顶部​​ inline-block元素间隙由来 在例子1中，定义为inline-block元素会产生间隙，如果不设置display:inline-block 只要把标签写成一行或者标签直接没有空格，就不会出现间隙。但是这种方式是不太可靠，存在太多不可控的因素导致失效，例如：代码生成工具、代码格式化、或者其他人修改了代码等等。 回到顶部​​ 移除inline-block元素间隙方法 （1）移除标签间的空格 元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。 display: inline-block; font-size: 14px; /*要设置相应的字号*/ } 总结 在移动端的页面中，个人倾向于设置font-size:0这种方法来清除掉

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

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

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

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

前端基础篇之CSS世界

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

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

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

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

探索CSS：从入门到精通Web开发（二）

我们将教你如何运用这些技术来增强用户体验。 CSS预处理器： 介绍CSS预处理器（如Sass和Less）的使用，以及它们如何帮助你更高效地编写和管理CSS代码。 +a表示透明度取值0-1； 十六进制表示法：#开头，将数字转换成十六进制表示 #000000，简写#000 标签居中： 在想居中的标签里加margin ：0 auto 选择标签进阶 后代选择器：空格 ：before 在父元素内容最前面添加一个微元素 ：：after 在父元素内容最后面添加一个微元素 必须设置content属性才能生效 浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个间隙 浮动： float之后的标签具有行内块特点 float 使盒子在同一行 浮动元素会脱离标准流，在标准流中的不占原来位置 浮动元素比标准流高半个级别，可以覆盖标准流中的原素 清除浮动·： 清除浮动带来的影响 、 父子级标签，子集浮动，父级没有高度，后面的标准流会受到影响 放法： 额外标签法 在父元素内容的最后添加一个块级元素 给添加的块级元素设置clear：both（清除左右浮动） 缺点： 会在页面额外添加标签

CSS基础布局

CSS布局 确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。 * 像文本一样 排列block元素 * 没有 清除浮动 等问题，简单易用 * 但是需要 处理间隙 多个inline-block之间的间隙 相当于 文字与文字 之间的间隙。 fixed相对于屏幕(viewport) 来进行定位 3. display: inline-block的间隙 如何处理？ 如何清除浮动，为什么清除浮动 这是因为 float元素 不会占据父元素的布局空间，有可能 float元素 就会超出 父元素，从而对其它的元素 造成影响。 如何视频移动端？

前端成神之路-浮动

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

探索CSS：从入门到精通Web开发（二）

我们将教你如何运用这些技术来增强用户体验。 CSS预处理器： 介绍CSS预处理器（如Sass和Less）的使用，以及它们如何帮助你更高效地编写和管理CSS代码。 +a表示透明度取值0-1； 十六进制表示法：#开头，将数字转换成十六进制表示 #000000，简写#000 标签居中： 在想居中的标签里加margin ：0 auto 选择标签进阶 后代选择器：空格 ：before 在父元素内容最前面添加一个微元素 ：：after 在父元素内容最后面添加一个微元素 必须设置content属性才能生效 浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个间隙 浮动： float之后的标签具有行内块特点 float 使盒子在同一行 浮动元素会脱离标准流，在标准流中的不占原来位置 浮动元素比标准流高半个级别，可以覆盖标准流中的原素 清除浮动·： 清除浮动带来的影响 、 父子级标签，子集浮动，父级没有高度，后面的标准流会受到影响 放法： 额外标签法 在父元素内容的最后添加一个块级元素 给添加的块级元素设置clear：both（清除左右浮动） 缺点： 会在页面额外添加标签

探索CSS：从入门到精通Web开发（二）

我们将教你如何运用这些技术来增强用户体验。 CSS预处理器： 介绍CSS预处理器（如Sass和Less）的使用，以及它们如何帮助你更高效地编写和管理CSS代码。 +a表示透明度取值0-1； 十六进制表示法：#开头，将数字转换成十六进制表示 #000000，简写#000 标签居中： 在想居中的标签里加margin ：0 auto 选择标签进阶 后代选择器：空格 ：before 在父元素内容最前面添加一个微元素 ：：after 在父元素内容最后面添加一个微元素 必须设置content属性才能生效 浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个间隙 浮动： float之后的标签具有行内块特点 float 使盒子在同一行 浮动元素会脱离标准流，在标准流中的不占原来位置 浮动元素比标准流高半个级别，可以覆盖标准流中的原素 清除浮动·： 清除浮动带来的影响 、 父子级标签，子集浮动，父级没有高度，后面的标准流会受到影响 放法： 额外标签法 在父元素内容的最后添加一个块级元素 给添加的块级元素设置clear：both（清除左右浮动） 缺点： 会在页面额外添加标签

【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

, 如上一篇博客 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 ) 中绘制的如下模块 : 在上面的盒子中 , 没有设置高度 , 只设置了一个 1215px 的宽度 ; 在列表中每个列表项都设置了 浮动 ; /* 网格商品展示 */ .box-bd { /* 处理列表间隙导致意外换行问题 一排有 5 个 228x270 的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 , 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格中 ul 列表中每个列表项样式 , 后续排列都会出现问题 ; 参考 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 ) 【CSS】清除浮动 ④ ( 清除浮动 -

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

还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。 但是，空格是透明的，为了便于大家理解，我就直接使用很明显的匿名inline box, 也就是字符代替。如下，大家会发现，图片下面的间隙，依旧是那个间隙。 ? zxx 下面要解释这个间隙就好解释了。 zxx 会发现，图片下面的间隙，依旧是那个间隙。但是，我们的理解就好理解了。回答下面几个问题，我们就知道表现的原因了： vertical-align默认的对齐方式是？ 后面zxx文字的高度从何而来？ 结果会发现，上面巨大的空隙是由占位i元素上面和下面的间隙共同组成的。 下面问题来了：上面的间隙是如何产生的？下面的间隙是如何产生的？如果去除这些间隙呢？ 很多时候，复杂问题是由简单问题组合而成的，实际上，这里的间隙现象的始作俑者和上面的简单现象一样，都是vertical-align和line-height搞基带来的不好的影响。

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

还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。 但是，空格是透明的，为了便于大家理解，我就直接使用很明显的匿名inline box, 也就是字符代替。如下，大家会发现，图片下面的间隙，依旧是那个间隙。 ? zxx 下面要解释这个间隙就好解释了。 zxx 会发现，图片下面的间隙，依旧是那个间隙。但是，我们的理解就好理解了。回答下面几个问题，我们就知道表现的原因了： vertical-align默认的对齐方式是？ 后面zxx文字的高度从何而来？ 结果会发现，上面巨大的空隙是由占位i元素上面和下面的间隙共同组成的。 下面问题来了：上面的间隙是如何产生的？下面的间隙是如何产生的？如果去除这些间隙呢？ 很多时候，复杂问题是由简单问题组合而成的，实际上，这里的间隙现象的始作俑者和上面的简单现象一样，都是vertical-align和line-height搞基带来的不好的影响。

【综合笔试题】难度 2/5，真实面试难度的模拟题

必要时可用空格 ' ' 填充，使得每行恰好有 maxWidth 个字符。 要求尽可能均匀分配单词间的空格数量。如果某一行单词间的空格不能均匀分配，则左侧放置的空格数要多于右侧的空格数。 当空格无法均分时，每次往靠左的间隙多添加一个空格，直到剩余的空格能够被后面的间隙所均分。 sb.append(spaceItem); sum += spaceItemWidth; // 剩余的间隙数量 （可填入空格的次数） int remain = cnt - k - 1 - 1; // 剩余间隙数量 * 最小单位空格长度 + 当前空格长度 < 单词总长度，则在当前间隙多补充一个空格 if (remain * spaceItemWidth + sum < spaceWidth) {

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

前端面试题2（CSS）

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