完美解决footer固定在底部 ? 很多人认为页面页脚部分不就是用footer主义化标签包起来嘛，然而不然；如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况： ?...导致这一问题的原因是页面内容太少，无法将内容区域撑开，从而在 footer 下面留下一大块空白；但是我们又希望footer能在窗口最底端。...今天给大家介绍两种方法来完美解决这个问题： 方法一：footer高度固定+绝对定位 思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom...*/ position:absolute; bottom:0px; left:0px; background:#333; } 如果在main区域设置了浮动啥的你会发现footer固定在页面可视区的底部...flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）；同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕。
在css世界中，内联元素极为重要，涉及的css属性也非常多，这些属性往往具有继承特性！ 内联盒模型.png 内容区域：只与字号和字体有关，与行高无关！...>helloworld 包含块：如上述标签 幽灵空白节点：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”，同时具有该元素的字体和行高属性的...css中基线示意.png ex是CSS中的一个相对单位，指的是小写字母x的高度，1ex指小写字母x的高度。 内联元素默认是基线对齐的，而基线通常指x的底部。...替换元素尺寸从内而外分为3类：固有尺寸（源本身的宽度和高度）、HTML尺寸（HTML标签的width和height属性）和CSS尺寸（CSS中的widht和height以及max-/min-）其优先级为...BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。如果一个元素具有了BFC，内部子元素再怎么翻江倒海，都不会影响外部的元素。
本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证...右侧的table和左侧的文字在一行排列（外在盒子inline的表现特征），同时有拥有自定义宽度111px（内在盒子table可以设置宽高）。 css权重和超越`!...注意是行框盒子的最小高度，而不是块级元素的实际高度。...（图中两个div行高一样，div.one 的背景色区域就是行框盒子的高度，而 div.two 的背景区域则是实际高度，其行框盒子高度和 div.one 是一样的。） ?...上图分析：首先第一个i标签基线与第二行的span标签中的数字的基线对其，所以其位置在中间。其次最后一行的i标签基线对齐幽灵空白节点字母x的基线，没有错位，所以此时最后一行的间隙高度就是字母x的高度。
基线：书写英语字母时，字母 X 底部所在的位置，可以了解下《字母’x’在 CSS 世界中的角色和故事》(https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css...text-bottom，指的是盒子的底部和父级内容区域的底部对齐，即与 content-area 底部部对齐。 例子如下： ?...产生这种现象的原因：空白节点、line-height 和 vertical-align 属性；图片后放置空白节点 X，会发现图片的基线是元素底部，与“空白节点”的基线对齐，那解决这种问题有以下几个方法...2、“空白节点” 可以受具有继承特性的 CSS 属性影响，于是，我们可以通过其他东西来做调整，让字符的中线和字符内容中心线在一起，或者说在一个位置上就可以了。...比如下面这种情况，整个盒子高度是确定的，但是文本的内容不确定。同时要求两种表现形式相同，我们要怎么实现呢？ ?
(宽度和高度)，虽然并没有设定使宽度和高度值。...，允许一个盒子可以比指定的最小值更大，但是不能更小。...打印页面中的orphanes和widows 示例: p { orphans: 4; } p { widows: 4; } 描述 orphans属性设定在打印页面底部显示的最少行数。...，同时允许明确的设置断行。...支持情况 IE6 No IE7 No IE8 Yes Bugs 尽管IE6 和IE7 支持 @import，它们在媒体类型被指定的时候会无效，甚至会引起正
并不存在于dom之中，只存在在页面之中。 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...8.前端项目中为什么要初始化CSS样式？ 因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。...link属于HTML标签，而@import是css提供的； 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载； @import只在IE5以上才能识别，而link是...、样式、颜色三部分组成 padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响 margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域...Box-sizing CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度。
画箭头 .arrow-right { 宽度：12px； 高度：12px； 边框底部：1px实心＃999; 右边框：1px实线＃999; 变换：rotate（-45deg）; } 4，超过1行/ 2行显示省略号....line-1 { 宽度：100px； 空白：nowrap; 溢出：隐藏； 文字溢出：省略号； } .line-2 { 宽度：100px； 溢出：隐藏； 文字溢出：省略号； 显示：-webkit-box...; -webkit-line-clamp：2; //控制多行的行数 -webkit-box-orient：垂直; } 5，水平/垂直居中定位 //绝对定位未知高度，距顶部，左边50％，然后转换：translate...中央 { 保证金：自动； 位置：绝对； 最高：0; 底部：0 左：0； 正确：0； } //绝对定位已知高度 。...版本19+ * / ：-ms-input-placeholder {} / * IE浏览器* / //冒号前写input或textarea等元素 // IE9和Opera12以下版本的CSS选择器均不支持占位文本
如果它们对齐 top 或 bottom，它们必须对齐，以便使行盒高度最小化。如果这些盒足够高，则有多种解决方案并且CSS2.2没有规定此行盒的基线的位置（即，strut的位置，参见下文）。...注：CSS2.1没有定义什么是行内盒的内容区域（参见文档-10.6.1 ），因此不同的用户代理可能把backgrounds和borders绘制在不同地方。...最小高度由基线上方的最小高度和下方的最小深度组成，就如同每个行盒以一个具有该元素字体和行高属性的零宽度行内盒开始一样。我们称此虚构盒为“支柱 Strut ”。（该命名灵感源于Tex。）...text-bottom 把盒的底部同父级的内容区域的底部对齐（参见 10.6.1）。 把盒提升（正值）或降低（负值）指定距离（line-height 值的百分比）。...对于“不包含文本，没有保留的空白区域，没有margins、padding、border不为零的行内元素，也没有其他在标准流内 In-flow 内容（如图片、行内块或行内表格），并且不以保留的换行符结尾”
（3）如果有CSS尺寸，则最终尺寸由CSS属性决定。 （4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。...内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。 80.line-height 的特殊性？ （1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。...（5）对于纯文本元素，line-height直接决定了最终的高度。但是，如果同时有替换元素，则line-height只能决定最小高度。...然后，重点来了，在每个 “行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。 81.vertical-align 的特殊性？...•pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。 •pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。
上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。...在本文中，我们将详细介绍CSS的最大和最小宽度和高度属性，并使用可能的用例和技巧详细解释每一个属性。 width 属性 首先要讨论的是与宽度相关的属性。...height 属性 除了最小和最大宽度属性外，我们还具有与高度相同的属性。...标签列表 当有一个标签列表时，建议限制一个标签的最小宽度，这样如果它的内容很短，它的外观就不会受到影响。 ? 通过具有这种灵活性，无论内容有多短，标签都将看起来不错。...最小高度和粘性页脚 当一个网站的内容不够长，它希望看到页脚粘到底部。让我们用一个可视化的例子来更好地展示这一点。 ? 请注意，页脚未粘贴在浏览器窗口的末尾。
相关知识点： 块格式化上下文（BlockFormattingContext，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。...出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符*来初始化。...（待深入实践） 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为...内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。 80.line-height 的特殊性？ （1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。...（5）对于纯文本元素，line-height直接决定了最终的高度。但是，如果同时有替换元素，则line-height只能决定最小高度。
，占满整个页面，中间内容区域宽度较小不占满屏幕。...1 垂直方向的布局（sticky footer） 这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。...当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。...为内容区域添加最小的高度 这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。...每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。 使用flex布局 这种方法就是利用flex布局对视窗高度进行分割。
相关知识点： 块格式化上下文（BlockFormattingContext，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。...出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即 可，并不需使用通配符*来初始化。...（待深入实践） 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容 器内的页面取当前可视区高度，同时容器的父级元素overflow...内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。 80.line-height 的特殊性？ （1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。...（5）对于纯文本元素，line-height直接决定了最终的高度。但是，如果同时有替换元素，则line-height只能决定最小高度。
iOS 上拉边界下拉出现白色空白 表现 手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。...产生原因 我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 absolute 和 fixed 定位的元素。导致可视区域变小，布局错乱。...原理与解决方案 软键盘将页面顶起来的解决方案，主要是通过监听页面高度变化，强制恢复成弹出前的高度。...iPhone X系列安全区域适配问题 表现 头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。...查看抓包和 H5 页面结构 这种方式可以调试生成环境的页面，不需要修改代码，可以应付大多数调试需求 总结 本篇文章耗费作者一个多星期的业余时间，存手工敲打 4500 +字，同时收集，整理之前很多坑点和边写作边思考和总结
在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。...一.css尺寸 1.首选最小宽度–实现复杂图形效果 在css中，图片和文字的权重远大于布局，因此当width:0时表现出来的宽度就是“首选最小宽度”。...：display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域：可以理解为文本选中的背景色区域(重点) 内联盒子：内联标签或者纯文本 行框盒子：由内联盒子组成的一行...，每一行就是一个行框盒子 包含盒子：由行框盒子组成的盒子 幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。...relative,则relative务必最小化（最小包含区域） –为了避免层级覆盖等问题 层叠上下文 定位元素的默认z-index:auto;此时和普通元素一样，一旦z-index设置为任意数值，就创建了一个层叠上下文
高度 = height + padding(高) + border(高)。 ---- 如何在页面上实现一个圆形的可点击区域 ？...通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 ---- 页面导入样式时，使用 link 和 @import 有什么区别 ？...提供的，只能用于加载 CSS; 页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载; import 是 CSS2.1 提出的，只在 IE5 以上才能被识别...父级 div 定义 overflow: hidden， 原理：必须定义 width 或 zoom: 1，同时不能定义 height，使用 overflow: hidden 时，浏览器会自动检查浮动区域的高度...有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积。 JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
(常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 7, 关于手形光标. cursor: pointer...有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。...6、CSS box模型的另一种调整技巧 这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。...当然，有时候定位的方法而不是边距的方法更好些。 10、直通到屏幕底部的背景色 在垂直方向是进行控制是CSS所不能的。...如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS： #navigation { background: blue; width: 150px } 较短的导航条是不会直通到底部的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
