前端之旅Web前端之路让前端飞

CSS面试常见知识点

2017-10-17  本文已影响61人  ST_Pace

原文在我最近刚弄的个人博客：
http://hellopan.top

intro

因为篇幅问题，把CSS和HTML的内容分开了...

css

a元素各种伪类的正确使用

zoom:1

Zoom属性是IE浏览器的专有属性， 它可以设置或检索对象的缩放比例。
产生BFC
清楚浮动产生的影响，与overflow:hidden;作用类似，使元素产生包裹性 。

标准和低版本IE盒子模型

  1. 有两种， IE 盒子模型、W3C 盒子模型；
  2. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
  3. 区 别： IE的content部分把 border 和 padding计算了进去;

CSS选择符

  1. id选择器（ # myid）
  2. 类选择器（.myclassname）
  3. 标签选择器（div, h1, p）
  4. 相邻选择器（h1 + p）
  5. 子选择器（ul > li）
  6. 后代选择器（li a）
  7. 通配符选择器（ * ）
  8. 属性选择器（a[rel = "external"]）
  9. 伪类选择器（a:hover, li:nth-child）

css属性继承

CSS优先级算法

  1. 按CSS代码中出现的顺序决定，后者CSS样式居上；（近水楼台 先得月）
  2. !important声明specificity值优先级最高
  3. 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
  4. 权重: id(100) > class(10) > tag(1)

居中div

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

/* 第一种 */
div{
      position: relative; /* 相对定位或绝对定位均可 */
      width:500px;
      height:300px;
      top: 50%;
      left: 50%;
      margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
      background-color: pink; /* 方便看效果 */
  }
 /* 第二种 */
div{
      position: absolute;   /* 相对定位或绝对定位均可 */
      width:500px;
      height:300px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: pink;   /* 方便看效果 */ 
 }
 /* 第三种 */
.container {
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
 }
 .container div {
  width: 100px;
  height: 100px;
  background-color: pink;   /* 方便看效果 */
 }
 /* 第四种 */
 div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 方便看效果 */
 }

position

em rem

:before和:after

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

以下的代码将会在页面中展现的是”HelloWorld”。

<style>
    p:before{
        content: "H"  /*:before和:after必带技能，重要性为满5颗星*/
    }
    p:after{
        content: "d"  /*:before和:after必带技能，重要性为满5颗星*/
    }
</style>
<p>ello Worl</p>

我们通过浏览器的”审查元素”看到的内容是：

<p>
  ::before
  "ello Worl"
  ::after
</p>

平常该怎么使用 eg:作为内容的半透明背景层

<style>
body{
    background: url(img/1.jpg) no-repeat left top /*这里加了个图片背景，用以区分背景的半透明及内容的完全不透明*/
}
.test-div{
  position: relative;  /*日常相对定位(重要，下面内容也会介绍)*/
  width:300px;
  height: 120px;
  padding: 20px 10px;
  font-weight: bold;
}
.test-div:before{
  position: absolute;  /*日常绝对定位(重要，下面内容也会略带介绍)*/
  content: "";  /*:before和:after必带技能，重要性为满5颗星*/
  top:0;
  left: 0;
  width: 100%;  /*和内容一样的宽度*/
  height: 100%;  /*和内容一样的高度*/
  background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/
  z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/
}
</style>
<div class="test-div">
    <table>
      <tr>
          <td>Name</td>
          <td><input placeholder="your name" /></td>
      </tr> 
      <tr>
          <td>Password</td>
          <td><input placeholder="your password" /></td>
      </tr> 
      <tr>
          <td></td>
          <td><input type="button" value="login" /></td>
      </tr>
    </table>
</div>

CSS3新特性

  1. @Font-face
@font-face {  
   font-family: iconfont;  
   src: url(//at.alicdn.com/t/font_1465189805_4518812.eot); 
}
  1. CSS选择器
    1. E:last-child 匹配父元素的最后一个子元素E。
    2. E:nth-child(n)匹配父元素的第n个子元素E。
    3. E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
    4. :not(.input)：所有 class 不是“input”的节点
  2. 圆角 （border-radius）
  3. 多列布局 （multi-column layout）
  4. 阴影和反射 （Shadow\Reflect）
  5. 文字特效 （text-shadow）
  6. 文字渲染 （text-decoration）
  7. 线性渐变 （gradient）
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

Flexbox

一个完整的Flexbox指南
Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/a-guide-to-flexbox.html © w3cplus.com

多列等高

首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

<style>
    body{
     padding:0; margin:0; color:#f00;}
    .container{
     margin:0 auto; width:600px; border:3px solid #00C;
        overflow:hidden;
     /*这个超出隐藏的声明在IE6里不写也是可以的*/
    }
    .left{
     float:left; width:150px; background:#B0B0B0;
        padding-bottom:2000px;
        margin-bottom:-2000px;
    }
    .right{
     float:left; width:450px; background:#6CC;
       padding-bottom:2000px;
       margin-bottom:-2000px;
    }
</style>

<div class="container">
    <div class="left">我是left</div>
    <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>
    <div style="clear:both"></div>
</div>

css浏览器兼容问题

初始化CSS样式

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

淘宝的样式初始化代码：

  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { 
    margin:0; padding:0; 
  }
  body, button, input, select, textarea { 
    font:12px/1.5tahoma, arial, \5b8b\4f53; 
  }
  h1, h2, h3, h4, h5, h6{
    font-size:100%; 
  }
  address, cite, dfn, em, var {
    font-style:normal; 
  }
  code, kbd, pre, samp {
    font-family:couriernew, courier, monospace; 
  }
  small{
    font-size:12px; 
  }
  ul, ol {
    list-style:none; 
  }
  a {
    text-decoration:none; 
  }
  a:hover {
    text-decoration:underline; 
  }
  sup {
    vertical-align:text-top; 
  }
  sub{
    vertical-align:text-bottom; 
  }
  legend {
    color:#000; 
  }
  fieldset, img {
    border:0; 
  }
  button, input, select, textarea {
    font-size:100%; 
  }
  table {
    border-collapse:collapse; 
    border-spacing:0; 
  }

内容超过长度后以省略号显示

{
width: 160px; 
overflow: hidden; 
text-overflow:ellipsis; 
white-space: nowrap;
}

visibility

visibility:collapse;仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.

BFC

块级格式化上下文：block formatting context
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

BFC生成

约束规则

浮动与BFC

多栏布局与BFC

1606281-f440a960de13410f.png

——BFC部分来自原文☞我对BFC的理解

end

上一篇下一篇

猜你喜欢

热点阅读