CSS 基础

CSS

前端基础

发布日期: 2022-08-15

更新日期: 2022-11-02

文章字数: 5.9k

阅读时长: 22 分

阅读次数:

1. 布局

响应式布局，媒体查询 + 百分比布局 + rem，以及 rem 和 em 的区别

流式布局

知道栅格布局吗？原理是什么？

flex布局, flex-direction flex-grow flex-shrink flex flex-wrap

做过移动端吗？用到什么适配方法？

flex布局的意义，再详细介绍

CSS实现中间自适应，两边固定300px(手写代码)

flex：1 表示什么？

响应式布局

随着互联网时代的发展，我们对网页布局有了新的要求，例如我们可能是通过手机或者电脑来看网页的，而手机和电脑的大小和分辨率都是不一样的，那么就要要求页面能够在不同的设备上呈现相同的效果。因此，一个全新的概念—响应式布局应运而生。
响应式网页设计是一种网页设计的技术做法，该设计可以使网站在不同的设备上浏览时对应不同分辨率都有适合的呈现，减少用户进行缩放，平移等操作。真正的响应式设计方法不仅仅是根据可视化区域的大小改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页进行完美布局的一种显示机制，用一套代码解决几乎所有设备的页面展示问题。

标准文档流（padding+margin+负margin）+浮动 float +定位

定义：标准文档流就是元素排版过程中，元素会默认的自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。

像素：

像素分为两种类型：css 像素和物理像素。

css像素：在js或者css代码中使用的px单位就是指的是css像素；

物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的；

视口：

（1）布局视口

布局视口定义了 pc 网页在移动端的默认布局行为，因为通常 pc 的分辨率较大，布局视口默认为 980px。也就是说在不设置网页的 viewport 的情况下，pc 端的网页默认会以布局视口为基准，在移动端进行展示。因此我们可以明显看出来，默认为布局视口时，根植于 pc 端的网页在移动端展示很模糊。

（2）视觉视口

视觉视口表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。视觉视口的定义，就像拿着一个放大镜分别从不同距离观察同一个物体，视觉视口仅仅类似于放大镜中显示的内容，因此视觉视口不会影响布局视口的宽度和高度。

（3）理想视口

理想视口或者应该全称为“理想的布局视口”，在移动设备中就是指设备的分辨率。换句话说，理想视口或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。

单位转换

在不缩放的情况下，CSS 像素=物理像素/分辨率（也叫 DPR（Device pixel ratio，设备像素比））

1rem = font-size(HTML 元素)

vw: 相对于视窗的宽度（视窗宽度为 100 vw）

vh: 相对于视窗的高度（视窗高度为 100 vh）

vmin：相对于视口*较小尺寸的 1％

vmax：相对于视口*较大尺寸的 1％

%：相对于父元素（一般情况下）

1px = (1/布局视口) * 100 vw

Reference👉几种常用的响应式布局解决方案对比(媒体查询、百分比、rem和vw/vh）_zsl888822的博客-CSDN博客

实现方案：

（1）媒体查询

使用 @media 媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。

缺点：

在浏览器大小改变时，需要改变的样式太多，多套样式代码改起来很繁琐。

（2）百分比布局（流式布局）

通过百分比单位 “ % “ 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。

缺点：

（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。；
（2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

（3）rem布局

首先 rem 相对于根（html）的 font-size 大小来计算。简单的说它就是一个相对单例如：font-size: 10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度

缺点：

①目前 ie 不支持，对 pc 页面来讲使用次数不多；
②数据量大：所有的图片，盒子都需要我们去给一个准确的值才能保证不同机型的适配；
③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

（4）通过vw/vh来实现自适应

css3 中引入了一个新的单位 vw/vh，与视图窗口有关，vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度。

（5）flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，指定容器 display: flex 即可。简单的分为容器属性和元素属性。

容器的属性：

flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow： .box { flex-flow: || ; }
justify-content：对齐方式，水平主轴对齐方式
align-items：交叉轴上子项的对齐方式；
align-content：针对交叉轴上每一行的子项整体的对齐方式；

项目的属性（元素的属性）：

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0。
flex-grow 属性：这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例，默认为 0。
flex-shrink 属性：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis 属性：指定了 flex 元素在主轴方向上的初始大小。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖。
align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局。

（5） rem 和 em 的区别

em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于 em 和 rem 的区别一句话概括：em 相对于父元素，rem 相对于根元素。

grid 栅格布局

定义：gird 布局即网格布局，一种新的 css 布局模型，擅长将一个页面划分为几个主要的区域，以及定义这些区域的大小位置，层次等关系，是 css 唯一的二维布局。

flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

使用：我们通过在元素上声明 display:grid 或者 display:inline-grid 来创建一个网格容器，这个元素所有的直系子元素将会成为网格项目。网格轨道：grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。grid-auto-flow 属性控制着自动布局算法怎么样运行，精确指定在网格中被自动布局的元素怎么样排列，默认的放置顺序是先行后列。justify-items 属性设置单元格的内容的水平位置，align-items 设置单元格的垂直位置

References：

2. 垂直水平居中方式

行内元素：

可以很多个元素在一行显示，不可以设置宽高、边距；

高度一般由元素内部的字体大小决定，宽度由内容的长度控制；

a, img, span

块级元素：

独占一行

元素的高度、宽度、行高和边距都是可以设置的。元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）。

h1~6, div, p

行内块级元素（inline-block）

可以设置宽高、边距

可以和其他行内块级元素或行内元素放在一行

如果已经给一个div的position设置了absolute，如何使他变得水平居中？（left: 50%, margin-left: -width or transform: translateX(-50%)）

margin:0 auto是用来做什么的？—水平居中

一个容器里只有一个元素，怎么让它右对齐？（浮动、绝对定位、flex）

面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？ | web前端面试 - 面试官系列 (vue3js.cn)

3. 移动端适配方式

做过移动端吗？用到什么适配方法？

1. 媒体查询

通过 CSS 的 @media 媒体查询设置不同的 style。通过媒体查询，我们可以根据不同屏幕设置不同样式，这样就可以实现不同屏幕的适配。

link 元素中的 CSS 媒体查询，不同屏幕加载不同样式文件：

<link rel="stylesheet" media="(max-width: 500px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 980px)" href="pc.css" />

CSS 样式表中的媒体查询：

@media only screen and (max-width: 414px){
  html{
    font-size: 64px;
  }
}
@media only screen and (max-width: 375px){
  html{
    font-size: 58px;
  }
}
@media only screen and (max-width: 360px){
  html{
    font-size: 56px;
  }
}
@media only screen and (max-width: 320px){
  html{
    font-size: 50px;
  }
}

2. 动态rem方案

rem是一个相对长度单位，其大小由根元素字体大小决定。

我们可以采用 rem 为单位设置元素大小。对于不同屏幕，我们只需要动态修改根元素字体大小，元素大小就会同比例改变，从而做到页面的自动适配效果。例如，假设设计稿宽度为 750px，元素A宽度为 300px，在屏幕宽度为 375pt 的屏幕中，设置根元素字体大小为 75px，则元素A宽度为 4rem；在屏幕宽度为 750pt 的屏幕中，只需将根元素字体大小改为 150px，不需要改变元素A的大小，就可以做到页面适配。手淘团队的 flexible 方案就是根据以上原理实现的

根据不同屏幕修改根元素 font-size 大小，一般设置为屏幕宽度的十分之一。

3. Viewport 方案（推荐）

上面介绍的动态 rem 方案，其本质是让页面元素大小跟随屏幕宽度的变化成比例缩放。CSS Viewport units （视口单位）正是一种相对于屏幕宽高的一种长度单位，并且兼容性越来越好。视口单位有：vw、vh、vmin和vmax。vw 单位表示根元素宽度的百分比，1vw 等于视口宽度的1%。

**References: **👉移动端适配的5种方案 - 掘金 (juejin.cn)

4. CSS选择器

CSS选择器、选择器优先级、子选择器：选第n个child应该怎么写？

选择器优先级

选择器

通配符选择器(*)
id选择器(#myid)
标签选择器(div, h1,p)
标签属性选择器(a[rel=”external”])
- 根据一个元素上的某个标签的属性的存在以选择元素的不同方式
```
a[title] {
    
}
a[href="https://example.com"] {
    
}
```
类选择器(.myclass)
伪类选择器(a:hover, li:nth-child)
- :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
```
p:nth-child(n) {
    ...
}
```
相邻兄弟选择器（h1 + p）
子选择器(ul > li)
- ul的第一个后代中的li
后代选择器(li a)
- li的所有后代中的a

优先级：

!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高；样式表的来源相同时：
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

面试官：css选择器有哪些？优先级？哪些属性可以继承？ | web前端面试 - 面试官系列 (vue3js.cn)

5. CSS position属性

css各种定位，每种定位相对于哪，每种定位的特点

position有几种常见的属性？

css position属性有哪些？区别是什么？详细说说fixed的定位方式？

position 属性的值有哪些及其区别

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此==不占据空间==。 Fixed 定位的元素和其他元素重叠。

相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然==占据原来的空间==。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此==不占据空间==。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

粘性定位的元素是依赖于用户的滚动，在position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 **position:fixed;**，它会固定在目标位置。

默认定位 Static：默认值。没有定位，元素出现在正常的流中（静态定位的元素不会受到 top, bottom, left, right影响。）。 inherit: 规定应该从父元素继承 position 属性的值。

6. CSS盒子模型

css两种盒子模型的宽度。

面试官：说说你对盒子模型的理解? | web前端面试 - 面试官系列 (vue3js.cn)

7. CSS画三角形，画圆

css实现三角形！（我答的transform: rotate(45deg)然后在父元素overflow: hidden，插问了rotate的旋转中心怎么确定。总之是没答到正解border的点子上）

7.1 画三角形

（1）border

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div{
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;

（2）clip-path裁剪

clip-path的语法有4种：

inset（定义矩形）

circle（定义圆）

ellipse（定义椭圆）

polygon（定义多边形）

.triangle {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 对应三角形的三个顶点 */
      clip-path: polygon(0 100%, 50% 0, 100% 100%); 

    }

7.2 画圆

（1）border-radius

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: cyan;
}

（2）clip-path

.circle {
      width: 100px;
      height: 100px;
      background-color: pink;
      clip-path: circle(50%);
    }

8. CSS动画

9. 单行文本省略，多行文本省略分情况实现

1 单行文本省略

文本在一行内显示，超出部分以省略号的形式展现。

实现方式涉及的css属性：

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

overflow设为hidden，普通情况用在块级元素的外层，隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础

text-overflow属性值有如下：

clip：当对象内文本溢出部分裁切掉
ellipsis：当对象内文本溢出时显示省略标记（…）

text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

<style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<p> 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p>

2 多行文本省略

多行文本溢出的时候，我们可以分为两种情况：

基于高度截断
基于行数截断

基于高度截断

伪元素 + 定位

核心的css代码结构如下：

position: relative: 为伪元素绝对定位
overflow: hidden: 文本溢出限定的宽度就隐藏内容）
position: absolute: 给省略号绝对定位
line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
height: 40px：设定当前元素高度
::after {} ：设置省略号样式

<style>
    .demo {
      position: relative;
      line-height: 20px;
      height: 40px;
      overflow: hidden;
      background-color: pink;
    }

    .demo::after {
      content: "...";
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0 20px 0 10px;
    }
  </style>


<body>
  <div class='demo'>
    力拔山兮气盖世⑵，时不利兮骓不逝⑶。骓不逝兮可奈何⑷，虞兮虞兮奈若何⑸！
  </div>
</body>

实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字

这种实现具有以下优点：

兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整

一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分

基于行数截断

纯css实现也非常简单，核心的css代码如下：

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

<style>
  p {
    width: 400px;
    border-radius: 1px solid red;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<p>
  这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
  这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p>

可以看到，上述使用了webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器，由于移动端大多数是使用webkit，所以移动端常用该形式

需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性

References

👉面试官：如何实现单行／多行文本溢出的省略样式？ | web前端面试 - 面试官系列 (vue3js.cn)

10 BFC(块级格式化上下文)

外边距塌陷产生的原因 -> 如何解决

BFC的概念

BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

BFC的原理布局规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反
BFC的区域不会与float box重叠
BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算高度
元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

如何创建BFC？

根元素，即HTML元素
float的值不为none
position为absolute或fixed
display的值为inline-block、table-cell、table-caption
overflow的值不为visible

BFC的使用场景

去除边距重叠现象
清除内部浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖

面试官：谈谈你对BFC的理解？ | web前端面试 - 面试官系列 (vue3js.cn)

CSS 工程化

elegantlee

https://elegantlee.github.io/2022/08/15/ji-zhu-chen-dian/qian-duan-ji-chu/css/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 elegantlee !

CSS

JavaScript 基础与进阶

记录 JavaScript 的基础用法以及进阶内容的深入理解

2022-08-15 前端基础

JavaScript

web性能的商业案例

2022-07-27 技术沉淀

web性能

1. 布局

响应式布局

grid 栅格布局

2. 垂直水平居中方式

3. 移动端适配方式

1. 媒体查询

2. 动态rem方案

3. Viewport 方案（推荐）

4. CSS选择器

5. CSS position属性

position 属性的值有哪些及其区别

6. CSS盒子模型

7. CSS画三角形，画圆

7.1 画三角形

7.2 画圆

8. CSS动画

9. 单行文本省略，多行文本省略分情况实现

1 单行文本省略

2 多行文本省略

基于高度截断

伪元素 + 定位

基于行数截断

References

10 BFC(块级格式化上下文)

CSS 工程化

你的赏识是我前进的动力