前端面试宝典(二)

Hello小伙伴们,上次的题目做的如何呀~是不是觉得对知识点有了更深层次的理解了呢?我们今天还是6道题目哦!

1) CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS3新增伪类有哪些?

1.id选择器( # myid)     2.类选择器(.myclassname)

3.标签选择器(div,h1, p)    4.相邻选择器(h1 + p)

5.子选择器(ul< li)      6.后代选择器(li a)

7.通配符选择器( *)     8.属性选择器(a[rel = "external"])

可继承的样式:font-size font-family color, UL LI DL DD DT;

不可继承的样式:border padding margin width height ;

优先级就近原则,同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important > id > class >tag important 比 内联优先级高

2) 如何居中div?如何居中一个浮动div?

给div设置一个宽度,然后添加margin:0 auto属性

.div{    
  width:200px;    
  margin:0 auto;
}  

居中一个浮动元素

确定容器的宽高,宽500、高300,设置层的外边距

.div {   
  width:500px; 
  height:300px;//高度可以不设  
  margin: -150px 0 0 -250px;  
  position:relative;//相对定位  
  background-color:pink;//方便看效果  
  left:50%;  
  top:50%;
} 

3) css定义的权重

以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100

举个例子:各种定义的权重值:

权重为1*/div{}

权重为10*/.class1{}

权重为100*/#id1{}

权重为100+1=101*/#id1 div{}

权重为10+1=11*/.class1 div{}

权重为10+10+1=21*/.class1.class2 div{}

如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

4) 介绍一下CSS的盒子模型?

(1)有两种, IE 盒子模型、标准W3C 盒子模型;IE的content部分包含了 border 和 padding;

(2)盒模型:内容(content)、填充(padding)、边界(margin)、 边框(border).

IE盒子模型

标准盒子模型

5) 让一个固定高度盒子垂直水平居中

.parent-panel2{ 
  width:100%;
  height:400px; 
  border:1px solid #888; 
  position: relative; 
}
.middle-panel2{ 
  position: absolute; 
  width:300px; 
  height: 100px; 
  border:1px solid #888; 
  top:50%; 
  margin-top:-50px; 
  left: 50%; 
  margin-left: -150px; 
 }

6) 让一个不固定高度盒子垂直水平居中

 .div2 {
  position: absolute; 
  border: 1px solid #888; 
  left: 50%; 
  top: 50%; 
  transform: translateY(-50%) translateX(-50%)
}
<!--方法1:有些弹出层的样式,也可以用这个方法居中--> 
 .div1{
  position: fixed;//absolute 
  top: 50%; 
  left: 50%;
  width: 50%; 
  max-width: 630px; 
  min-width: 320px; 
  height: auto;
  z-index: 2000; 
  visibility: hidden;
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden; 
  backface-visibility: hidden; 
  -webkit-transform: translateX(-50%) translateY(-50%); 
  -moz-transform: translateX(-50%) translateY(-50%); 
  -ms-transform: translateX(-50%) translateY(-50%); 
  transform: translateX(-50%) translateY(-50%);
}

好啦,今天就是这几道题啦,感兴趣的小伙伴可以尝试自己敲一下,看看效果也是不错的呢,喜欢兔妞的文章就请在看+关注吧~也欢迎与兔妞进行交流讨论,共同进步!

本文分享自微信公众号 - 萌兔it(mengtu_it)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端自习课

【CSS】253- 从原型图到成品:步步深入 CSS 布局

你肯定经历过耗费数个小时,换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码,寄希望于误打误撞地赌中那个能实...

16850
来自专栏猪圈子

大众点评还不会爬?跟着我,我教你。

在工作生活中,发现越来越多的人对大众点评的数据感兴趣,而大众点评的反爬又是比较严格的。采取的策略差不多是宁可错杀一万,也不放过一个。有的时候正常...

13630
来自专栏前端自习课

【Vuejs】242-7个有用的Vue开发技巧

随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用...

9820
来自专栏忽如寄的前端周刊

minipack源码解析

minipack是一个非常简单的通过babel实现的、旨在讲述打包工具原理的仓库,这个仓库本身已经包含了详细的注释。

8620
来自专栏今日前端

打造酷炫透明的 vscode 编辑器

32730
来自专栏前端自习课

【CSS】248-天天都用CSS,你真的懂CSS吗?

其一,HTML Parser 生成的 DOM 树; 其二,CSS Parser 生成的 Style Rules ;

7920
来自专栏前端自习课

【JS】239-浅析JavaScript异步

一直以来都知道 JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就...

8320
来自专栏前端达人

「css基础」Transforms 属性在实际项目中如何应用?

关于Transform变形属性大家都不陌生吧,可以通过此属性实现元素的位移translate(x,y),缩放scale(x,y),2d旋转rotate(angl...

12830
来自专栏python-爬虫

VS做简历的第三天(将文件中的样式保存并且导入)

谢谢 关于display: ,我还是未能理解希望大佬路过指点一下举个例子,我查过百度看过很多也尝试过display后面所有自动生产的命令,我还是没法理解.

6330
来自专栏python-爬虫

vs实用插件

Live Share 强烈推荐的一款插件,能在VS程序中打开文件并且显示他的效果。非常非常实用!,具体功能介绍在你搜索该插件时候有说明,非常非常好用的一款插件...

15910

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励