前端面试基础点——CSS篇（一）

最新推荐文章于 2024-07-25 16:45:46 发布

Persiguiendo

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量246

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Persiguiendo/article/details/108069696

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文字单行/多行溢出显示省略号

单行文本

p{
	overflow:hidden
	white-space:nowrap
	text-overflow:ellipsis
}

多行文本

p{
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}

px、em和rem

px 是固定的像素，一旦设置了就无法因为适应页面大小而改变
em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，更适用于响应式布局
em 是相对于其父元素设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道它父元素的大小；
rem 是相对于根元素的

选择器

元素选择器 p { }
类选择器 .class { }
ID选择器 #id { }
属性选择器 a[href] { }或 a[href="http://www.baidu.com"] { }
派生选择器
– 子元素选择器 p > em { }
– 后代选择器 p em { }
– 相邻兄弟选择器 h1 + p { }

伪类 / 伪元素

伪类是一个选择处于特定状态的元素的选择器，伪类就是开头为冒号的关键字
伪元素用于创建一些不在文档树中的元素，并为其添加样式，伪元素开头为双冒号

常用伪类

选择器	描述
:active	在用户激活（例如点击）元素的时候匹配
:blank	匹配空输入值的 <input> 元素
:checked	匹配处于选中状态的单选或者复选框
:empty	匹配除了可能存在的空格外，没有子元素的元素
:first	匹配分页媒体的第一页
:first-child	匹配兄弟元素中的第一个元素
:focus	当一个元素有焦点的时候匹配
:hover	当用户悬浮到一个元素之上的时候匹配
:invalid	匹配诸如 <input> 的位于不可用状态的元素
:last-child	匹配兄弟元素中最末的那个元素
:link	匹配未曾访问的链接
:is()	匹配传入的选择器列表中的任何选择器
:not	匹配作为值传入自身的选择器未匹配的物件
:nth-child	匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）
:nth-last-child	匹配一列兄弟元素，从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）
:playing	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素
:paused	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素
:read-only	匹配用户不可更改的元素
:read-write	匹配用户可更改的元素
:required	匹配必填的 form 元素
:valid	匹配诸如 <input> 元素的处于可用状态的元素
:target	匹配当前URL目标的元素（例如如果它有一个匹配当前 URL 分段的元素）
:visited	匹配已访问链接

伪元素

选择器	描述
::after	匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before	匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter	匹配元素的第一个字母。
::first-line	匹配包含此伪元素的元素的第一行。
::grammar-error	匹配文档中包含了浏览器标记的语法错误的那部分。
::selection	匹配文档中被选择的那部分。
::spelling-error	匹配文档中包含了浏览器标记的拼写错误的那部分。

更多伪类和伪元素内容

选择器权重

CSS选择器的进制是256进制

	权重
！important	infinity
行间样式	1000
id	0100
class \| 属性 \| 伪类	0010
标签 \| 伪元素	0001
通配符	0000
继承的样式	无权重

水平垂直居中

此处内容来自 10种水平垂直居中对齐方式、CSS 拷问：水平垂直居中方法你会几种？

<style>
	/* 公共代码 */
	.wp {
    	border: 1px solid red;
    	width: 300px;
    	height: 300px;
	}
	.box {
    	background: green;    
	}
	.box.size{
    	width: 100px;
    	height: 100px;
	}
</style>
<body>
	<div class="wp">
    	<div class="box size">123123</div>
	</div>
</body>

1. absolute + 负 margin

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

缺点：需要固定居中元素的宽高
兼容性：IE 6+、Chrome 4+、Firefox 2+、Android 2.3+、iOS 6+

2. absolute + margin auto

.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

原理：使用了 CSS 中的定位属性（absolute、fixed 等）后，如果 left 设置了具体值，没有设置 right 和 width，那么就会自动计算，把剩余的空间分配给 right 和 width。如果 left、right 和 width 都设置了具体值，并且没有占满横向空间，那么剩余空间就处于待分配状态，此时设置 margin: auto; 意味着把剩余的空间分配给 margin，并且左右均分，所以就实现了水平居中，垂直方向同理
副作用
left: 0; right: 0; 相当于 width: 100%;
top: 0; bottom: 0; 相当于 height: 100%;
缺点：需要固定居中元素的宽高，否则其宽高会被设为 100%
兼容性：IE 6+、Chrome 4+、Firefox 2+、Android 2.3+、iOS 6+

3. absolute + calc

.wp {
	position: relative;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    background: green;
}

缺点：需要固定居中元素的宽高
兼容性：IE 9+、Chrome 19+、Firefox 4+、Android 4.4、iOS 6+

4. absolute + transform

.wp {
	position: relative;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: green;
}

优点：不需要固定居中元素的宽高
兼容性：IE 9+、Chrome 4+、Firefox 3.5+、Android 3+、iOS 6+

5. lineheight

.wp {
    border: 1px solid red;
    line-height: 200px;
    text-align: center;
    font-size: 0px;
    width: 300px;
    height: 200px;
}
.box {
	background: #eeeeee;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

6. writing-mode

writing-mode 可以改变文字显示方向

<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>

.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

缺点：需要修改 DOM 结构（为了居中元素，需要嵌套两层父元素）
优点：不需要固定居中元素的宽高
兼容性：IE 6+、Chrome 4+、Firefox 3.5+、Android 2.3+、iOS 5.1+

7. css-table

<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

8. Flex

.wp {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

另一种写法

.wp {
  display: flex;
}

.box {
  margin: auto;
}

优点：不需要固定居中元素的宽高
兼容性：IE 10+、Chrome 4+、Firefox 2+、Android 2.3+、iOS 6+

9. Grid

.wp {
  display: grid;
}

.box {
  justify-self: center; /* 水平居中 */
  align-self: center; /* 垂直居中 */
}

另一种用法

.wp {
  display: grid;
}

.box {
  margin: auto;
}

优点：不需要固定居中元素的宽高
兼容性：IE 10+、Chrome 57+、Firefox 52+、Android 6+、iOS 10.3+

经典布局

1. 圣杯布局

定义：常见的三栏式布局——两边等宽，中间自适应的三栏布局

2. 双飞翼布局

定义：双飞翼布局与圣杯布局相似。只不过少了 relative 与 left、right 的步骤和共同的元素，主元素多了层父元素

圣杯布局、双飞翼布局

3. 瀑布流布局

深度解析瀑布流布局

4. 三栏布局的实现及优点

布局方案	实现	优点	缺点
Float布局	左右中三列，左列左浮动，右列右浮动，中间列设置左右margin	比较简单，兼容性也比较好	浮动元素脱离文档流，使用的时候只需要注意一定要清除浮动
Position布局	左中右三列（无顺序），根据定位属性去直接设置各个子元素位置		元素脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，有效性和可使用性比较差
Table布局	左中右三列，父元素display: table;子元素display: table-cell;居中子元素不设宽度
Flex布局	左中右三列，父元素display: flex;两侧元素设宽；居中子元素flex: 1;		存在IE上兼容性问题，只能支持到IE9以上
Grid布局	左中右三列，父元素display: grid;利用网格实现		兼容性不好，IE10+上支持，而且也仅支持部分属性

BFC

BFC详细介绍

定义：Block Formatting Contexts(块级格式化上下文)，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
通俗来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发BFC特性：

body根元素；
浮动元素(float除none以外的值)；
绝对定位元素；
display为inline-block、table-cell、flex；
overflow除了visible以外的hidden、auto、scroll

行内元素和块级元素

常见的块级元素：div、p、h1~h6、ul、li、table
常见的行内元素：span、img、input、a、button、select

行内元素会在一条直线上排列(默认宽度只与内容有关)，块级元素各占据一行
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或其他行内元素
行内元素与块级元素属性的不同，主要是盒模型上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

css盒模型

页面是由一个个盒模型组成的，每个 HTML 元素都可以叫盒模型，盒模型由内而外包括：边距(margin)，边框(border)，填充(padding)，内容(content)。它在页面占据的实际宽度是margin + border + padding + content 的宽度相加
盒模型分为标准盒模型和IE的盒模型
1. 标准盒模型：盒模型的大小是content的大小（box-sizing:content-box|border-box|inherit）
2. IE盒模型：盒模型的大小是 content+border+padding 的大小

Flex布局

弹性布局，用来为盒模型提供最大的灵活性

flex-direction:决定主轴的方向(即项目的排列方向)。row|row-reverse|column|column-reverse
flex-warp:默认情况下，项目都排列在一条线上。定义如果一条轴线上排不下，如何换行。nowarp|warp|warp-reverse
flex-flow:是flex-direction和flex-warp属性的简写形式，默认值为row nowarp;
justify-content:定义了项目在主轴上的对齐方式。flex-start|flex-end|center|space-between|space-around
align-items:定义项目在交叉轴上如何对齐。flex-start|flex-end|center|baseline|stretch
align-content:定义了多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。flex-start|flex-end|center|space-between|space-around|stretch

浮动中高度塌陷

原因：父元素在没有设置高度的情况下，其子元素浮动后，脱离文档流，则父元素处于塌陷状态；因为子元素浮动后是不占据父元素的位置空间的。

清除浮动：

clear清除浮动(添加空div方法)，在浮动元素下方添加空div，并给该元素写css样式(clear:both;height:0;overflow:hidden;)
给浮动元素父元素添加高度
父级元素同时浮动
父级设置inline-block，其margin:0 auto失效
利用br标签的clear属性
给父元素添加overflow:hidden清除浮动
after伪元素清除浮动
父类添加 clearfix 类

CSS中 transition 和 animate 有何区别？

transition 一般是用来过渡的，没有时间轴的概念，通过事件触发(一次)，没有中间状态(只有开始和结束)
animate 是做动效，有时间轴的概念(帧可控)，可以重复触发和有中间状态
过渡的开销比动效小，前者用于交互比较多，后者用于活动页多

CSS3新特性

更多内容 CSS3有哪些新特性

选择器(:last-child，:first-child，:nth-child(n))
背景和边框(background-size，background-origin；border-radius/box-shadow)
文本效果(文本阴影：text-shadow；换行规则：word-break; )
2D/3D转换
过渡效果(transition)/动画(animation)
变形(transform)：旋转 rotate，移动 translate，缩放 scale，扭曲 skew，矩阵 matrix

CSS3 硬件加速(GPU 加速)

此处内容来自CSS3硬件加速

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能

CSS 中的以下几个属性能触发硬件加速：

transform
opacity
filter
will-change

如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速

.element {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);
}

要注意的问题
（1）过多地开启硬件加速可能会耗费较多的内存，因此什么时候开启硬件加速，给多少元素开启硬件加速，需要用测试结果说话
（2）GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊

link 和 import的区别

区别	link	@import
从属关系	link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等	@import 是 CSS 提供的语法规则，只有导入样式表的作用
加载顺序	加载页面时，link 标签引入的 CSS 被同时加载	@import 引入的 CSS 将在页面加载完毕后被加载
兼容性	link标签作为 HTML 元素，不存在兼容性问题	@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别
DOM可控性	可以通过 JS 操作 DOM ，插入link标签来改变样式	由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
权重	link引入的样式权重大于@import引入的样式此处内容详解（link和@import的区别）

前端常见的布局方式

布局方式	优点	缺点
静态布局(固定宽高)	简单	尺寸固定
弹性布局(flex)	适应性强，随意按照宽度、比例划分元素的宽高，轻松改变元素的显示顺序，网页布局实现快捷，维护起来更加容易	浏览器兼容性较差，只能兼容到IE9及以上
自适应布局(为不同的屏幕分辨率定义的布局，@media媒体查询技术)	对网站的复杂程度兼容性更大，代码执行效果更高效，测试时更加容易、运营相对更加精准	增加开发成本，流程比较繁琐
流式布局(宽高用百分比，按屏幕分辨率调整，布局不发生变化)	尽可能的适应各种分辨率	屏幕大小变化时，页面元素也随之变化但是布局不变，如果屏幕太大或太小都会布局时元素无法正常显示
响应式布局(适应布局和流式布局的综合方式)	适应pc端和移动端，如果有足够的耐心，页面效果会很完美	只能适应主流的宽高，设计更需要多个版本，工作量增大
浮动布局	兼容性比较好	浮动带来的影响比较多，页面宽度不够的时候会影响布局
定位布局	很快捷，配合js使用很方便	绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的

Persiguiendo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试基础点——CSS篇（一）

文字单行/多行溢出显示省略号，px、em和rem，选择器，伪类/伪元素，选择器权重，水平垂直居中，经典布局，BFC，行内元素和块级元素，css盒模型，Flex布局，浮动高度塌陷，transition/animate，css3新特性，css3硬件加速，link和@import，前端常见布局方式
复制链接

扫一扫

专栏目录