关于前端:jsliang-求职系列-42-CSS-基础

1次阅读

共计 6172 个字符，预计需要花费 16 分钟才能阅读完成。

不折腾的前端，和咸鱼有什么区别

目录
一目录
二前言
三 DIV + CSS 布局的优缺点
四如何解决 a 标点击后 hover 事件生效的问题？
五响应式
六脱离文档流
七块级格式化上下文（BFC）
八盒子模型
九 link 和 @import 区别
十渐进增减和优雅降级
十一 CSS 实现垂直居中
十二 CSS 单位
十三 CSS 设置暗藏元素
十四 CSS 选择器
十五层叠上下文
十六 dispaly 和 position
16.1 display
16.2 position
十七 CSS3
17.1 新个性
17.2 Flexbox 弹性盒布局模型
十八 CSS 优化
18.1 CSS 匹配规定
18.2 CSS 的 style 标签地位
十九题目
19.1 BFC
19.2 CSS 盒模型

CSS 根底有很多内容，须要细细了解，毕竟有时候用得不多，除非你是做挪动端或者交互比拟多的我的项目。

长处：

代码精简，且构造与款式拆散，易于保护
代码量减少了，缩小了大量的带宽，页面加载的也更快，晋升了用户的体验
对 SEO 搜索引擎更加敌对，且 H5 又新增了许多语义化标签更是如此
容许更多炫酷的页面成果，丰盛了页面
合乎 W3C 规范，保障网站不会因为网络应用的降级而被淘汰

毛病：

不同浏览器对 Web 规范默认值不同，所以更容易呈现对浏览器的兼容性问题。

扭转 a 标签 CSS 属性的排列程序：

link -> visited -> hover -> active

a:link：简写 a，未拜访的款式
a:visited：曾经拜访的款式
a:hover：鼠标移上去时的款式
a:active：鼠标按下的款式

在 CSS 中，如果对于雷同元素针对不同条件的定义，合适将最个别的条件放在最下面，顺次向下，保障最上面的是最非凡的条件（能够了解为款式笼罩）。

这样，浏览器显示元素的时候，才会从非凡到一半、逐级向上验证条件。

响应式网站设计（Responsive Web design）是一个网站可能兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查问（@media）检测不同的设施屏幕尺寸做解决。

益处：对某些数据的批改就能自动更新视图，让开发者不须要操作 DOM，有更多的工夫去思考实现业务逻辑。

文档流 ：将窗体自上而下分成一行一行，并在每行中按从左至右一次排放元素，成为文档流，也就一般流。

脱离文档流 ：脱离文档流的元素，将不再在文档流占据空间，而是沉没在文档流上方。

float: left/right：应用之后会脱离，然而其余盒子会盘绕该元素的四周。
position: absolute/fixed：absolute 为相对定位，脱离文档流之后还是会绝对于该元素的父类（做了 relative/absolute 定位的父类）进行偏移。而 fixed 就是齐全脱离文档流，绝对于 HTML（整个浏览器窗口）的模式展现。

BFC 布局规定 是指页面上一个隔离的独立容器，容器外部的子元素不会影响到里面的元素，反之里面的元素也不会影响容器外面的元素。

个性：

在 BFC 中，盒子从顶端开始垂直地一个接一个地排列
盒子垂直方向的间隔由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会产生重叠

外边距问题

<div style="width:100px; height:100px; margin-bottom:100px;"></div>
<div style="width:100px; height:100px; margin-top:200px;"></div>

这段代码产生的页面中，它们的边距是 200px，须要通过 BFC 解决边距问题。

主要用途：

革除元素外部浮动。overflow: hidden
解决外边距合并问题。创立 2 个不同 BFC，就不会产生 margin 重叠

产生 BFC 的条件：

根元素 html
float: left/right
position: absolute/fixed
display: inline-block/flex/grid
overflow: hidden

box-sizing: content-box。规范盒子，总宽度等于：width + padding + border + margin。
box-sizing: border-box。IE 盒子，总宽度等于：width + margin。IE 盒子的 width 蕴含了 width、padding 和 border 属性。

具体看：jsliang – 盒子模型

CSS 引入形式有：

内联：style 属性（style="color: red"）
内嵌：style 标签（<style></style>）
外链：link 标签（<link href="index.css">
导入：@import（@import url('index.css') 或者 @import 'index.css'）

link 和 @import 区别：

link 是 XHTML 标签，除了加载 CSS 外，还能够定义 RSS 等其余事务；@import 属于 CSS 领域，只能加载 CSS。
link 援用 CSS 时，在页面载入时同时加载；@import 须要页面网页齐全载入当前加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不反对。
link 反对应用 Javascript 管制 DOM 去扭转款式；而 @import 不反对。

要害的区别是他们所偏重的内容，以及这种不同造成的工作流程的差别。

优雅降级 ：一开始就构建残缺的性能，而后再针对低版本浏览器进行兼容。
渐进加强 ：针对低版本浏览器进行构建页面，保障最根本的性能，而后再针对高级浏览器进行成果、交互等改良和追加性能达到更好的用户体验。

区别：

优雅降级是从简单的现状开始，并试图缩小用户体验的供应
渐进加强则是从一个十分根底的，可能起作用的版本开始，并一直裁减，以适应将来环境的须要
降级（性能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保障其根基处于平安地带

办法一：Flex 布局（子元素是块级元素）

.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
}

.box-center{
  margin: auto;
  background-color: greenyellow;
}

办法二：Flex 布局

.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
  justify-content: center;
  align-items: center;
}

.box-center{background-color: greenyellow;}

办法三：相对定位实现（定位元素定宽定高）

.box {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: pink;
}

.box-center{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}

办法四：应用 transform

父盒子设置：display: relative

div 设置：

div {transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

px

px 是像素（pixel）的缩写，绝对长度单位，是网页设计罕用的根本根本单位，它是绝对于显示器屏幕分辨率而言的。

em

em 是绝对长度单位，绝对于对象内文本的字体尺寸（参考物是父元素的 font-size。

如果以后父元素的字体元素未设置，则绝对于浏览器的默认字体尺寸设置。

rem

rem 是绝对于 HTML 根元素的字体大小（font-size）来计算的长度单位。

如果你没有设置 HTML 字体大小，那么以浏览器默认为主，个别为 16px。

vw/vh

vw 和 vh 是绝对于 viewport – 绝对视口的宽度或者高度而定的。

一般来说：1vw = npx / 100，即浏览器宽度为 200px 的时候，1vw = 200px / 100，即 1vw = 2px。

display: none：彻底隐没，会导致浏览器回流和重绘，不能再触发点击事件。
visibility: hidden：元素暗藏，空间仍保留，会导致重绘，然而不能再触发点击事件。
opacity: 0：设置为通明，相当于它还在那里，然而你看不到，能够触发点击事件。

CSS 选择器及款式优先级：

在属性前面应用 !important 会笼罩页面任意地位定义的元素款式
作为 style 属性写在元素内的款式（行内款式）
id 选择器
类选择器 | 伪类选择器 | 属性选择器（前面款式笼罩后面款式）
标签选择器
通配符选择器
浏览器自定义款式

层叠上下文（stacking context），是 HTML 中一个三维的概念。在 CSS2.1 标准中，每个盒模型的地位是三维的，别离是立体画布上的 X 轴，Y 轴以及示意层叠的 Z 轴。

个别状况下，元素在页面上沿 X 轴 Y 轴平铺，咱们觉察不到它们在 Z 轴上的层叠关系。

而一旦元素产生重叠，这时就能发现某个元素可能笼罩了另一个元素或者被另一个元素笼罩。

触发条件 ：

根层叠上下文（HTML）
position
CSS3 属性
- flex
- transform
- opacity
- filter
- will-change
- -webkit-overflow-scrolling

层叠等级 ：层叠上下文在 Z 轴上的排序

在同一层叠上下文中，层叠等级才有意义
z-index 的优先级最高

div {display: none;}

inline：（默认）内联
none：暗藏
block：块显示
table：表格显示
inline-block：内联块

div {position: absolute;}

static：默认地位。不须要特地申明，不罕用。
relative：绝对定位。绝对于元素默认的地位进行定位，设置 top/left/right/bottom 后的元素仍占据空间。
absolute：相对定位。如果父元素设置了 position: absolute/relative，那么这个设置成立。它会依据上一个设置了 absolute/relative 的元素进行偏移。
fixed：固定定位。绝对于整个浏览器窗口进行定位，无论页面怎么滚动。
sticky：黏性定位。屏幕范畴内该元素地位不受影响，超出范围后，会变成 fixed，依据设置的 left/top 等属性成固定的成果。

RGBA 和透明度
background-image、background-origin(content-box/padding-box/border-box)、background-size、background-repeat
word-wrap：对长的不可分割单词换行，例如 word-wrap：break-word
文字暗影：text-shadow: 5px 5px 5px #FF0000;，对应程度暗影，垂直暗影，含糊间隔，暗影色彩
font-face 属性：定义本人的字体
圆角（边框半径）：border-radius 属性用于创立圆角
边框图片：border-image: url(border.png) 30 30 round
盒暗影：box-shadow: 10px 10px 5px #888888
媒体查问：定义两套 CSS，当浏览器的尺寸变动时会采纳不同的属性

该布局模型的目标是提供一种更加高效的形式来对容器中的条目进行布局、对齐和调配空间。

在传统的布局形式中，block 布局是把块在垂直方向从上到下顺次排列的；而 inline 布局则是在程度方向来排列。

弹性盒布局并没有这样外在的方向限度，能够由开发人员自在操作。

试用场景：弹性布局适宜于挪动前端开发，在 Android 和 IOS 上也完满反对。

防止适度束缚
防止后辈选择符
防止链式选择符
应用紧凑的语法
防止不必要的命名空间
防止不必要的反复
最好应用示意语义的名字。一个好的类名应该是形容他是什么而不是像什么
防止 !important，能够抉择其余选择器
尽可能的精简规定，你能够合并不同类里的反复规定

CSS 选择器的解析是从右向左解析的。

若从左向右的匹配，发现不合乎规定，须要进行回溯，会损失很多性能。

若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规定，则完结这个分支的遍历。

两种匹配规定的性能差异很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规定的性能都节约在了失败的查找下面。

页面加载自上而下，当然是先加载款式。

写在 body 标签后因为浏览器以逐行形式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器进行之前的渲染，期待加载且解析样式表实现之后从新渲染，在 Windows 的 IE 下可能会呈现 FOUC 景象（即款式生效导致的页面闪动问题）。

如果父元素都为浮动，不能解决父类高度塌陷问题的是：

A：给父元素增加 clear: both
B：给父元素增加 overflow: hidden
C：在浮动元素下方增加空 div，并增加款式 clear: both
D：设置父元素 :after {content: "", clear: both; display: block; overflow: hidden}

答案：B

依据以下代码，两个 div 元素垂直间距为 ()

<div style="width:100px; height:100px; margin-bottom:100px;"></div>
<div style="width:100px; height:100px; margin-top:200px;"></div>

A：100px
B：200px
C：300px
D：400px

答案：B

起因：CSS 盒模型，块之间共享垂直外边距 margin，margin 取其最大值。（margin 塌陷问题）

正文完

前端

发表至：前端

2020-12-14

0

关于前端:大家都能看得懂的源码-ahooks-useSet-和-useMap

关于前端:高级前端一面面试题合集

关于前端:同时修改elmentUi横向和竖向的滚动条

关于前端:读懂React原理之调和与Fiber

关于公众号:前端面试每日-31-第608天

关于前端:jsliang-求职系列-42-CSS-基础

一 目录

二 前言

三 DIV + CSS 布局的优缺点

四 如何解决 a 标点击后 hover 事件生效的问题？

五 响应式

六 脱离文档流

七 块级格式化上下文（BFC）

八 盒子模型

九 link 和 @import 区别

十 渐进增减和优雅降级

十一 CSS 实现垂直居中

十二 CSS 单位

十三 CSS 设置暗藏元素

十四 CSS 选择器

十五 层叠上下文

十六 dispaly 和 position

16.1 display

16.2 position

十七 CSS3

17.1 新个性

17.2 Flexbox 弹性盒布局模型

十八 CSS 优化

18.1 CSS 匹配规定

18.2 CSS 的 style 标签地位

十九 题目

19.1 BFC

19.2 CSS 盒模型

站内搜索

一目录

二前言

四如何解决 a 标点击后 hover 事件生效的问题？

五响应式

六脱离文档流

七块级格式化上下文（BFC）

八盒子模型

十渐进增减和优雅降级

十五层叠上下文

十九题目