侧边栏的固定与自适应原来是这样实现的（持续更新）

张金宝发布于2019-08-01 18:39 / 1627人阅读

摘要：规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法摘自参考。不过实际上这个对样式的影响不是很大或者设置。的值除了也是可以为数值的。的区域不会与重叠。

摘要

刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。

正文

行内元素的高

众所周知，行内元素是无法通过直接设置height样式来设置高度的，我们常用的方法是设置 line-height, font-size 来撑高。可是不知道道友们有没有发现，比如：


  hello

这段HTML在浏览器查看span的高度并不是16px

尝试设置行高也无济于事，不过还是找到了原因所在。W3C规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法（摘自参考）。不过实际上这个对样式的影响不是很大,或者设置display: inline-block；line-height: 1。

vertical-align属性的理解

vertical-algin理解
vertical-algin 元素相对于基线(baseline, 字符的基线要底部偏上一些)的偏移量。vertical-align的值除了baseline, middle也是可以为px数值的。而那些特殊有意义的单词也可以理解为对应了相应的px值。借用一张表，这里描述的比较详细

下图栗子

扩展一句：行内元素的高 = 行高 + vertical-align**

侧边栏一边固定一边自适应的原理（BFC）

页面结构

 .left {
   float: left;
   width: 200px;
   height: 300px;
 }
 .right {
    height: 350px;
    overflow:hidden;
 }
 // 这样会得到一个left浮在right上的布局（下列的特性1）
 // 当设置right的overflow:hidden,则right产生为bfc区域，left与right就成了并列的布局，且left区域的宽固定，right会自适应（下列特性2）

主要利用了bfc的两个特性:
1、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
2、BFC的区域不会与float box重叠。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51937.html

侧边栏的固定与自适应原来是这样实现的（持续更新）

摘要：规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法摘自参考。不过实际上这个对样式的影响不是很大或者设置。的值除了也是可以为数值的。的区域不会与重叠。摘要刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。正文行内元素的高 ...

sarva 2019-08-30 14:06 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
纯CSS实现侧边栏/分栏高度自动相等

摘要：一为何要分栏高度一致分栏高度一致的目的是更加美观。二纯实现侧边栏分栏高度自动相等这里直接介绍我认为的最佳的侧边栏分栏高度自动相等方法。一、为何要分栏高度一致？分栏高度一致的目的是更加美观。举两个例子吧。 ① 对于分栏布局，我们或许会用边框(border)进行分隔，就如鄙人博客的分栏：边框分栏张鑫旭-鑫空间-鑫生活此时最担心的问题就是高度不一致，尤其是无边框属性的分栏高度超过有边框...

li21 2019-08-29 12:43 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 评论0 收藏0