CSS相关 | 面试高频问题(一) | 定位/清除浮动/a标签/盒模型/浏览器兼容/画0.5px线...

本文链接：https://blog.csdn.net/qq_43248263/article/details/122039722

1. position定位

写出css中position的属性以及含义

答：position属性有五个：static、fixed、absolute、relative、sticky。

static：默认属性，没有定位，遵循正常文档流。不受bottom、left、right、top影响。
fixed：元素相对于浏览器窗口是固定位置，与文档流无关，不占空间。和其它元素重叠。
absolute：相对于最近的已定位的父元素是不变的，若没有已定位的父元素，则相对于html。与文档流无关，不占空间。
relative：相对其正常定位的（static），移动位置所占空间不会改变。常用来当作absolute定位的元素的 “容器” (子绝父相）。
sticky：粘性定位，即固定位置，雷打不动。必须和至少一个bottom、left、right、top属性一起用。
关于z-index：与文档流无关，表示重叠元素的堆叠顺序。如果没有指定，则最后的元素显示在最上面。

2. 清除浮动

方法一：在需要浮动的元素后加一个带clear属性的空元素。

.clear{
   clear:both;
 }
<div class="clear"></div>

优点：简单，代码少；缺点：要添加很多无语义的html代码。

方法二：给浮动元素的容器添加overflow：hidden/auto；属性。
（小模块常用）（本身是浮动元素，内部自动清理浮动）

（在IE6还需触发hasLayout ，为父元素设置容器宽高zoom：1；）

方法三：使用邻接元素，，给浮动元素后面的元素添加clear：both；属性
（正文常用）

方法四：使用CSS的:after伪元素，给浮动元素的容器添加：after
（网页布局常用）

（在IE6还需触发hasLayout ，为父元素设置容器宽高zoom：1；）

.clearfix:after{
..
..
visibility:hidden;
}
.clear-fix{
/*触发hasLayout*/
zoom:1;
}

浮动溢出现象：
非IE浏览器，容器高度设置为auto，容器内有浮动元素，这个时候，容器的高度不能自动伸长适应内容，使内容溢出到容器以外的现象。

3. a标签的css伪类，优先级顺序

记忆：love hate - l v h a
a:link - a:visited - a:hover - a:active

4. 盒子水平居中垂直方案

共五种。
看我的另一篇文章吧~
例：若不知道父元素的宽高，怎么设置子元素水平居中？（手写css样式）
1.flex，父元素flex布局

<style>
.father{
   display:flex;
   justify-content:center;
   align-items:center;
}
</style>

2.css新特性，盒子的

<style>
.box{
   ...
   ...
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}
</style>

3.js方法：获取当前屏幕宽高，当前盒子宽高，再计算

let html=document.documentElement;
let wHeight=html.clientHeight,
    wWidth=html.clientWidth,
    bHeight=box.offsetHeight,
    bWidth=box.offsetWidth;

box.style.position='absolute';
box.style.width=(wWidth-bWidth)/2+'px';
box.style.height=(wHeight-bHeight)/2+'px';

5. 盒模型

问：讲一讲盒模型有哪些？区别是什么？各个浏览器的兼容性如何？怎么解决兼容性问题？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

分类：标准盒子模型（W3C)、怪异盒子模型（IE6）
1.标准盒子模型（W3C）：
元素width=content，
盒子宽度=width+padding+border+margin
2.怪异盒子模型（IE6）：
元素width=左右border+左右padding+content
盒子宽度=width+margin

加上doctype声明，让浏览器使用标准模式

6.浏览器兼容问题

参考文章

7.画一条0.5px的线

本来最小的像素是1px，画不了1px。

方法一：meta viewport 将页面初始缩放值设置为0.5
viewport只针对于移动端

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

在这里插入图片描述

方法二：采用transform: scale()的方式

transform: scaleY(0.5); /*y方向上缩小*/
transform-origin:50% 100%;/*必须要这个，不然会虚化*/

transform-origin: x-axis y-axis;属性值的所代表的偏移位置，可以很灵活得使元素按照某一基准点进行旋转。
是以左上角为原点偏移的，举个栗子： transform-origin: 100% 50%；

更多transform-origin属性参考