CSS面试常见知识点

作者: ST_Pace | 来源:发表于2017-10-17 22:18 被阅读61次

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

intro

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

css

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

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候
定义顺序:“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

zoom:1

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

标准和低版本IE盒子模型

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

CSS选择符

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

css属性继承

可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;

CSS优先级算法

按CSS代码中出现的顺序决定，后者CSS样式居上；（近水楼台先得月）
!important声明specificity值优先级最高
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
权重: 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

absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit
规定从父元素继承 position 属性的值。

em rem

1em等于当前的字体尺寸，数值的改变意味着字体大小的调整。em 有继承这个特性，也就是说，外部父元素定义了字体的em大小，内部子元素会继承这一属性的样式。
rem = root em 。顾名思义，root即根部的，顶部的。也就是根部的em，这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。

:before和:after

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

伪类对象要配合content属性一起使用
伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

以下的代码将会在页面中展现的是”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新特性

@Font-face

@font-face {  
   font-family: iconfont;  
   src: url(//at.alicdn.com/t/font_1465189805_4518812.eot); 
}

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”的节点
圆角（border-radius）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow）
文字渲染（text-decoration）
线性渐变（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浏览器兼容问题

margin加倍
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline;
例如：
<#div id=”iamfloat”>
相应的css为
#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ }
min-width和min-height
IE 不认得min-这个定义,如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
要解决这个问题，可以这样：
#box{ width: 80px; height: 35px; } html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px; }
无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,
例如:
overflow:hidden | zoom:0.08 | line-height:1px
渐进识别ie的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{ background-color:red;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }
IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
visibility:collapse;仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.

初始化CSS样式

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

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

淘宝的样式初始化代码：

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

white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
overflow: hidden 隐藏超出单元格的部分。
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

visibility

visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。

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

BFC

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

BFC生成

float的值不为none；
overflow的值不为visible；
display的值为inline-block、table-cell、table-caption；
position的值为absolute或fixed；

约束规则

内部的BOX会在垂直方向上一个接一个的放置；
垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；
BFC的区域不会与float的元素区域重叠；
计算BFC的高度时，浮动子元素也参与计算；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

浮动与BFC

使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。

多栏布局与BFC

上文提到的一条规则：与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。
这种布局的特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应。

1606281-f440a960de13410f.png

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

CSS面试常见知识点

intro

css

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

zoom:1

标准和低版本IE盒子模型

CSS选择符

css属性继承

CSS优先级算法

居中div

position

em rem

:before和:after

CSS3新特性

Flexbox

多列等高

css浏览器兼容问题

初始化CSS样式

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

visibility

BFC

end

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端之旅

Web前端之路

让前端飞

前端开发那些事

Web 前端开发

我爱编程