前端面试之CSS篇整理

原创 2018年04月15日 15:03:15

盒模型,box-sizing

盒模型组成:content+padding+border+margin ;
在标准盒模型中,css中给元素设置的width和height就是content宽高
在怪异盒模型下:css中给元素设置的width和height=content宽/高+padding+border

box-sizing可以决定盒模型

属性值 盒模型
box-sizing:content W3C
box-sizing: border-box; 怪异

CSS3新特性,伪类,伪元素,锚伪类

  1. 伪类和伪元素的区别:
    两者的区别在于,有没有生成抽象的元素;

  2. 伪类的例子–锚伪类,即a标签的伪类,来表达它的不同的状态,并没有生成什么元素

    a:link 表示未访问的链接

    a:visited 表示已访问的链接

    a:hover 鼠标移动到链接上的情况

    a:active 表示选定的链接

  3. 伪元素的例子:会生成虚拟的元素,并能给这个元素设置内容和样式
    :first-line :first-letter :after :before

css隐藏一个元素的方法

将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域;或者宽高设为0等等很多方法

如何实现水平垂直居中

    1.使用定位
    ```
    .parent{
        position:relative;
    }
    .child{
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        transform: translateX(-50%);
    }

    ```

 2. 使用css3的flex


```
.parent{
    display:flex;
    justify-content:center;
    align-items:center;

}
```

3. 将子元素转为'inline-block',利用父元素可以设置行内元素水品那个居中的'text-align:center'来进行水平居中;在html中再创造出一个与子元素同级的行内元素,利用'vertical-align:center'进行垂直居中

    html:


```
<div class="parent">
        <span></span>
        <div class="child">hello</div>
</div>
```
css

```
.parent{
          width: 300px;
          height: 400px;
          text-align: center;
          border: 1px solid #000;
        }
        .child{
          display: inline-block;
          vertical-align: middle;
        }
        .parent span{
          width: 0;
          height: 100%;
          vertical-align: middle;
          display: inline-block;
        }
```

说说position,display

display属性值:none、inline、block、inline-block
position属性的值:static、relative、absolute、fixed

浮动元素引起的问题和解决办法?绝对定位和相对定位,元素浮动后的display值

浮动元素引起的问题:由于元素浮动后脱离了文档流,会造成父元素的塌陷,也会影响该元素后面元素的结构位置

如何解决?只要触发了BFC,制造出隔离的空间,就能解决浮动造成的影响
详情请看我的这篇博文
浅谈BFC—CSS的低调大佬

元素浮动后,就算他是内联元素,实质上的他的dispaly性质已经办成block了,就是像块级元素一样能设置宽高等属性

相对定位:将一个元素从它在普通流所处的位置上进行移动,并且这种移动不会影响周围元素的位置,它们还是处于在普通流中所处的位置。

绝对定位:position: absolute;脱离了普通流,也就是说不会影响到周围任何元素的位置(就像是直接忽略掉它所占据的空间)。使用绝对定位的元素的位置相对于最近的已定位的祖先元素,如果没有已定位的祖先元素,那么它的位置相对于最初的包含块。

link和@import引入css的区别

除了写法上面的区别之外,最大的区别在于link会和dom结构一同加载渲染,而@import只能能dom结构加载完成以后才能渲染页面

解释一下css3的flexbox,以及适用场景

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。

比如元素居中,仅需要在父级元素css中声明display:flex;justify-content:center;align-items:center;即可

实现项与项之间的均匀分布:

.flex-container { display: flex; justify-content: space-around; }

等等

grid布局

假如有这样的页面布局:两边固定宽度,中间自适应的三栏式布局,
使用grid布局就能很方便的实现了

.parent {
        width: 100%;
        display: grid;
        grid-template-rows: 200px;    /*行的高度*/
        grid-template-columns: 300px  auto 300px;   /*列的宽度*/
    }

因为存在兼容性问题 chrome都要57以上的才支持,所以并没有常用

实现两栏布局有哪些方法?

1.利用float和margin结合:
2.使用grid布局
3.利用 position:absolute 配合 margin 实现
4.利用 display: flex 实现

css dpi

dpi:就是每英寸的像素数

你知道attribute和property的区别么

property 和 attribute中文翻译意思非常相近,
但是property是DOM中的属性,是JavaScript里的对象;在面向对象的思想中,封装的类中用来表示对象状态的成员就是property;

attribute是HTML标签上的特性,在标签语言面向对象编程时候,他的对象状态成员property,=被包装成为attribute,但并不是所有attribute都是property。
例如checkbox的checked的状态,在标签内它的状态值可以决定选中的状态;而在js中的checked可作为property对象,用true或false来决定状态

流式布局如何实现,响应式布局如何实现

流式布局:按照百分比来适配浏览器网页,有很大的缺陷:不同的屏幕下面,元素宽高是不一样的,但是问题、图片依旧是以px为单位不会变的,看起来会有不协调的情况
响应式布局:根据css3的媒体查询技术,media query 是响应式设计的核心,他能和浏览器进行提前的沟通,给到浏览器适合的布局

移动端布局方案

使用用rem布局.:rem是css的单位,是根据根元素即html元素的的字体的font-size的值来等比计算的。

padding百分比是相对于父级宽度还是自身的宽度

margin,padding的百分比是相对与父元素的宽度来进行计算

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/connie_0217/article/details/79945969

前端面试之HTML篇整理

HTML5新特性,语义化 语义化标签比起传统的div+css的样式布局来说,更遵循W3C规则,有利于团队的开发维护,更有利于SEO优化,方便其他设备解析 举几个例说明: 标签 语义...
  • connie_0217
  • connie_0217
  • 2018-04-14 23:59:17
  • 17

web前端面试总结

因为最近在找工作,所以必备的前端笔试题还是要过一遍的,今天就把一些前端的面试题总结一下,同时也算是复习一遍吧。 前端笔试的话主要会分为css相关的笔试题和js相关的笔试题,剩下的就可能是公司内部使用的...
  • diaoweixiao
  • diaoweixiao
  • 2017-10-10 11:51:26
  • 118

ofo前端面试

1、自我介绍 2、在做系统的时候,都用到哪些前端相关的技术? 3、html标签的应用 div。span。html5的标签 4、标签的语义化   5、假设我有一个页面,做成三列,两边宽是200px,...
  • xin9910
  • xin9910
  • 2017-09-21 12:28:32
  • 849

web前端面试题及答案 css篇

1.CSS3有哪些新特性? CSS3实现圆角(border-radius), 阴影(box-shadow), 对文字加特效(text-shadow、), 线性渐变(gradient), 旋转...
  • qq_34753236
  • qq_34753236
  • 2016-04-29 11:46:02
  • 3036

前端面试题整理

  • 2018年02月12日 11:14
  • 86KB
  • 下载

我所经历的Android面试

转载地址:https://juejin.im/post/5ab7a9cd6fb9a028c812d24b概述笔者是非计算机专业,15年毕业一直在小公司,觉得完全靠自学已经到了自己的天花板,然后想进大型...
  • wzmde007
  • wzmde007
  • 2018-03-27 09:40:45
  • 192

关于2018网易游戏web前端实习生面试经历

去年报名的网易前端面试,没想到过了3个月居然收到了面试的通知,心里也是激动,花了一天时间面试,自己总结一下面试过的问题,问题可能不全,但是这些是我所能记起来的问题。一面 1.css高度坍塌(两个盒子...
  • blueblueskyhua
  • blueblueskyhua
  • 2017-03-02 15:45:53
  • 4276

Android-BAT面试题整理(java篇,含答案)

2017 年初、阿里、腾讯、百度、华为、京东、搜狗和滴滴面试题汇集(更新篇) 2017下半年,一二线互联网公司Android面试题汇总我的第一篇有关面试的文章:Android2017-2018最新面试...
  • hengqiaqia
  • hengqiaqia
  • 2018-03-29 09:50:45
  • 43

web前端面试常见问题二 ------css布局(position)

web前端面试常见问题二                  ------css布局(position)    前言:博主我今年大三,web前端学了也有小半年啦,因为大四没课啦,所以已经开始找实习,面试...
  • u012763269
  • u012763269
  • 2015-06-22 14:02:16
  • 2134

2016 美团猫眼web前端面试经验

真心觉得美团的面试官人都好好 。告诉你哪里不足,也很有耐心,感动ing 下午两点多打来的电话,主要的问的内容很广,计算机基本知识。 第一面: 三次握手 http缓存 tcp/ip/htt...
  • Sarah_yzx
  • Sarah_yzx
  • 2016-08-03 19:43:12
  • 901
收藏助手
不良信息举报
您举报文章:前端面试之CSS篇整理
举报原因:
原因补充:

(最多只允许输入30个字)