Interviews

# CSS

# 盒子模型

# IE盒子模型

又称“怪异盒模型”

image-20191226163853624

box-sizing: border-box;
margin: 10px;
width: 100px;
height: 100px;
padding: 10px;
//盒子的宽度为100px

width=内容宽度(不是width，它是变化的)+padding+border

# W3C盒子模型

又称“标准盒模型”

image-20191226163743831

box-sizing: content-box;	// 默认
margin: 10px;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
//盒子宽度=padding*2+width+border*2=130px

width=内容宽度

# 内块级元素

# block（块级元素）

  1. 一个块级元素独占一行。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下，是它本身父容器的100%。

# inline（内联元素）

  1. 和其他元素都在一行上
  2. 元素的高度、宽度及竖直方向上的 padding 和 margin不可设置。
  3. 元素的宽度就是它内容的宽度，不可改变。

# inline-block（内联块状元素）

  1. 和其他元素都在一行上。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

# CSS选择器

# 样式继承

# 可继承

font-size, font-family, color，ul，li，dl，dt，dd；

# 不可继承

border, padding, margin, width, height

# 权重计算

  1. 同权重情况下样式定义最近者为准。
  2. 继承得到的样式的优先级最低。
  3. 元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000。

# CSS伪类与伪元素

# 伪类

功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

核心是用来选择那些不能够被普通选择器选择的文档之外的元素

:first-child :link :visited :hover :active :focus :lang

# 伪元素

伪元素用于设置元素指定部分的样式。

伪元素对元素中的特定内容进行操作，它控制的内容实际上和元素是相同的， 但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

核心就是需要创建通常不存在于文档中的元素

::first-line ::first-letter ::befoe ::after

# 几个重要的属性

# position

  • relative：相对定位，相对于自身位置进行定位。
  • absulute：绝对定位，相对于position不为static的第一个父级元素进行定位。
  • fixed：固定定位，相对于浏览器窗口进行定位。
  • inherit：继承父级元素position属性值。
  • static： 默认值，即没有定位，仍为文档流。
  • sticky：粘性定位。用于滑动中固定某一元素，这个目前有些兼容性问题。

# overflow

  • scroll：出现滚动条
  • auto：内容溢出时出现滚动条
  • visible：溢出的内容出现在父元素之外 (默认)
  • hidden：溢出是隐藏

# CSS动画

# transition

# 属性

  • transition-property // 指定CSS属性的name，如width。[none,all,css属性名]
  • transition-duration // 周期时间 [0, Numbers]
  • transition-timing-function // 转速曲线 [linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)]
    • linear: 匀速，等于 cubic-bezier(0,0,1,1)
    • ease: 慢速开始，然后变快，然后慢速结束。cubic-bezier(0.25,0.1,0.25,1)
    • ease-in: 慢速开始
    • ease-out: 慢速结束
    • ease-in-out: 慢速开始和结束
    • cubic-bezier(n,n,n,n)： cubic-bezier 函数中定义自己的值。取值为[0,1]
  • transition-delay // 延迟时间 [0, Numbers]

# 例子

.box {
    height: 50px;
    width: 800px;
    background: #7456e9;
    transition: all 1s ease-in-out;
}

.box:hover {
    width: 800px;
    height: 400px;
    background: #d44f01;
}

# animation

# 属性

# 例子

# transform

# CSS3新特征

# 各种css选择器

x:first-of-type → 选择属于其父元素的首个 <x> 元素的每个 <x> 元素
x:last-of-type → 选择属于其父元素的最后一个 <x> 元素的每个 <x> 元素
x:only-of-type 选择属于其父元素唯一的 <x> 元素的每个 <x> 元素
x:only-child 选择属于其父元素的唯一子元素的每个 <x> 元素
x:nth-child(1) 选择属于其父元素的第一个子元素的每个 <x> 元素

:enabled 每个已启用的元素（多用于表单元素 例如input）
:disabled 控制表单控件的禁用状态
:checked，单选框或复选框被选中
:before在元素之前添加内容（可用来做清除浮动）
:after在元素之后添加内容

# 圆角border-radius

# 渐变

# 线性渐变

# 概念

Linear Gradients，向下/向上/向左/向右/对角方向渐变。

# 语法
background-image: linear-gradient(direction, color1, color2, ...);//方向默认从上到下
//1、 direction——to right(从左到右)=90deg
//2、 direction——to bottom right(从左上角到右下角)
//3、 direction——Ndeg 角度

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));//4、带透明的渐变

image-20191221115243749

# 径向渐变

# 概念

Radial Gradients。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

# 语法
background-image: radial-gradient(red, yellow, green);//从中心点向外均匀渐变

background-image: radial-gradient(red 5%, yellow 15%, green 60%);//从中心点向外不均匀渐变

background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

# 阴影

# box-shadow

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
//水平阴影 垂直阴影 模糊 阴影尺寸 颜色  外阴影转到内阴影

# text-shadow

css-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
//水平阴影 垂直阴影 模糊 阴影尺寸 颜色  外阴影转到内阴影

# CSS动画

# 文本效果

# text-shadow

# text-overflow

文本溢出属性指定应向用户如何显示溢出内容

//一行添加省略号
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

# word-break

word-break: break-all;//单词拆分换行

# 2D转换

# 水平垂直居中

# 内联元素

.box{
  text-align:center /*水平居中*/  
	height:100px;  /*垂直居中  */
	line-height:100px; 
}

.box{
  text-align:center 水平居中  
	display:table-cell; 垂直居中  
	vertical-align:middle; 
}

//3、块级元素也水平垂直居中后
.box:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

# 块级元素

# 知子元素宽高

.box{
   width: 100px;
   height: 100px;
}
# absolute+负margin
.parent {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
# absolute+calc
.parent {
   position: relative;
}
.box {
   position: absolute;;
   top: calc(50% - 50px);
   left: calc(50% - 50px);
}

# 不知宽高

# absolute+margin auto
.parent {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
# absolute+transform
.parent {
   position: relative;
}
.box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
# table-cell
.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}
# flex
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

# 单位长度

# px

​ 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

# em

​ em是相对长度单位。

  • 在 font-size 中使用是相对于父元素的 font-size 大小，比如父元素 font-size: 16px，当给子元素指定 font-size: 2em 的时候，经过计算后它的字体大小会是 32px；
  • 在其他属性中使用是相对于自身的字体大小，如 width/height/padding/margin 等；

# rem

​ rem 是CSS3新增的一个相对单位（相对于根元素的）

# vw vh

对于视口宽高的百分比值，1vw等于视口宽度的1%。

# DPR

DPR是物理像素和css逻辑像素的比例，DPR = 物理像素/css逻辑像素，可通过window.devicePixelRatio来获取DPR。

# 像素密度（DPI/PPI）

像素密度也叫显示密度或者屏幕密度，像素密度 = 屏幕对角线的像素尺寸 / 物理尺寸。

# 清除浮动

  1. 触发父元素BFC，条件如下其一：

    1. float不为none。
    2. overflow不为visible
    3. position不为static
    4. display:table-cell/inline-block/flex/grid/flow-root

  2. 给父元素设置高度。

  3. 在浮动的子元素后面添加一个空元素设置clear：both。

.clearfix {
    zoom: 1;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

在父元素的最后一个子元素后面生成一个内容为空的块级元素，然后通过 clear 将这个伪元素移动到所有它之前的浮动元素的后面。

c65efbcef46ace60dc855f9ddf113fe6

# BFC

# 什么是BFC

又称块级格式化上下文。它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。

# 产生条件

父元素：OFPD

  1. float不为none。
  2. position:absolute/fixed
  3. overflow:不为visible
  4. display:table-cell / inline-block / table-caption / flex / inline-flex

# 作用

在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响。

  1. 解决外边距垂直方向重叠问题。
  2. 解决浮动元素的父元素高度塌陷问题。(原理：计算 BFC 的高度时，浮动元素也参与计算。只要触发父元素的 BFC 即可)
  3. 解决自适应布局问题/文字环绕图片问题。（原理：BFC 的区域不会和浮动区域重叠）
// 相邻margin重叠方向重叠——在其中一个元素外面嵌套一个触发BFC的div
<div class="a">5</div>
<div class="bfc">
  <div class="a">555</div>
</div>

// 嵌套margin重叠——父元素触发bfc即可
<div class="bfc">
  <div class="a">555</div>
</div>

# li与li之间有看不见的空白间隔

![image-20220411213413118](/Users/zhoufeng/Library/Application Support/typora-user-images/image-20220411213413118.png)

# 产生原因

浏览器会把 inline 内联元素间的空白字符（空格、换行、Tab 等）渲染成一个空格。为了美观，通常是一个

  • 放在一行，这导致
  • 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

    • # 解决方案

    1. li标签设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
    2. ul标签设置font-size:0。不足：ul中的其他字符尺寸也被设为 0，需要额外重新设定其他字符尺寸，且在 Safari 浏览器依然会出现空白间隔。

    # less、sass、stylus区别

    # 变量

    1. sass声明变量必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。
    2. less 声明变量用『@』开头，其余等同 sass。
    3. Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。

    # 作用域

    1. sass：三者最差，不存在全局变量的概念。
    2. less：最近的一次更新的变量有效，并且会作用于全部的引用！
    3. stylus：sass 的处理方式和 stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效；

    # 继承

    Stylus：Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效。

    # 导入@import

    Sass 中只能在使用 url() 表达式引入时进行变量插值

    $device: mobile;
@import url(styles.#{$device}.css);

    Less 中可以在字符串中进行插值

    @device: mobile;
@import "styles.@{device}.css";

    Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现

    device = "mobile"
@import "styles." + device + ".css"

    # link与@import

    1. 加载内容。link除了可以加载css外，还可以加载别的文件，如rss、rel。
    2. 加载先后。当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载。
    3. 引入方式。link可以使用 js 动态引入，@import不行。

    # 文本省略号换行

    # 单行

    // WHO
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap

    # 多行

    display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow : hidden;

    # 经典布局

    # 单列布局

    # 两列布局

    # 左列定宽，右列自适应

    # float+margin
    .left{
  float: left;
  width: 100px;
  height: 100%;
  background: rebeccapurple;
}
.rigth{
  height: 100%;
  margin-left: 100px; /*大于等于#left的宽度*/
  background: blue;
}
    # float+overflow
    .left {
  width: 200px;
  background: #8e44ad;
  float: left;
  height: 500px;
}
.right {
  background: #ff9e02;
  overflow: hidden;
  height: 500px;
}
    # table
    .parent {
  display: table;
  width: 100%;
}
.left {
  width: 200px;
  background: #8e44ad;
  height: 500px;
  display: table-cell;
}
.right {
  background: #ff9e02;
  height: 500px;
  display: table-cell;
}
    # absolute
    .parent {
  position: relative;
}
.left {
  width: 200px;
  background: #8e44ad;
  height: 500px;

  position: absolute;
  left: 0;
}
.right {
  background: #ff9e02;
  height: 500px;

  position: absolute;
  right: 0;
  left: 200px;
}
    # flex
    .parent {
  display: flex;
}
.left {
  width: 200px;
  background: #8e44ad;
  height: 500px;
}
.right {
  background: #ff9e02;
  height: 500px;

  flex: 1;
}
    # grid
    .parent {
  display: grid;
  grid-template-columns: 200px auto;
}
.left {
  width: 200px;
  background: #8e44ad;
  height: 500px;
}
.right {
  background: #ff9e02;
  height: 500px;
}

    # 三栏布局

    左右容器固定，中间容器自适应。

    # 双飞翼

    <div class="header"></div>
<div class="parent">
  <!--    必须放在前面-->
  <div class="center"> 
    <div class="center-box">center</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer"></div>

    .header {
  background: #00ACED;
  height: 50px;
}
.center {
  float: left;
  width: 100%;
  background: #548c3c;
  height: 500px;
}
.center-box {
  height: 500px;
  margin: 0 200px; // 等于left和right的宽度，多出的为center的margin
}
.left {
  background: #8e44ad;
  height: 500px;
  float: left;
  width: 200px;
  margin-left: -100%;
}
.right {
  background: #ff9e02;
  height: 500px;
  width: 200px;
  float: left;
  margin-left: -200px; // 值等于自身宽度
}
.footer {
  clear: both; // 清除浮动
  height: 50px;
  background: #007ee6;
}

    # 圣杯

    <div class="header"></div>
<div class="parent">
  <!--    必须放在前面-->
  <div class="center">center</div>
  <div class="left">122444444444443</div>
  <div class="right">7889</div>
</div>
<div class="footer"></div>

    .header {
  background: #00ACED;
  height: 50px;
}
.parent {
  height: 500px;
  padding: 0 120px 0 200px;
}
.left {
  background: #8e44ad;
  height: 500px;
  width: 200px;

  float: left;
  position: relative;
  left: -200px;
  margin-left: -100%;
}
.center {
  float: left;
  width: 100%;
  background: #548c3c;
  height: 500px;
}
.right {
  background: #ff9e02;
  height: 500px;
  width: 200px;

  position: relative;
  left: 120px;
  float: left;
  margin-left: -200px;
}
.footer {
  height: 50px;
  background: #007ee6;
}

    # flex布局

    实际高度会根据内容自适应，三栏高度统一。Flex布局在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。

    .container{
    display: flex;
}
.left{
    flex-basis:200px;
    background: green;
}
.main{
    flex: 1;
    background: red;
}
.right{
    flex-basis:200px;
    background: green;
}

    # position布局

    缺点： 三栏高度不统一

    .left,.right{
    position: absolute;
    top: 0;
    background: red;
}
.left{
    left: 0;
    width: 200px;
}
.right{
    right: 0;
    width: 200px;
}
.main{
    margin: 0 200px ;
    background: green;
}

    # float+margin

    这种方法的缺点是三栏高度不统一，center区域的内容要在最后渲染。

    .left{
    float:left;
    width:200px;
    background:red;
}
.main{
    margin:0 200px;
    background: green;
}
.right{
    float:right;
    width:200px;
    background:red;
}

    # gird

    # 重绘与回流

    # 重绘

    改变外观而不影响布局的操作叫重绘。比如，color、background-color、visibility。

    # 回流

    布局或者几何属性需要改变的操作称为回流。回流必定会发生重绘，重绘不一定会引发回流。

    # 减少重绘回流的方案

    1. 避免使用Table布局
    2. 避免使用CSS表达式
    3. 使用visibility代替display:none
    4. css3 硬件加速，transform、opacity、filters，开启后，会新建渲染层
    5. 避免连续多次修改，可通过合并修改，一次触发
    6. 通过节流和防抖控制触发频率

    # CSS遗留问题

    # display:inline-block

    # position、display、float

    # 1px问题

    Retina 显示屏比普通的屏幕有着更高的分辨率，所以在移动端的 1px 边框就会看起来比较粗，为了美观通常需要把这个线条细化处理。处理方法很多，其中一种是通过伪类和 transform 实现的相对完美的解决方案。

    // 只设置单条底部边框
.scale-1px-bottom {
    position: relative;
    border:none;
}
.scale-1px-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

    # 相邻两个box的margin重叠

    # 各种小技巧

    # 禁止iOS识别长数字为电话

    <meta name="format-detection" content="telephone=no" />

    # 禁止用户选择文字

    user-select: none;

    # 各种区别

    # rgba和opacity

    **rgba: ** 只作用于元素的颜色或者背景色

    **opacity: ** 作用于元素，以及元素内的所有内容的透明度

    # 图形题

    # 三角形

    .triangle {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}


.triangle::after {
    content: '';
    position: absolute;
    border: 50px solid transparent;
    border-bottom-color: pink;
}

    # 根据设计稿进行移动端适配

    1. 适配不同的像素密度：针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真。
    2. 适配不同屏幕大小：为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。

    # z-index失效

    z-index 值越大就越是在上层。z-index 元素的position属性需要是非static。

    # CSS兼容性问题

    # 浏览器默认边距不一样

    *{
    margin:0;
    padding:0;
}

    # Chrome中文界面下默认会将小于12px的文本强制为12px

    加入css属性 -webkit-text-size-adjust：none;

    # 超链接访问过后hover样式就不出现

    改变css属性的排列属性：L-V-H-A

    # CSS优化

    1. 避免使用 !important
    2. 不滥用浮动
    3. 不滥用web字体
    4. 少使用id选择器
    5. 值为0时不需要任何单位
    Last Updated: 11/1/2022, 11:24:21 AM