前端面试宝典（二）

萌兔IT

发布于 2019-08-06 10:38:58

4560

发布于 2019-08-06 10:38:58

文章被收录于专栏：萌兔it

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%);
}

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-08-04，如有侵权请联系 cloudcommunity@tencent.com 删除

css