css面试题

头像
Hole
     上海
    阅读 5 分钟

    盒模型

    常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。
    标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
    低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

    css3 新特性

    常问：

    1. word-wrap 文字换行
    2. text-overflow 超过指定容器的边界时如何显示
    3. text-decoration 文字渲染
    4. text-shadow文字阴影
    5. gradient渐变效果
    6. transition过渡效果 transition-duration：过渡的持续时间
    7. transform拉伸，压缩，旋转，偏移等变换
    8. animation动画
    9. audio音频
    10. vadio视频
    11. RGBA和透明度

    css3 边框

    border-radius 圆角
    box-shadow 盒子阴影
    border-image 边框图片

    css3 背景

    background-image 背景图片
    background-size 背景大小
    background-origin 背景图像的位置区域
    background-clip 背景剪裁属性是从指定位置开始绘制

    css选择器及优先级

    !important
    内联样式
    ID选择器
    类选择器 属性选择器 伪类选择器
    元素选择器 关系选择器 伪元素选择器
    通配选择器
    1，class选择符：10，id选择符：100，内联样式权值最大，为1000

    1. !important声明的样式优先级最高，如果冲突再进行计算。
    2. 如果优先级相同，则选择最后出现的样式。

    3. 继承得到的样式的优先级最低。

      CSS选择器有哪些？哪些属性可以继承？

    • id选择器(#myid)、
    • 类选择器(.myclassname)、
    • 标签选择器(div, h1, p)、
    • 相邻选择器(h1 + p)
    • 子选择器（ul > li）、
    • 后代选择器（li a）、
    • 通配符选择器（*）、
    • 属性选择器（a[rel=”external”]）、
    • 伪类选择器（a:hover, li:nth-child）

    可继承的属性：

    font-size,
    font-family,
    color

    不可继承的样式：

    border,
    padding,
    margin,
    width,
    height

    BFC

    BFC是块级格式化上下文。

    • 计算BFC高度时，浮动元素也会参与计算、
    • 在BFC这个元素垂直方向的边距会发生重叠
    • BFC的区域不会与浮动元素的box重叠
    • BFC在页面上是一个独立的容器，其里外的元素不会互相影响
      BFC应用:
      防止margin重叠
      清除内部浮动
      自适应两栏布局
      防止字体环绕

    BFC的生成条件：

    根元素
    float值不为none
    overflow的值不为visible
    display的值为inline-block,table-cell,table-caption
    position的值为absolute，fixed

    弹性盒

    display:flex;
align-items:center;
justify-conter:center;

    图片整合技术的优势

    1. 减少对服务器的请求次数

    2. 减少图片体积，提高加载速度

      元素垂直水平居中

      不需要知道宽和高

    position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

    需要知道宽和高

    position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

    元素水平居中

    margin:0 auto;

    css定位方式

    position：static;//默认定位
position：relative;//相对定位 （参照物是自身,不脱离文档流）
position:absolute;//绝对定位 （参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素<html>进行定位。）
position:fixed;//固定定位 （参照物是可视区窗口，脱离文档流）相对于浏览器窗口进行定位。
position:sticky;//

    display：none和visibility：hidden区别？

    display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生重排和重绘
    visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生重绘，但不可触发绑定事件

    rem和em的区别

    总而言之，就是浏览器把谁转化成“px”
    rem 依据的是html的font-size值。1rem=16px
    em 依据的是父元素的font-size值。

    清除浮动

    方法一:clear:both

    clear:both;

    方法二:万能清除浮动

        .clean{
        content:'.';
        height:0;
        display:block;
        clear:both;
        overflow:hiddden;
        visibility:hidden;
    }

    display 有哪些值？说明他们的作用?

    inline默认。此元素会被显示为内联元素，元素前后没有换行符。

    block此元素将显示为块级元素，此元素前后会带有换行符。

    none此元素不会被显示（隐藏）。

    inline-block行内块元素。（CSS2.1 新增的值）

    list-item此元素会作为列表显示。

    table此元素会作为块级表格来显示（类似table），表格前后带有换行符

    为什么要初始化 CSS 样式

    因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

    浏览器内核

    • Trident IE浏览器
    • Gecko Firefox浏览器
    • Webkit Chrome Safari
    • Blink Chrome Opera

    移动端1像素问题

    一般来说，在pc端浏览器中，设备像素比dpr等于1,1个css像素就等于1个物理像素；但是在retina屏幕中，dpr普遍是2或者3 ，1个css像素不在等于一个物理像素，因此在实际设计稿中粗不少。

    1. 伪元素+scale
    .box{
    width:100%;
    height:1px;
    margin:20px 0;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    transform-origin:0 0;
    background:red;
}

<div class="box"><div>
    1. border-image
    div{
    border-width:1px 0px;
    -webkit-border-image:url(xxx.png) 2 0 stretch;
    border-image:url(xxx.png) 2 0 stretch;
}

    做移动端开发有没有遇到不兼容的问题?如何解决？(https://yq.aliyun.com/articles/587092)

    1.使用背景图来代替img标签

       background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px

    1. 防止手机中网页放大和缩小
      设置meta标签中的viewport;

       <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    2. 浮动子元素撑开父元素盒子高度

      解决方法如下：

      1.父元素设置为 overflow: hidden;

      2.父元素设置为 display: inline-block;等

      如何解决移动端滚动条卡顿问题？

      安卓或者ios
      -webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立即停止 */
      -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 ，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

    link 与 @import 的区别

    a.从属关系区别
    @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
    b.加载顺序区别
    加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
    c.兼容性区别
    @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
    d.DOM可控性区别
    可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

    常见的布局方式

    1. 圣杯布局

      body{
min-width: 550px;
}
#container{
padding-left: 200px;
padding-right: 150px;
}
#container .column{
float: left;
}
#center{
width: 100%;
}
#left{
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right{
width: 150px;
margin-right: -150px;
}
    <div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

    在这里插入图片描述

    1. 双飞翼布局
    body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}
    <div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
    javascriptsassless
    Hole
    36 声望5 粉丝
    « 上一篇
    TypeScript
    下一篇 »
    js笔试题

    引用和评论

    推荐阅读
    头像
    Html面试题

    Hole阅读 567

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新