CSS面试题

本文最后更新于：2022年6月24日下午

CSS选择器

*【0】
类选择器class【10】
id选择器【100】
标签选择器tag【1】

组合

a,b{a or b} 
a b{b是a的后代节点}
a+b{b是a的兄弟下一个节点}
a>b{b是a的直接子节点}
a~b{b是a之后的任意兄弟节点}

属性选择器，子串值选择器

div[key] // 有属性key
div[key=val] // 属性key值为val
div[key~=val] // key的值包含val
div[key|=val]  // key的值
div[key^=val] // key的值以val开头
div[key$=val]	// key的值以val结尾
div[key*=val]	// key的值包含val

伪类

期望元素在特定情况下呈现不同样式，如鼠标滑过hover，选中checked，激活状态active等。伪类开头为单冒号:。
伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类，常见的像after``before。伪元素开头为双冒号::。

CSS3 新特性

边框属性border-radius，box-shadow，border-image
背景控制background-size,background-origin
文字效果和自动换行text-shadow,word-wrap
自定义字体@font-face
2d/3d 变换，过渡和动画transition``animation
CSS 多列布局CSS Multi-column Layout
盒模型属性box-sizing
弹性盒子flex
更强大的多媒体查询

层叠上下文

我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

根元素<html>；
position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素
flex 容器的子元素，且 z-index 值不为 auto；
grid 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于1；
以下任意属性值不为 none 的元素：
- transform
- filter
- perspective
- clip-path
  - mask / mask-image / mask-border
  - isolation 属性值为 isolate 的元素；
  - -webkit-overflow-scrolling 属性值为 touch 的元素；
  - will-change 值设定了任一属性

层叠水平不能跨级别比较，只能在同一上下文中才有意义

没有创建层叠上下文的元素其层叠水平又父级层叠上下文决定

浏览器兼容

IE
- 双边距
  - display:inline
- 默认高度16px
  - font-size:0
  - overflow:hidden
- 超链接内 img 会有边框
  - border:0
3px bug
- display:block
- vertical-align:top

position 跟 display、margin collapse、overflow、float 这些特性相互叠加后会怎样

如果元素的 display 为 none，那么元素不被渲染，position，float 不起作用；
如果元素拥有 position:absolute;或 position:fixed;属性，那么元素将为绝对定位，float 不起作用。
如果元素 float 属性不是 none，元素会脱离文档流，根据 float 属性值来显示。
有浮动、绝对定位，inline-block 属性的元素，margin 不会和垂直方向上的其他元素 margin 折叠。

画三角形

不同边 border 之间 45 度拼接

div{
  width:0;
  height:0;
  border-top:50px red solid;
  border-left:50px $(背景色) solid;
  border-right: 50px $(背景色) solid;
}

画椭圆

border-radius属性

border-radius 是简写属性
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- top 左右，bottom 右左，顺时针顺序
- “/“ 用来分隔水平方向和垂直方向

/* 绘制半椭圆 */
div{
 width: 100px;
 height: 0;
 border-style: solid;
 border-color: #f00;
 border-radius: 50%/100% 100% 0 0；
 /* 水平方向上四个角的半径都为50% /  垂直方向 左右上半径为100%，左右下为0*/
}

文本控制

单行文本居中，多行文本左对齐

div{
  text-align:center
}
p{
  display:inline-block;
  text-align:left
}

多行文本省略号

p:after{
  content:'...'
}

单行文本溢出省略

overflow: hidden；
/* （文字长度超出限定宽度，则隐藏超出的内容） */
white-space: nowrap；
/* （设置文字在一行显示，不能换行） */
text-overflow: ellipsis；
/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */

多行文本溢出

-webkit-line-clamp: 2；
/* （用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性） */
display: -webkit-box；
/* （和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ） */
-webkit-box-orient: vertical；
/* （和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ） */
overflow: hidden；
/* （文本溢出限定的宽度就隐藏内容） */
text-overflow: ellipsis；
/* （多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本) */

dpr 1px 边框

伪元素配合媒体查询transform:scale()

.onePx_border:after{
    /* 整个div边框 */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #cccccc;
    /* 注意宽高和圆角单位都要配合媒体查询 */
    border-radius: 26px;？？？
    width: 100%/200%/333%
    height: 100%/200%/333%


    /* 单独一边的边框 */
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #cccccc;
    width: 100%;
    height: 1px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .onePx_border:after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .onePx_border:after {
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}

rem + viewport

整体缩放 px 单位

<script>
  (function () {
    // scale
    var clientWidth = window.screen.width;
    var dpr = window.devicePixelRatio;
    var vp = document.createElement('meta');
    vp.name = 'viewport';
    vp.content = `initial-scale=${1.0 * 1 / dpr}, maximum-scale=${1.0 * 1 / dpr}, minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device-width`;
    var m = document.getElementsByTagName('meta')[0];
    m.parentNode.insertBefore(vp, m);

    // rem
    document.documentElement.style.fontSize = ?
  })();
</script>

其他元素使用 rem 单位

垂直居中 div

绝对定位+上下左右 0+ margin:auto
绝对定位+上50%左50%+负margin自身宽高一半
绝对定位+上50%左50%+负translate自己宽高一半
flex+justify-content+align-items
grid+justify-content+align-items
table-cell+vertical-align:middle

三栏布局(左右固定中间自适应)

绝对定位

左右浮动【自适应元素要放在最后】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				min-width: 550px;
			}
			.container {
				overflow: hidden;
			}
			.column {
				min-height: 100px;
			}
			.left {
				float: left;
				width: 200px;
				background: #ffbbff;
			}
			.center {
				width: 100%;
				background: #bfefff;
			}
			.right {
				float: right;
				width: 150px;
				background: #eeee00;
			}
			/*左右浮动至左右并处于同一行
          *未浮动的center内容会被浮动元素环绕
          */
		</style>
	</head>
	<body>
		<div class="container">
			<div class="column left">left</div>
			<div class="column right">right</div>
			<div class="column center">center</div>
		</div>
	</body>
</html>

全部左浮，-margin 移到上一行【自适应元素放在最前】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				min-width: 550px;
			}
			.container {
				padding: 0 150px 0 200px;
				overflow: hidden;
			}
			.column {
				position: relative;
				/**
        *设置定位，元素需要手动移动至padding空隙中
        */
				float: left;
				min-height: 100px;
			}
			.left {
				right: 200px;
				margin-left: -100%;
				width: 200px;
				background: #ffbbff;
			}
			.center {
				width: 100%;
				background: #bfefff;
			}
			.right {
				left: 150px;
				margin-left: -150px;
				width: 150px;
				background: #eeee00;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="column center">center</div>
			<div class="column left">left</div>
			<div class="column right">right</div>
		</div>
	</body>
</html>

全部左浮，center 元素需要撑开 center-wrapper【自适应元素放在最前】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				min-width: 550px;
			}
			.container {
				overflow: hidden;
			}
			.column {
				float: left;
				min-height: 100px;
			}
			.left {
				margin-left: -100%;
				width: 200px;
				background: #ffbbff;
			}
			.center-wrapper {
				width: 100%;
			}
			.center {
				width: 100%;
				padding: 0 150px 0 200px;
				background: #bfefff;
				min-height: 100px;
			}
			.right {
				margin-left: -150px;
				width: 150px;
				background: #eeee00;
			}
			/**
       *3，4方法类似
       * -100%的margin-left将元素移到上行最左
       * -自身宽度margin-left将元素移到上行最右
       * 并通过给center加padding
       */
		</style>
	</head>
	<body>
		<div class="container">
			<div class="column center-wrapper">
				<div class="center">center</div>
			</div>
			<div class="column left">left</div>
			<div class="column right">right</div>
		</div>
	</body>
</html>

flex

flex-grow:1 自适应填充剩余空间
grid

grid-template-column/row中给自适应元素写 auto 大小

table
table 下的table-cell会自动自适应没写 width 的元素

.wrapper {
	display: table;
	width: 100%;
}
.wrapper div {
	height: 300px;
	display: table-cell;
}
.main {
	background: pink;
}
.left {
	width: 100px;
	background: red;
}
.right {
	width: 150px;
	background: yellow;
}

移动端

像素

物理像素:物理成像点
css 像素:开发逻辑单位
设备独立像素:设备屏幕呈现的像素量
dpi 设备像素比:物理像素/设备独立像素(用多少个物理像素渲染一个设备独立像素)

移动端适配

使用rempostcss-pxtorem / 大屏设备显示过大
使用vw/vhpostcss-px-to-viewport / 大屏设备显示过大
百分比单位
px 为主，搭配 vw/vh、媒体查询与 flex 进行布局

#面试 #CSS

CSS面试题

http://yoursite.com/2022/02/24/css面试题/

作者

tatekii

发布于

2022年2月24日

许可协议

实现自适应div高度为宽度一半上一篇

es6~now新特性下一篇