css学习面试

最新推荐文章于 2023-04-11 16:40:31 发布

微笑的眼泪2021

最新推荐文章于 2023-04-11 16:40:31 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/ageltt/article/details/116139183

版权

css

定位：

定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）

相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位
* 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
* 2.相对定位是相对于元素在文档流中原来的位置进行定位
* 3.相对定位的元素不会脱离文档流
* 4.相对定位会使元素提升一个层级
* 5.相对定位不会改变元素的性质，块还是块，内联还是内联

绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，
* 内联元素变成块元素，
* 块元素的宽度和高度默认都被内容撑开

固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位

sticky 粘性定位：

1、必须设置一个偏移值：top bottom left right；

2、父元素高度不能低于sticky元素的高度

3、父元素不能有 overflow:hidden 或者 overflow:auto 属性

4、粘性定位只在父元素里生效

相当于在 relative 定位和 fixed 定位之间切换。行为就像 relative 定位，但是当页面滚动时，它的表现为 fixed定位，

不脱离文档流，但是在父元素中相对于浏览器窗口定位，不会超过父元素，最多到父元素底。如果父元素被滚条滚没了，则 sticky 元素会跟着父元素一起消失

Z-index

可以设置元素的叠加顺序，但依赖定位属性，仅能在定位（ position:relative /absolute /fixed /sticky ）元素上奏效。

如果两个定位元素重叠(比如都是 absolute 定位)，没有指定z - index，按照html中元素的顺序，前面的被盖住，后面的叠在上面。

1、auto 默认。堆叠顺序与父元素相等。
2、number 设置元素的堆叠顺序。负数为最下层依次叠加，为负值，元素被普通流中的元素覆盖
3、inherit 规定应该从父元素继承 z-index 属性的值。

隐藏元素

css隐藏元素的六种方法

用css隐藏页面元素有许多种方法：
display:none (通过隐藏盒子属性，脱标)
visibility:hidden (通过隐藏盒子属性，不脱标)
opacity:0 (t) (通过改变元素的透明度，不脱标)
position:absolute (通过定位将元素定到远离页面的位置，脱标)
cli-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px) (通过裁剪盒子，不脱标)
position:absolute;与clip:rect(0px 0px 0px 0px)配合 (通过裁剪绝对定位的盒子，脱标)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏元素的方式</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: pink;
            line-height: 200px;
        }
        .hidd{
            position: absolute;
            top:-10000px;
            left: -10000px;
        }
        .clip{
            clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
        }
        .poclip{
            position: absolute;
            clip:rect(0px,0px,0px,0px);
        }
    </style>
</head>
<body>
<button οnclick="change1()">display隐藏</button>
<button οnclick="change2()">visibility隐藏</button>
<button οnclick="change3()">opacity隐藏</button>
<button οnclick="change4()">position隐藏</button>
<button οnclick="change5()">cli-path隐藏</button>
<button οnclick="change6()">clip隐藏</button>
<div class="box  ">
    <span>https://blog.csdn.net/muzidigbig/</span>
</div>
<p>我对你开过的玩里面，藏着我想对你说不出的秘密。</p>

</body>

<script >
    function change1() {
        var box = document.getElementsByClassName('box')[0];
        //隐藏之后不占据原来的位置(脱标)
        box.style.display = 'none';
    }
    function change2() {
        var box = document.getElementsByClassName('box')[0];
        //隐藏之后还占据原来的位置(不脱标)
        box.style.visibility = 'hidden';
    }
    function change3() {
        var box = document.getElementsByClassName('box')[0];
        //通过改变透明度来隐藏(不脱标)
        box.style.opacity = '0';
    }
    function change4() {
        var box = document.getElementsByClassName('box')[0];
        //定位(脱标)
        box.className += 'hidd'
    }
    function change5() {
        var box = document.getElementsByClassName('box')[0];
        //通过裁剪元素(不脱标)
        box.className += 'clip'
    }
    function change6() {
        var box = document.getElementsByClassName('box')[0];
        //通过裁剪与定位(脱标)
        box.className += 'poclip'
    }
</script>
</html>

display:none 和visibility:hidden的区别

彻底消失
display:none

将会隐藏它以及所有的后代元素
占据的空间消失，浏览器不会解析该元素
页面产生回流+重绘

视觉消失
visibility:hidden

可以理解为透明度为0
占据的空间仍存在，浏览器仍然会解析该元素
页面产生重绘
visibility具有继承性，父元素设置visibility:hidden，子元素也会继承该属性，当子元素重新设置visibility:visible，元素又会重新显示，而display:none不会

解析页面的呈现流程&回流&重绘

页面的呈现流程

浏览器将读取的所有html代码解析，生成一个Dom树 ->dom tree
浏览器将所有样式解析成样式结构体 ->style rules
Dom数和样式结构体结合生成构建呈现树 render tree ->attachment
浏览器根据render tree 绘制页面
在解析样式结构体的过程中浏览器会去除不能识别的样式（IE去掉-moz开头的样式，firefox去除_开头的样式)
render tree与dom tree区别很大，render tree能够识别样式，且不会包含隐藏的节点(display:none)，visibility:hidden仍会包含在render tree内。在render tree中，每一个节点被称为box

回流&重绘

回流：render tree中部分（全部）元素的规模尺寸布局等改变而需要重新构建页面。
重绘：render tree中一些元素需要更新属性，但这些属性只影响元素的外观、风格而不引起布局的改变
在解析样式结构体的过程中浏览器会去除不能识别的样式；
回流必将引起重绘，重绘不一定引起回流。

页面的呈现流程

基本过程

1．解析HTML文件，创建DOM树

2．解析CSS,形成CSS对象模型

3．将CSS与DOM合并，构建渲染树（renderingtree）

4．布局和绘制

对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。
最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。
当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重复执行，因为网页的内在结构已经发生了改变。

Repaint(重绘)

重绘是改变不影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器会根据元素的新属性重新绘制一次(这就是重绘，或者说重新构造样式)，使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。

Reflow（重排）

渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。

当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。这些改变通常由以下事件触发：

 DOM操作（元素添加、删除、修改或者元素顺序的改变）；

内容变化，包括表单域内的文本改变；

 CSS属性的计算或改变；

添加或删除样式表；

更改“类”的属性；

浏览器窗口的操作（缩放，滚动）；

伪类激活（悬停）。

“重绘"不一定需要"重排”，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。

但是，“重排"必然导致"重绘”，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

浏览器如何优化渲染？

（1）将多次改变样式属性的操作合并成一次操作

（2）将需要多次重排的元素，position属性设为absolute或fixed，

这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

（3）由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。

如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

看这个的时候又想到display:none、visibility:hidden和overflow:hidden的区别，顺便带一下。

display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能

display:none:

隐藏元素，不占网页中的任何空间，让这个元素彻底消失（看不见也摸不着）,由于会影响到网页的空间，所以会引起一次重排和重绘。

visibility:hidden:

他是把那个层隐藏了，也就是你看不到它的内容但是它内容所占据的空间还是存在的。（看不见但摸得到），该操作不会对页面有影响，所以只会引起一次重绘。

overflow:hidden:

让超出的元素隐藏（不占据网页空间），就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉，会引起一次重排和重绘。

微笑的眼泪2021

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css学习面试

css相对定位当元素的position属性设置为relative时，则开启了元素的相对定位* 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化* 2.相对定位是相对于元素在文档流中原来的位置进行定位* 3.相对定位的元素不会脱离文档流* 4.相对定位会使元素提升一个层级* 5.相对定位不会改变元素的性质，块还是块，内联还是内联绝对定位当position属性值设置为absolute时，则开启了元素的绝对定位绝对定位： 1.开启绝对
复制链接

扫一扫