css知识体系汇总

最新推荐文章于 2022-11-09 10:28:42 发布

路柳狂花

最新推荐文章于 2022-11-09 10:28:42 发布

阅读量693

点赞数

分类专栏： # 前端

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css的知识用的少，看一点忘一点，所以总结一下最近看到的css知识。知识积累多了，会整理成自己完成的体系。

目前记录一下主要的几点，以后再根据实例来总结

知识来源：https://segmentfault.com/a/1190000017069985

7.内联元素的基石 line-height

8.半行距

9.CSS 世界的结界—BFC

10.理解元素的层叠顺序

1.流体布局

利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性。
元素宽度按照分辨率宽度进行长度、宽度的调整，但布局不变。

2.块级元素

1.块级盒子负责结构

2.内联盒子负责内容

正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响
.clear:after {
　 content: '';
   display: table;　// 也可以是block，或者是list-item
　 clear: both;
}

3.超出容器限制

内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap

4.关于 height:100%

父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了;百分比高度值要想起作用，其父级必须有一个可以生效的高度值;

5.为何height:100%无效

包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto

如何让元素支持height:100%效果

1.设定显示的高度值

2.使用绝对定位

6.幽灵空白节点

内联元素的所有解析和渲染会有前面有一个“空白节点”；不占据任何宽度，看不见也无法通过脚本获取（文档声明必须是HTML5文档声明（HTML代码如下））

div {
　 background-color: #cd0000;
}
span {
　 display: inline-block;
}
<div><span></span></div>

7.内联元素的基石 line-height

1.非替换元素的纯内联元素，其可视高度完全由line-height决定

2.定了用来计算行框盒子高度的基础高度;通过改变“行距”来实现

8.半行距

1.当前文字的上方和下方；这个“行距”的高度仅仅是完整“行距”高度的一半

2.半行距 = (line-height - font-size )/2;

9.CSS 世界的结界—BFC

BFC不做笔记是真的会忘，总是记成清楚浮动了

要点：“CSS世界的结界”;通过一些特定的手段形成的封闭空间，里面的人出不去，外面的人进不来，具有极强的防御力

表现原则

BFC元素是不可能发生margin重叠

BFC元素清除浮动

触发BFC条件

<html>根元素
float的值不为none
overflow的值为auto、scroll或hidden
display的值为table-cell、table-caption和inline-block中的任何一个
position的值absolute

只要元素符合上面任意一个条件， 就无须使用clear:both属性去清除浮动

BFC 与流体布局

通流体元素在设置了overflow:hidden后， 会自动填满容器中除了浮动元素以外的剩余空间，形成自适应布局效果，而且这种自适应布局要比纯流体自适应更加智能
img { float: left; }
.animal { overflow: hidden; }
<div class="father">
　 <img src="me.jpg">
　 <p class="animal">小猫1，小猫2，...</p>
</div>
要想彻底清除浮动的影响，最适合的属性不是clear而是overflow。一般使用overflow:hidden，利用BFC的“结界”特性彻底解决浮动对外部或兄弟元素的影响

10.理解元素的层叠顺序

元素发生层叠时有着特定的垂直显示顺序

谁大谁上

当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个

后来居上

当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素

层叠上下文的特性

层叠上下文的层叠水平要比普通元素高
层叠上下文可以阻断元素的混合模式
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”
每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

正统派

z-index值为数值的定位元素的传统“层叠上下文”。

position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有position:fixed声明的定位元素，当其 z-index值不是auto的时候，会创建层叠上下文

扩招派

其他CSS3属性