CSS知识小记
回复数(0) 浏览数(38)
{{topic.upvote_count || 0}} 编辑 回复

浏览器渲染原理

渲染流程
渲染流程

浏览器在服务器获取到html文档后,自上而下进行解析,在脚本文件不包含defer和async属性时,会按照以下方式执行文档内容
1. 解析html标签,生成DOM树
2. 解析css标签,生成CSSOM树
3. 把DOM树和CSSOM树组合成渲染树
4. 通过渲染树进行布局,计算每个节点的几何结构
5. 绘制元素的颜色、阴影
6. 将不同层次的元素合成,展示在页面上

相关资料网页渲染

CSS动画

transition

在元素的css属性发生改变时,transition可以以动画的方式将元素改变前的值过渡到改变后的值

transition: width 2s linear, height 2s ease, background-color 2s ease-in, transform 2s linear;

相关属性

transition-property:指定需要过渡的css属性名称,多个名称用逗号隔开

transition-duration:设置过渡动画的完成时间

transition-timing-function:指定transition效果的转速曲线,默认值为ease

linear  规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease    规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out    规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay:定义transition效果等待多长时间后开始执行,非必填

监听transitions

el.addEventListener("transitionstart", func1, true);
el.addEventListener("transitionrun", func2, true);
el.addEventListener("transitionend", func3, true);

相关资料CSS 动画之——transition

animation

animation可以通过指定动画开始、结束以及中间点样式的关键帧来实现动画效果

.test {
    animation: skyset 5s linear 2s infinite alternate;
}
@keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

相关属性

animation-name: 设置 @keyframes 动画的名称。

animation-duration:设置动画完成一个周期的时间,单位为s或ms,默认是0。

animation-timing-function:设置动画执行的速度曲线,默认是ease

animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

animation-delay:定义animation效果等待多长时间后开始执行,非必填

animation-iteration-count:设置动画被播放的次数。默认是 1。

animation-direction:设置动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state:设置动画是否正在运行或暂停。默认是 "running"。

监听animation

e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

相关资料animation关于stepcss3动画实践

BFC

官方解释是:块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。

BFC特性

计算BFC元素高度时,子元素的浮动元素也参与计算

    <div style="border:1px solid green;width:250px;">
        <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;float: left;"></div>
    </div>


浮动元素因为脱离了文档流,会导致父元素高度坍塌,看起来会在父元素外部

<div style="overflow:hidden;border:1px solid green;width:250px;">
<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"> </div>
<div style="border:1px solid red;width:100px;height:100px;margin:10px;float: left;"></div>
</div>


但是在BFC元素中浮动元素就会被父元素包裹住

BFC元素不会和浮动元素重叠

    <div style="overflow:hidden;border:1px solid green;width:250px;">
            <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;float: left;"></div>
            <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>


这里蓝边框的浮动盒子和红底盒子重叠,会影响页面的排版

<div style="overflow:hidden;border:1px solid green;width:250px;">
<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;float: left;"></div>
<div style="overflow:hidden;border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"> </div>
</div>


在红底盒子创建了BFC后,两个盒子就不再重叠

BFC内的块级元素垂直方向的外边距会发生重叠

    <div style="overflow:hidden;border:1px solid green;width:250px;">
        <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>



可以看到两个盒子都有10px的外边距,正常情况下两个盒子中间应该会有20px,但是在BFC内块级元素垂直方向的外边距会发生重叠,所以两个盒子之间的间隔只有10px,如果两个盒子本身设置的边距不一样大,两个盒子之间的距离取较大的那个边距
而且你会发现在没有BFC元素包裹下,两个块级元素一样会有外边距合并的情况

在网上查BFC资料的时候很多地方都提到BFC的一个特性:BFC内部的块级盒子会在垂直方向,一个接一个地放置,刚看到的时候我就很纳闷,因为即使没有在BFC元素内,块级元素本来就是在垂直方向一个接一个放置的,BFC的这个特性就很奇怪,但是网上资料都没有对这个特性有什么说明,当初还钻了很长时间的牛角尖,后面才注意到BFC创建条件中的其中一条是,html本身就拥有BFC特性。所以没有在创建的BFC元素内,块级元素也会在垂直方向一个接一个放置的,块级元素垂直方向的外边距也会重叠。
明明很早就看到html有BFC的特性,但是一直没当回事

BFC是一个独立的容器,容器内外不会互相影响

    <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
    <div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>


红底盒子被一个正常div包裹着,但是还是和蓝框盒子发生了边距合并

<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
<div style="overflow: hidden">
<div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
</div>


在红底盒子的父元素拥有了BFC特性后,两个盒子的边距就没有合并了,因为BFC容器内外不会互相影响

关于外边距合并:CSS外边距合并(塌陷/margin越界)关于margin外边距合并场景和规则

常用创建BFC的方法

  1. 根元素(HTML)
  2. float 除了none以外的值
  3. overflow 除了visible 以外的值(hidden,auto,scroll )
  4. display (table-cell,table-caption,inline-block, flex, inline-flex)
  5. position值为(absolute,fixed)

很多时候我们在处理浮动元素时,都会给元素添加clear: both的css属性,但是如果了解BFC后,就会知道其实很多时候没必要去加clear: both
相关资料块格式化上下文

{{topic.upvote_count || 0}}

浏览器渲染原理

渲染流程
渲染流程

浏览器在服务器获取到html文档后,自上而下进行解析,在脚本文件不包含defer和async属性时,会按照以下方式执行文档内容
1. 解析html标签,生成DOM树
2. 解析css标签,生成CSSOM树
3. 把DOM树和CSSOM树组合成渲染树
4. 通过渲染树进行布局,计算每个节点的几何结构
5. 绘制元素的颜色、阴影
6. 将不同层次的元素合成,展示在页面上

相关资料网页渲染

CSS动画

transition

在元素的css属性发生改变时,transition可以以动画的方式将元素改变前的值过渡到改变后的值

transition: width 2s linear, height 2s ease, background-color 2s ease-in, transform 2s linear;

相关属性

transition-property:指定需要过渡的css属性名称,多个名称用逗号隔开

transition-duration:设置过渡动画的完成时间

transition-timing-function:指定transition效果的转速曲线,默认值为ease

linear  规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease    规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out    规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay:定义transition效果等待多长时间后开始执行,非必填

监听transitions

el.addEventListener("transitionstart", func1, true);
el.addEventListener("transitionrun", func2, true);
el.addEventListener("transitionend", func3, true);

相关资料CSS 动画之——transition

animation

animation可以通过指定动画开始、结束以及中间点样式的关键帧来实现动画效果

.test {
    animation: skyset 5s linear 2s infinite alternate;
}
@keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

相关属性

animation-name: 设置 @keyframes 动画的名称。

animation-duration:设置动画完成一个周期的时间,单位为s或ms,默认是0。

animation-timing-function:设置动画执行的速度曲线,默认是ease

animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

animation-delay:定义animation效果等待多长时间后开始执行,非必填

animation-iteration-count:设置动画被播放的次数。默认是 1。

animation-direction:设置动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state:设置动画是否正在运行或暂停。默认是 "running"。

监听animation

e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

相关资料animation关于stepcss3动画实践

BFC

官方解释是:块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。

BFC特性

计算BFC元素高度时,子元素的浮动元素也参与计算

    <div style="border:1px solid green;width:250px;">
        <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;float: left;"></div>
    </div>


浮动元素因为脱离了文档流,会导致父元素高度坍塌,看起来会在父元素外部

<div style="overflow:hidden;border:1px solid green;width:250px;">
<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"> </div>
<div style="border:1px solid red;width:100px;height:100px;margin:10px;float: left;"></div>
</div>


但是在BFC元素中浮动元素就会被父元素包裹住

BFC元素不会和浮动元素重叠

    <div style="overflow:hidden;border:1px solid green;width:250px;">
            <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;float: left;"></div>
            <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>


这里蓝边框的浮动盒子和红底盒子重叠,会影响页面的排版

<div style="overflow:hidden;border:1px solid green;width:250px;">
<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;float: left;"></div>
<div style="overflow:hidden;border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"> </div>
</div>


在红底盒子创建了BFC后,两个盒子就不再重叠

BFC内的块级元素垂直方向的外边距会发生重叠

    <div style="overflow:hidden;border:1px solid green;width:250px;">
        <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>



可以看到两个盒子都有10px的外边距,正常情况下两个盒子中间应该会有20px,但是在BFC内块级元素垂直方向的外边距会发生重叠,所以两个盒子之间的间隔只有10px,如果两个盒子本身设置的边距不一样大,两个盒子之间的距离取较大的那个边距
而且你会发现在没有BFC元素包裹下,两个块级元素一样会有外边距合并的情况

在网上查BFC资料的时候很多地方都提到BFC的一个特性:BFC内部的块级盒子会在垂直方向,一个接一个地放置,刚看到的时候我就很纳闷,因为即使没有在BFC元素内,块级元素本来就是在垂直方向一个接一个放置的,BFC的这个特性就很奇怪,但是网上资料都没有对这个特性有什么说明,当初还钻了很长时间的牛角尖,后面才注意到BFC创建条件中的其中一条是,html本身就拥有BFC特性。所以没有在创建的BFC元素内,块级元素也会在垂直方向一个接一个放置的,块级元素垂直方向的外边距也会重叠。
明明很早就看到html有BFC的特性,但是一直没当回事

BFC是一个独立的容器,容器内外不会互相影响

    <div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
    <div>
        <div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
    </div>


红底盒子被一个正常div包裹着,但是还是和蓝框盒子发生了边距合并

<div style="border:1px solid cyan;width:200px;height:100px;margin:10px;"></div>
<div style="overflow: hidden">
<div style="border:1px solid red;width:100px;height:100px;margin:10px;background-color: red"></div>
</div>


在红底盒子的父元素拥有了BFC特性后,两个盒子的边距就没有合并了,因为BFC容器内外不会互相影响

关于外边距合并:CSS外边距合并(塌陷/margin越界)关于margin外边距合并场景和规则

常用创建BFC的方法

  1. 根元素(HTML)
  2. float 除了none以外的值
  3. overflow 除了visible 以外的值(hidden,auto,scroll )
  4. display (table-cell,table-caption,inline-block, flex, inline-flex)
  5. position值为(absolute,fixed)

很多时候我们在处理浮动元素时,都会给元素添加clear: both的css属性,但是如果了解BFC后,就会知道其实很多时候没必要去加clear: both
相关资料块格式化上下文

38
回复 编辑