【2021面试题】css篇

1、伪类和伪元素的区别

主要在于有没有创建一个文档树之外的元素

• 伪类：用于选择DOM树之外的信息，包含那些匹配指定状态的元素 ，比如 :visited，:active等。
  或者是不能用简单选择器进行表示的信息 ，包含那些满足一定逻辑条件的DOM树中的元素，比如 :first-child，:first-of-type，:target等。
• 伪元素：为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如 ::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容

2、如何清除浮动

• 在最后一个浮动子元素新添加最后一个冗余元素，然后将其设置clear:both （缺点：产生大量冗余元素）
• 伪元素清除浮动，:after 伪元素和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout

/*开启haslayout*/
.clearfix {
    *zoom: 1;
}
/*ie6 7 不支持伪元素*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
   	height:0;
   	line-height:0;
   	visibility:hidden; // 允许浏览器渲染它，但是不显示出来
}

• 给父元素添加overflow:hidden（让父容器形成一个BFC）

3、水平垂直居中

• 当子元素已知宽度：
  父元素设置为：position: relative;
  子元素设置为：position: absolute; 距离上部50%，距离左边50%。然后利用margin，margin的上部和左部各自距离宽度的一半
• 未知宽度：
  父元素设置为：position: relative;
  子元素设置为：position: absolute; 距离上部50%，距离左边50%。然后利用transform中的translate(-50%, -50%)
• flex布局：
  父元素设置为：display: flex；justify-content: center；align-items: center；

4、盒模型

• 标准盒模型 box-sizing:contnet-box;
• 怪异盒模型 box-sizing:border-box;
  当不对doctype进行定义时，会触发怪异模式
  在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
  在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
  
• flex

5、布局（圣杯、双飞翼、两栏）

• 圣杯布局
  两边固定 当中自适应
  思路：
  给整个父盒子加margin: 0 200px;
  中间左右都设置float：left;
  左右设置宽高，中间设置宽度100%
  left: margin-left:-100%; position:relative;left:-200px
  right:margin-right: -200px;
  给body设置最小的宽度防止布局变形

<div class="header">头部</div>
<div class="container">
    <div class="center">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<div class="footer">尾部</div>

body {
    min-width: 550px;
}
.container {
    padding-left: 200px; 
    padding-right: 150px;
}
.container>div{
    float: left;
}
.center {
    width: 100%;
    background: yellow;
}
.left {
    width: 200px;
    margin-left: -100%;
    position: relative;
    left: -200px;
    background: blue;
}
.right {
    width: 150px;
    margin-right: -150px;
    background: red;
}
.footer{
    clear: both;
}

• 双飞翼布局
  思路：
  容器左右都设置float：left;
  容器宽为100%；padding: 0 200px;
  center宽100%，
  剩余的与圣杯一致

// 基本html布局，center使用一个div包起来
<div class='container'>
    <div class='center'></div>
</div>
<div class='left'></div>
<div class='right'></div>

还有其他方法么？

• 使用calc()
  思路：
  全部浮动，中间部分center给个计算好的固定宽

<div id="header">头部</div>
<div id="center" class="column">中间</div>
<div id="left" class="column">左边</div>
<div id="right" class="column">右边</div>
<div id="footer">尾部</div>

.column {
    float: left;
}
#center {
    background: red;
    margin-left: 200px;
    margin-right: 150px;
    width: calc(100% - 350px);
}
#left {
    background: blue;
    width: 200px;
    margin-left: -100%;
}
#right {
    background: yellow;
    width: 200px;
    margin-left: -200px;
}
#footer {
    clear:both;
}

• 利用borde-box
  思路：
  box-sizing支持到IE8
  利用怪异盒模型，将center的宽度变成整个盒子的宽度，然后用padding-right,padding-left预留出空间即可，不过需要注意的是，由于padding是盒子的一部分，所以padding部分会具有中间栏的背景色，当中间栏高于侧栏时，侧边栏会带着中间栏的颜色

#center {
    box-sizing: border-box;
    width: 100%;
    background: red;
    padding-right: 150px;
    padding-left: 200px;
}

• flex
  思路：
  利用flex的属性设置左右的固定宽度，让left的order比其他的小，即可在前面

<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>
#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

6、不用fixed实现顶部或底部固定

利用flex，因为用fixed会脱离文档流，在移动端尤其是ios端容易产生问题

<div class="box">
    <div class="header">header</div>
    <div class="main">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="footer">footer</div>
</div>

.box{
    display: flex;  
    flex-direction: column;   //让子元素纵向排列
}
 .main{
    height: 0px; //必须设置高度，否则flex-grow无效
    flex-grow: 1;  //设置为1 -> 当父元素有剩余空间是将拉伸当前元素
    overflow-y: scroll;
}

7、文字水平垂直居中

• 单行文本垂直居中： 利用text-align:center;line-height等于盒子高度
• 多行文本垂直居中：
  父级元素高度不固定：设置内边距的上下padding和text-align
  父级元素高度固定：设置父级div的display属性：display: table，然后再添加一个div包含文本内容，设置其display:table-cell和vertical-align:middle

8、四种定位的区别

• static 是默认值
• relative 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中
• absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
• fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙

9、网页布局有哪几种，有什么区别

• 静态： 网页上的所有元素的尺寸都使用px作为单位，无论浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示
• 流式： 页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变，如栅栏系统（网格系统），屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
• 响应式： 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。媒体查询+流式布局
• 弹性： 轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变