css考题（1）

于2023-08-25 11:30:54发布

132

1. 页面导入样式，使用link和@import的区别是什么？

1. 加载顺序的区别，浏览器会先加载link，后加载@import
2. 兼容性的区别，link的兼容性比@import好

2. 介绍一下css的盒子模型

css的盒子模型有：
标准盒模型、ie盒模型

css的盒子模型区别：
标准盒模型：content、padding、border、margin组成
ie盒模型：content（content + padding + border）、margin组成

通过css如何转换盒子模型：
box-sizing：content-box； // 标准盒模型
box-sizing：border-box； // ie盒模型

3. line-height和height区别是什么？

line-height是每一行文字的高，如果文字换行则整个盒子的高度会增大（行数*行高）
height是一个死值，就是这个盒子的高度

4. css的选择符有哪些？哪些属性可以继承？哪些不可以继承？

css选择符：
id选择器（#）
类选择器（.）
标签选择器（div、p、h1...）
通配（*）

css可以被继承的属性：
font-size、color、line-height...

css不可以被继承的属性：
widht、height、margin、padding...

5. css样式优先级

!important > 内联样式 > id > class > 标签 > 通配

6. 用css画一个三角形

width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;

7. 什么是BFC？它有什么作用？

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            background: blueviolet;
        }
        .p1 {
            background: red;
        }
        .p2 {
            background: green;
        }
        .p3 {
            background: yellow;
        }
        p {
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1">1</p>
        <p class="p2">2</p>
        <p class="p3">3</p>
    </div>
</body>
</html>

运行结果

div明明是块级元素，但是因为子元素脱离了文档流，导致div没有了宽高。这就是子元素影响到了父元素的例子了，要解决这个问题，只要给父元素开启BFC即可，如：

div {
    background: blueviolet;
    overflow: hidden; // 加了这个，会开启BFC
}

再次运行

8. position有哪些值？分别是根据什么定位？

static ：默认值，没有定位
fixed ：固定定位，相对于浏览器窗口进行定位
relative ：相对于自身定位，不脱离文档流
absolute 相对于第一个有relative的父元素，脱离文档流：

9. 什么是CSS reset？

是一个css文件，用来重置css样式的

10. display：none与visibility：hidden区别

1. 占用位置的区别
display：none            不占用位置
visibility：hidden       虽然隐藏了，但是占用位置

2. 重绘和重排的区别
display：none           产生重绘和重排
visibility：hidden      产生重绘

11. opacity和rgba的区别

opacity会影响到子元素，而rgba则不会。（如果一个父元素设置了opacity为0.5，则子元素的opacity会跟随父元素，并且子元素即使把opacity设置为1也没用）

12. vw和vh的尺寸单位的含义？

和百分比几乎一样，只不过它是相对于窗口的

13. em和rem的区别

em针对于父元素的font-size
rem针对于html元素的font-size

14. 如何解决移动端1px的问题？

直接写0.5px

15. 如何让浏览器支持12px以下的字体？

用css3的缩放

16. 移动端元素被触摸时产生的半透明灰色遮罩怎么去掉

-webkit-tap-highlight-color: transparent;

17. 修改placeholder的颜色

input::-webkit-input-placeholder {
    color: #ccc;
}
input::-moz-input-placeholder {
    color: #ccc;
}
input::-ms-input-placeholder {
    color: #ccc;
}

18. 禁止触发系统菜单和长按选中

1. 禁止触发系统菜单
touch-callout：none

2. 禁止长按选中
user-select：none

19. rem是怎么适配项目的？

公式：屏幕宽 / 设计稿宽 * 100

function set(){
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    document.documentElement.style.fontSize = (w/750*100)+"px"; // 750是设计稿的宽、乘以100是为了方便计算
}
window.onresize = set;
window.onload = function(){set();}
set();

20. 响应式

1. 语法结构
@media only screen and (max-width: 1000px) { // 当屏幕小于1000px的时候，执行该css
    div {
        font-size: 9px;
    }
}

only : 可以排除不支持媒体查询的浏览器
screen ：设备类型
and：？

2. 响应式图片
<picture>
    <sorce srcset="1.jpg" media="(min-width:1000px)"> // 屏幕大于1000px的时候显示这张图片
    <sorce srcset="2.jpg" media="(min-width:700px)"> // 屏幕大于700px的时候显示这张图片
    <img srcset="3.jpg">
</picture>

21. 什么是语义化标签

1. 易读性和维护性更好；
2. seo会更好，搜索引擎抓取更好；

22. 如何关闭IOS键盘首字母自动大写

<input type="text" autocapitalize='off'>