CSS面试常见知识点

最新推荐文章于 2024-10-01 17:46:23 发布
最新推荐文章于 2024-10-01 17:46:23 发布
阅读量1.7k 收藏 10
点赞数 3
分类专栏： 知识总结 文章标签： css 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ST_Pace/article/details/78268222
版权

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

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盒子模型

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

  • 伪类对象要配合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新特性

  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浏览器兼容问题

  • 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的理解

end

ST_Pace
关注
专栏目录
css知识点总结
guchiccc的博客
12-28 1108
一．什么是css？ CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。 二．CSS引入方式 1.行内样式 在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;...” 属性 内嵌式 把所有的css样式都写在<style></style>标签内，<style></style>放在head标签内 外链式 把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在h
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
关于CSS面试知识点（持续更新ing~）
Hi_Akai的博客
07-31 151
关于CSS面试知识点（持续更新ing~）
ES6有哪些新特性
最新发布
Love_evoL2的博客
10-01 1481
reduce()方法可以应用的场景特别多，循环遍历能做的，reduce都可以做，比如数组求和、数组求积、统计数组中元素出现的次数、数组去重等等。// 输出：[1, 5, 9, 3, 7, 10, 4, 2]let [n,,m] = arr //如果不想要某个值，可以省略，n='apple',m='happy'// 输出：['c', 'h', 'i', 'n', 'a']console.log(1, ...[2, 3, 4], 5);// 输出：[0, 1, 2, 3, 4, 5]
CSS知识点大全
newperso的博客
08-06 678
什么是CSS CSS(Cascading Style Sheets) 层叠样式表 是用于修饰文档的（可以是标记语言HTML ，也可以是XML或者svn）的语言，可以将文档以优雅的新方式呈现给用户。 CSS声明（CSS declarations） key = value 键值对的形式 backgronud-color: red; 选择器 1.标签选择器 div { 声明块 } 2.类选择器 <div class="one">...&lt
css 知识点
持之以恒
03-08 326
一、      选择器：p:first-letter{  /*伪元素*/  font-size: 50px   } div:first-line{ background-color:red; } input:checked{  /*伪类选择器*/  width: 200px;  height: 200px;} input:disabled{ background-color:red;} 样式优先级...
CSS知识点汇总
qq_41628448的博客
02-27 279
CSS:页面美化和布局控制 1、概念：Cascading Style Sheets 层叠样式表 *层叠：多个样式可以作用在同一个html的元素上，同时生效 2、好处： 1、功能强大 2、将内容展示和样式分离 *降低耦合度，解耦 *让分工协作更容易 *提高开发效率 3、CSS的使用：CSS与html结合方式（1，不常用，2，3常用） 1、内联样式 *在标签内使用st...
CSS整合面试知识点
07-20
以上这些知识点覆盖了CSS面试中常见的基础知识点和一些实用技巧，对于前端工程师的面试准备具有很好的指导作用。通过深入理解和熟练应用这些知识点，面试者将能够更有效地展示自己的CSS技能水平。
CSS面试必备知识点完整总结
资源摘要信息:"CSS（层叠样式表）...以上知识点为CSS面试的常见考察点，求职者应深入理解每一个概念，并通过实践来提升编码能力。通过掌握这些知识点，可以帮助求职者在面试中展示出扎实的专业技能和丰富的项目经验。
css如何固定table第一行CSS面试知识点总结三.docx
07-08
以下是一些关键的CSS面试知识点，它们涉及到表格、行高、边距、边框以及其他相关的样式特性。 首先，我们要明白`line-height`这个属性的重要性。它决定了元素中文本行之间的间距。`line-height`的默认值是`normal`...
前端CSS及其他知识点错题汇总_前端、面试_
10-02
以下是一些前端CSS面试中常见的问题和知识点汇总： 1. **盒模型**：CSS盒模型包括元素的content（内容）、padding（内边距）、border（边框）和margin（外边距）。理解不同浏览器默认盒模型的差异（W3C标准盒模型与...
CSS常见知识点整理
qq_36583154的博客
02-13 547
整理一些CSS常见知识点：   CSS Position(定位) Position的值： static   HTML 元素的默认值，即没有定位，遵循正常的文档流对象 relative  相对定位元素的定位是相对其正常位置 fixed    元素的位置相对于浏览器窗口是固定位置 absolute  绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相...
CSS 知识点汇总
yu168yu1的博客
11-21 254
一、元素 按照在页面中的呈现效果进行分类 行内元素 特性：在一行内显示，不可以设置宽高。 例如：a b span strong i em del… 块元素 特性：独占一行，可以设置宽高。 例如：div p pre h1-h6 ul&gt;li(无序) ol&gt;li(有序) dl&gt;dt+dd(项目列表) 行内块元素 特性：在一行内显示，可以设置宽高。 例如：表单控件 im...
css（超详细知识点）
2401_86644481的博客
08-23 2685
学css看这一篇就够了
css知识点汇总
ricoshallow的博客
04-22 199
** CSS重要知识点 （不定期更新） ** 1.display: none; 与 visibility: hidden; 的区别： 联系：它们都能让元素不可⻅ 区别： display:none ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden ;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可⻅ display: none ;是⾮继承属性，visibility: hidden; 是继承属性 修改常规流中元素的 display 通常会造成⽂档重排。修
CSS常用知识点整理
hff945的博客
04-14 728
1、标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同？ （1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE 的 content 部分把 border 和 padding 计算了进去; 1.1rem rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，e
css 常用知识点整理
qq_34230117的博客
12-31 230
努力学习与总结是对自己能力的提升，也希望能帮助到同学们。 BFC 块状格式化上下文（block formatting context）简称 BFC：是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。 如何触发BFC？ 根元素（html）: 最大的BFC position 设置为 fixed 或者 absolute display 设置为 inline-block 、table-...
CSS常用知识点总结（一）
夏大大的博客
06-02 551
CSS学习小结 CSS样式引入方式 1、内联样式表(内嵌 行内) style属性 <div style="width:100px;"></div> 2、内部样式表 style标签 <style> div{width:100px} </style> 3、外部样式表 link <link rel="stylesheet" type="text/css" href="css/style.css"/> 样式表优先级 内联样式 &g
CSS3主要知识点复习总结+HTML5新增标签
HTMl5自由者
05-17 3628
分享2014-4-1 HTML5上课笔记 2、CSS3属性（内核前缀） Mozilla 内核   css前缀-moz;  WebKit  内核   css前缀-webkit ;（谷歌已换用blink内核） Opera   内核   css前缀 -o ;    （欧朋已换用blink内核） Trident 内核   css前缀 -ms ;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值