移动web面试题总结

程序媛-常与乐

已于 2022-09-28 10:15:32 修改

阅读量273

点赞数

分类专栏：面试题文章标签：前端 css css3

于 2022-07-24 16:30:44 首次发布

本文链接：https://blog.csdn.net/m0_46515475/article/details/125960798

版权

面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3.元素实现水平垂直居中
5.nth-child 和 nth-of-type 的区别 (看代码)
6.px、em、rem的区别
8.CSS实现三角
9.伪元素注意事项
11.如何使用动画
13.display：none 和 visibility：hidden的区别
14.如何实现圆角
15.清除浮动的方法
16.定位脱不脱标
18.less是什么
19.css3盒模型
23.span添加margin-top：20px可以生效吗
24.如何更改背景图片的大小
25.如何定义媒体查询
27.CSS优先级顺序问题
28.flexible.js如何划分 10份
31.行内块元素中间的小缝隙是如何造成的如何解决？
32.CSS可以继承的属性有哪些。 width和height属性可以继承吗不可以
34.line-height:1.5; （代码）
35.CSS引入方式
37.布局技巧–子元素的宽度可以大于父元素的宽度吗
42.单选按钮如何默认被选中 checked
43.在移动端你是如何适配的
45.实现左侧固定右侧自适应的布局 flex：1
48.align-content（行对齐）、align-items（侧轴对齐方式）和 align-self（单独设置一个盒子的侧轴对齐）的作用分别是？
49.flex布局中，改变主轴方向为colum以后，如何设置水平方向上的居中 align-items
50、BFC 块级格式化上下文解决清楚浮动和外边距塌陷问题浮动行内快元素 overflow 不是visible的其他属性

// nth-child和nth-of-type区别
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        
        .box div:nth-child(6) {
            background-color: green;
        }
        .box div:nth-of-type(6) {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>我是div元素1</div>
        <div>我是div元素2</div>
        <div>我是div元素3</div>
        <div>我是div元素4</div>
        <div>我是div元素5</div>
        <p>我是p元素1</p>
        <p>我是p元素2</p>
        <div>我是div元素6</div>
        <div>我是div元素7</div>
        <div>我是div元素8</div>
        <div>我是div元素9</div>
    </div>
</body>
</html>

// line-height考察
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
            font: 20px/2 "微软雅黑";            
        }
    </style>
</head>

<body>
    <div>
        测试代码
    </div>
</body>

</html>