CSS面试常见知识点

时间  2019-12-05 标签 css 面试 常见 知识

原文->最近刚弄的我的博客：
http://hellopan.top/2017/10/15/css-knowledge-points/css

intro

由于篇幅问题，把CSS和HTML的内容分开了…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;做用相似，使元素产生包裹性 。css3

标准和低版本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属性继承

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

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

  • 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中的一种伪元素，可用于在某个元素以后插入某些内容。web

  • 伪类对象要配合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:做为内容的半透明背景层ide

<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.comsvg

多列等高

首先把列的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和IE七、IE6分离开来，这样IE8已经独立识别。
    .bb{
    background-color:red;/*全部识别*/
    background-color:#00deff\9; /*IE六、七、8识别*/
    +background-color:#a200ff;/*IE六、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的理解

end

联系我们 沪ICP备13005482号-10