css面试总结｜ 8月更文挑战

vaelcy
1,656 阅读14分钟

总结一些css相关的知识，将笔记整理跟大家分享，有些知识会经常在前端面试的时候会问到，所以做个记录，希望对大家有所帮助，如果有什么问题，可以指出，会积极修正。
如果大家喜欢，可以点赞或留言我再继续更新面试题~~~~，谢谢大家~~~

px rem em区别

一.px
1.相对长度单位。相对于显示器屏幕分辨率而言。
2.存在浏览器不兼容问题。
二.em
1.相对长度单位。相对于当前对象内文本字体尺寸。
2.em值并不是固定的，em会继承父级元素的大小.
3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px.
4.存在容易造成字体设置混乱问题。
三.rem
1.相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px.
2.如果html根节点设置字体font-size为100px. 则1em=100px. 2em=200px. 跟父级字体无关。
3.浏览器兼容性比较好。
四.vw（视窗宽度单位）
vw是相对于视口宽度的长度单位，1vw等于视口宽度的1%。例如，如果视口宽度是1000px，那么1vw等于10px。
五.vh（视窗高度单位）
vh是相对于视口高度的长度单位，1vh等于视口高度的1%。例如，如果视口高度是800px，那么1vh等于8px。

display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

CSS中 link 和@import 的区别是？

(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.

介绍一下box-sizing属性和盒模型？

盒模型：content + border + padding +margin
盒模型分为：基本模型（w3c标准盒模型）+IE模型（基本模型width=content,IE模型width=content+border+padding）
如何区分基本模型还是IE模型
Css3新增的属性Box-sizing 有两个值content-box（基本模型）和border-box（IE模型）
获取盒模型对应的宽高：dom.style.width/height
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

举几个例子说padding margin的使用场景和区别是什么？

区别

  • margin：表示边框以外的区域
  • padding：表示边框与内容之间的区域

使用场景

使用margin的场景：
需要在border（边框）以外的区域添加空白间距时；
空白区域不需要使用背景颜色时
注意：上下两个相连的盒子之间使用的外边距需要相互抵消。
需要使用负值对页面布局时（注意：margin的值可以取负数，padding的值是不能使负数的）
margin需注意：

​ margin在垂直方向上相邻的值相同时会发生叠加，水平方向的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠，但是，此时一个为正数，一个为负数，并不是取其中较大的值，而是用边界的绝对值，也就是正的边界值和负的边界值相加。

使用padding的场景：
需要在border内侧添加空白
空白区域需要使用到背景颜色
注意：上下相连的两个盒子之间的空白，间距是两者之和
最后，需注意margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间距；margin用于布局分开元素，使元素与元素互不干扰；padding用于元素与内容之间间隔，让内容与元素之间有一段距离。

最后的最后，在怪异盒模型中，一个块的总宽度受marign影响，但不受padding的影响。

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"]）
9.伪类选择器（a: hover, li:nth-child）
可继承的样式：font-size font-family color, text-indent;
不可继承的样式：border padding margin width height ;
优先级为: !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器;
CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

position的值， relative和absolute分别是相对于谁进行定位的？

absolute
生成绝对定位的元素，相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed （老IE不支持）
生成固定定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
inherit 继承父元素的position属性

  • 固定定位使用的场景（常用场景）
    • css固定定位一般在导航栏、广告悬浮、返回顶部按钮、悬浮菜单、消息提示框等场景使用。详细介绍：1、导航栏，无论用户如何滚动页面，导航栏都会保持可见，可以提高用户体验，使用户在浏览网页时能够方便地导航到其他页面；2、广告悬浮，使用固定定位，可以使广告随着用户的滚动而保持在页面的某个位置，从而提高广告的曝光率和点击率；3、返回顶部按钮，使按钮始终停留在浏览器窗口的某个位置等等。
  • 绝对定位使用场景
    • 绝对定位常用于创建复杂的布局效果和精确控制元素的位置。它可以脱离文档流，不会对其他元素的布局产生影响。

CSS3有哪些新特性？

官网教程：www.runoob.com/css3/css3-t…
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image

对BFC规范的理解？

BFC是块级格式化上下文，他是页面中相对独立的一块渲染区域，他决定了内部的子元素如何进行摆放和定位，以及区域内部元素和区域外部元素之间的相互关系。
特点：

     1.bfc可以包含浮动元素

     2.bfc所确定的区域不会与外部浮动元素发生重叠

     3.位于同一bfc下的相邻块级子元素在垂直方向上发生margin重叠

如何创建bfc :float值不为none,overflow值为auto,display值为inline-block,position值为flex或absolute

常见兼容性问题？

  • png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
  • 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
  • IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
  • 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）#box{ float:left; width:10px; margin:0 0 0 100px;}
    这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
  • 渐进识别的方式，从总体中逐渐排除局部。
    首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
    接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
     .bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/ 
      }
  • IE下,可以使用获取常规属性的方法来获取自定义属性,
    也可以使用getAttribute()获取自定义属性;
    Firefox下,只能使用getAttribute()获取自定义属性.
    解决方法:统一通过getAttribute()获取自定义属性.
  • IE下,event对象有x,y属性,但是没有pageX,pageY属性;
    Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
  • 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
  • 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
    L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
  • 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法：<doctype html>
  • 上下margin重合问题
    ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin- bottom却会发生重合。
    解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
  • ie6对png图片格式支持不好(引用一段脚本处理)

清除浮动有哪些方法？

　浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

.clearfix:after;{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
 }

实现两栏布局的方式？（假设左侧宽200，右侧自适应-）

1.使用浮动：左侧盒子使用浮动float: left;右侧盒子使用margin-left：200px
2.使用定位：absolute+margin
3.使用flex： 大盒子flex 右盒子flex设成1
4.使用浮动＋BFC：左盒子使用float：left 右盒子设置overflow: hidden(float+BFC)

实现三列布局的方式？(假设高度已知，请写出三栏布局，其中左右宽度各为300px，中间自适应)

<div class="box1">
　　<div class="left1"></div>
　　<div class="right1"></div>
　　<div class="center1"></div>
</div>

1.利用浮动：左右盒子float left和right center设置margin-left：300px和margin-right：300px

2.利用绝对定位：左右盒子设置绝对定位absolute left：0 right：0 top：0，center设置margin-left：300px和margin-ringht：300px

3.利用弹性布局felx：大盒子box1设置display：felx ，center盒子设置felx：1

4.利用display:table布局：大盒子设置display:table ，left和right盒子设置display:table-cell

垂直水平居中？

1.水平居中：给div设置一个宽度，然后添加margin:0 auto属性

2.把元素变成定位元素position:absolute;

设置元素的定位位置，距离上、下、左、右都为0
left:0;
right:0;
top:0;
bottom:0;
margin：auto；
*兼容性较好，缺点:不支持IE7以下的浏览器

3.把元素变成定位元素position:absolute;

设置元素的定位位置，距离上、左都为50%
left:50%;
top:50%;
设置元素的左外边距、上外边距为宽高的负1/2
margin-left:-100px;
margin-top:-200px;
*兼容性好;缺点:必须知道元素的宽高

4.把元素变成定位元素position:absolute+transform;

设置元素的定位位置，距离上、左都为50%
left:50%;
top:50%;
设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)
transform:translate(-50%,-50%);
*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

5.利用flex布局

父盒子设置display:flex;
align-items:center;/垂直居中/
justify-content:contenr/水平居中/

viewport

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/>
<!-- width    设置viewport宽度，为一个正整数，或字符串‘device-width’
device-width  设备宽度
height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
user-scalable    是否允许手动缩放 -->

延伸问题怎样处理 移动端 1px 被 渲染成 2px 问题？

在<head></head>之间设置下<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/> 然后通过rem进行布局

局部处理

  • meta标签中的 viewport属性 ，initial-scale 设置为 1
  • rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

全局处理

  • mate标签中的 viewport属性 ，initial-scale 设置为 0.5
  • rem 按照设计稿标准走即可

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

  • 单冒号(  : )用于 CSS3 伪类 ，双冒号(   :: )用于 CSS3 伪元素
  • 用于区分伪类和伪元素

伪类和伪元素的区别

  • 伪类表状态
  • 伪元素是真的有元素
  • 前者单冒号，后者双冒号

三角样式

image.png

如何实现一个自适应的正方形

方法1：利用CSS3的vw单位

vw 会把视口的宽度平均分为100份

.square {
    width: 10vw;
    height: 10vw;
    background: red;
}

方法2：利用margin或者padding的百分比计算是参照父元素的width属性

.square {
    width: 10%;
    padding-bottom: 10%; 
    height: 0; // 防止内容撑开多余的高度
    background: red;
}

实现一个扇形

image.png

div{
    border: 100px solid transparent;width: @;
    height: 0;border-radius: 100px;
    border-top-color: red;
}

画一个梯形

image.png

<div class="tra"></div>

.tra {
    height: 0;
    width: 100px;
    border-bottom: 100px solid red;
    border-right: 50px solid transparent;
}

实现一个等腰梯形

image.png

.tra{
    height:0;
    width:10Opx;
    border-width: 40px 100px 40px;
    border-style:none solid solid;
    border-color:transparent transparent red;
}

其他相关总结文章

avatar
文章
阅读
粉丝