前端面试基础点——CSS篇(一)

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

  • 单行文本
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

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

选择器

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

伪类 / 伪元素

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

  • 常用伪类
选择器 描述
:active 在用户激活(例如点击)元素的时候匹配
:blank 匹配空输入值的 元素
:checked 匹配处于选中状态的单选或者复选框
:empty 匹配除了可能存在的空格外,没有子元素的元素
:first 匹配分页媒体的第一页
:first-child 匹配兄弟元素中的第一个元素
:focus 当一个元素有焦点的时候匹配
:hover 当用户悬浮到一个元素之上的时候匹配
:invalid 匹配诸如 的位于不可用状态的元素
: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 匹配诸如 元素的处于可用状态的元素
: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">123123div>
	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">123123div>
    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">123123div>
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特性:

  1. body根元素;
  2. 浮动元素(float除none以外的值);
  3. 绝对定位元素;
  4. display为inline-block、table-cell、flex;
  5. 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

浮动中高度塌陷

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

清除浮动:

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

CSS中 transition 和 animate 有何区别?

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

CSS3新特性

更多内容 CSS3有哪些新特性

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

CSS3 硬件加速(GPU 加速)

此处内容来自CSS3硬件加速

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

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

  1. transform
  2. opacity
  3. filter
  4. 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使用很方便 绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流,这就导致了这种方法的有效性和可使用性是比较差的

你可能感兴趣的:(CSS,css)