css面试题

fake_smiler
302 阅读11分钟

Html

1、h5新增标签

结构标签

（1）section：标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

（2）article：特殊独立区块，标签定义独立的内容；

（3）aside：标签内容之外与标签内容相关的辅助信息；

（4）header：某个区块的头部信息/标题；

（6）footer：底部信息；

（7）nav：导航条部分信息；

（8）figure：独立的单元，例如某个有图片与内容的新闻块；

表单标签

（1）email：必须输入邮件；

（2）url：必须输入url地址；

（3）number：必须输入数值；

（4）range：必须输入一定范围内的数值；

（5）Date Pickers：日期选择器；

（6）search：搜索常规的文本域；

（7）color：颜色；

媒体标签

（1）video：视频

（2）audio：音频

（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

出处：www.jianshu.com/p/92b56b0c6…

2、标签语义化

语义化标签的主要是为了解决以下问题：

  • 前端代码可读性

  • 代码维护成本

  • SEO优化

3、localStorage ,sessionStorage ,Cookie 异同？

特性CookielocalStoragesessionStorage
数据的生命周期一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小4K左右一般为5MB
与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信

4、简单描述 DOCTYPE 的作用？

写在html第一行，申明文档类型，指示浏览器解析文档方式。

css

1、浏览器盒子模型

  • W3C定义 盒子总宽高 = content + padding + border + margin

    css定义的宽度 width = content的宽度

  • ie 盒子(怪异盒模型)下 css定义的宽度 = content宽度 + padding + border

2、BFC

  • （1）什么是BFC？

    BFC，块级格式化上下文，简单来说就是一个元素的渲染规则。

  • （2）BFC的触发条件

    1.float的值不为none

    2.overflow的值不为visible

    3.display的值为table-cell、tabble-caption和inline-block之一

    4.position的值不为static或则releative中的任何一个

  • （3）BFC的布局规则

    1.浮动的元素会被父级计算高度（父级触发了BFC）

    2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

    3.margin不会传递给父级（父级触发了BFC）

    4.两个相邻元素上下margin不会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC)

  • （4）普通文档流的布局规则

    1.浮动的元素是不会被父级计算高度

    2.非浮动元素会覆盖浮动元素的位置

    3.margin会传递给父级

    4.两个相邻元素上下margin会重叠

3、css选择器？选择器优先级？css属性继承？

  • css选择器

    元素选择器(html,body)，类选择器(.class)，ID选择器(#id)，后代选择器(h1 h2)，子元素选择器(h1>h2)，相邻兄弟选择器(h1+h2)，通配符选择器(*)，伪类选择器(a:link,a:hover,a:active,a:visited)，伪元素选择器(h1:first-child)，属性选择器(a[href],input[type=text])。

  • 优先级

    !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

  • 属性继承

    css可继承属性：

　　1.字体系列属性：font-family，font-size

　　2.文本系列属性：text-indent，line-height，color

　　3.元素可见性：visibility

　　4.表格布局属性：border-style

　　5.列表布局属性：list-style list-style-type

　　6.生成内容属性：quotes

　　7.光标属性：cursor

　　8.声音属性：speak

不可继承：

　　1.宽高:height，width

　　2.最小最大宽高：max-height,min-height,max-width,min-width

　　3.dispaly

　　4.文本阴影：text-shadow

　　5.背景属性：background

　　6.浮动属性：float

　　7.生成内容：content

　　8.层级属性：z-index

　　9.定位属性：position，left，right，top，bottom

　　10：盒模型属性：margin,padding,border

4、css3新增属性

　　C3新增选择器：关系选择器，伪类选择器，伪元素选择器，属性选择器。
　　新增阴影属性：text-shadow，box-shadow。
过度属性：transition。
　　边框：border-radius圆角，border-image。
　　动画：transform,animation。
　　背景：background-color，background-image，包括背景图片位置。
　　布局：flex，gird。
　　媒体查询。

5、媒体查询各属性意义

　　width：视口宽度

　　height：视口高度

　　device-width：渲染表面的宽度，就是设备屏幕的宽度

　　device-height：渲染表面的高度，就是设备屏幕的高度

　　orientation：检查设备处于横向还是纵向

　　aspect-ratio：基于视口宽度和高度的宽高比，width/height，如16/9,4/3

　　device-aspect-ratio：渲染表面的宽高比，就是设备屏幕的宽高比

　　color：每种颜色的位数bits，如：min-color：16位、8位

　　resolution：检测屏幕或打印机的分辨率，如：min-resolution：300dpi

　　以上属性都可以添加max-或min-前缀 　　 　　

转载于:www.cnblogs.com/NickyLi/p/6…

6、display有哪些值？

7、display:none和visibility:hidden和opacity:0的区别

特性display:nonevisibility:hiddenopacity:0
空间占据不占据空间，会引起页面回流重绘占据空间,只引起重绘占据空间,只引起重绘
事件绑定不能绑定事件不能绑定事件可绑定事件，能触发
属性继承不可继承，但是子元素也会随着父元素消失可继承，子元素可设置visibility:visible 显示出来可继承，不能通过设置显示出来
过度动画绑定不能绑定过渡不能绑定过渡能过渡

8、flexbox布局使用

9、css实现一个三角形

.box{
    width:0px;
    height:0px;
    border:10px transparent solid;
    border-top/left/botoom/right:10px red solid;//border-top/left/botoom/right
}

10、如何居中一个div（多种方法）

- 水平居中      div{margin:0 auto}
- 水平垂直居中
    -定位:父级设置 position：relative;
        子级 div{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    -flex布局：父级 {
            display: flex;
            justify-content: center;
            align-items: center;
    }

11、css的引入方法有几种？link和@import的区别

  • css引入方式

行内样式表，在元素标签内部属性style内写入样式。

内联样式表，在html中生成style标签，将全部css抽取出来。

外部样式表，将样式写在css文件中，用link引入html

  • link和@import的区别？

区别1：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

区别2：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

区别3：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

区别4：可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

12、px，em，rem的区别

blog.csdn.net/llll789789/…

13、css的性能优化）

  1. 内联首屏关键CSS
  2. 异步加载css
  3. 使用工具清除无用的css
  4. 使用工具压缩css
  5. 有效使用选择器(子代选择器>后代选择器)
  6. 减少使用昂贵属性(box-shadow,box-radius,...)
  7. 减少Dom回流重绘
  8. 雪碧图

14、文本超出显示省略号

  • 单行文本

    overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

  • 多行文本

    overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

15、圣杯布局和双飞翼布局

  • 圣杯布局

    <!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>
        .container {
            height: 500px;
            padding: 0 200px;
        }

        .left {
            background: red;
            width: 200px;
            height: 100%;
            float: left;
            margin-left: -200px;
        }

        .middle {
            background: green;
            height: 100%;
            width: 100%;
            float: left;
        }

        .right {
            background: blue;
            width: 200px;
            height: 100%;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
</html>

  • 双飞翼布局

    <!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>
        .left {
            background: red;
            width: 200px;
            height: 500px;
            float: left;
            position: relative;
            z-index: 2;
        }

        .middle {
            background: green;
            height: 500px;
            width: 100%;
            float: left;
            margin-left: -200px;
        }

        .right {
            background: blue;
            width: 200px;
            height: 500px;
            float: left;
            margin-left: -200px;
        }

        .inslide {
            margin: 0 200px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="middle">
        <div class="inslide">
        </div>
    </div>
    <div class="right"></div>
</body>
</html>

16、height：100%和height：inherit的区别（兼容性问题）

  • 兼容性

    height:100%; ie6√
    height:inherit; ie8√

  • 设置属性position:absolute时;

    height:100%；相对的是父级元素为position：relative的元素，当没有则相对于body； height:inherit；相对的是父级元素；

18、sass和less异同？

  1. 语法不同

    • sass有两种语法，以.scss为后缀名的嵌套写法，以.sass为后缀名的缩进写法

       以.scss为后缀名的嵌套写法，
 .catainer{
 	.content{
 		p{}
 	}
 }
 以.scss为后缀名的嵌套写法，
 .catainer
 	width:100%
 	heght:100%

    • less语法嵌套写法

       .catainer{
 	.content{
		p{}
	}
 }
  2. 变量申明不同
  • sass使用$命名
  • less使用@命名

3.mixin使用不同

  • SCSS 使用 @include 指令来引入一个 Mixin

    @mixin a-style {
    a {
      color:#000;
    }
}
@include a-style;
//编译后
  a {
  	color:#000;
  }

  • less定义一个类，直接当作函数使用

    .a-style {
	color:#000;
}
a{
	.a-style()
}
//编译后
a {
	color:#000;
}

19：清除浮动的方法

  1. 额外标签法，在最后一个浮动元素的后面新增标签，属性为 clear:both

  2. 父级添加 overflow: hidden; 通过触发bfc清除浮动

  3. 给父级添加高度

  4. 使用after伪元素清除浮动（推荐使用）

     .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
 content: "";
 display: block;
 height: 0;
 clear:both;
 visibility: hidden;
 }
 .clearfix{
 *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }

20：如何让一个div消失？

	display:none
    visibility: hidden;
    margin:-100%;
    height:0;//width:0;
    opacity: 0;
    transform: translateX(-100%);
    background-color:transparent;
    ...

21、rgba()和 opacity 的透明效果有什么不同？

  • opactity 作用于元素以及元素内所有内容的透明度
  • rgba 作用于元素及背景色，不会影响子元素的透明度哦

22、相邻行内块出现间距的原因及解决

浏览器解析html，会将html的换行在父元素font-size不为0的情况下转化为一个空白字符。

解决方案：

  1. 父级font-size设为0，子元素单独设置字体
  2. 改变书写方式，去掉换行
  3. 设置父元素，display:table和word-spacing

23、href和src的区别？

  • href超文本引用，不会阻塞页面加载
  • src资源下载，阻塞页面，等到资源加载完成之后页面继续加载

css兼容性问题

1、fiexd在ios软键盘弹起失效问题

相对body使用absolute；bottom:0

2、移动端1px问题，解决方案

使用伪元素生成，并且利用transform: scale(0.5)缩放。直接设置border-width:0.5可能会在部分机型失效。

3、渐进增强和优雅降级

来源：blog.csdn.net/weixin_4285…

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

.transition{//渐进增强
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;  
}
.transition{ //优雅降级
    transition: all .5s;
    -o-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
}

4、ios13.4 与 better-scroll上拉卡顿

在better-scroll初始化时，加上useTransition:false

css架构

1、新项目css架构定义

（1）公共变量（主题色/主要空隙/主要字号字体等）

（2）编译器（scss/less/postcss/stylus）

（3）自适应方案（栅格/rem/vw/pt）

（4）目录约定（mixin/common/theme/module/response）

（5）私有化方案（scoped/css module/css in js）

（6）命名规则（下划线，驼峰，横线）（css 命名规范就是短横线命名）

avatar
文章
阅读
粉丝