CSS | Last Stand

Flexbox

一、Flexbox布局的概念 Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。 Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。 Flex布局是一个完整的模块，它包括了一套完整的属性。其中采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素就是容器成员，称为 Flex 项目，简称"项目"。容器默认存在两个轴：水平轴（main axis）和垂直轴（cross axis），项目默认沿主轴排列（水平轴）：这里面涉及到了几个概念，下面来看一下： main axis: Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。 main-start & main-end: 分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。 main size: 单个项目占据主轴的长度大小。 cross axis: 交叉轴，与主轴垂直。 cross-start & cross-end: 分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。 cross size: 子元素在交叉轴方向上的大小。二、父元素属性想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局： <div class="container"></div> .container { display: flex | inline-flex; } 这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;。父元素（容器）可以设置以下六个属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 1. flex-direction flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值： .container { flex-direction: row | row-reverse | column | column-reverse; } （1）flex-direction: row：默认值，沿水平主轴从左到右排列，起点在左沿（2）flex-direction: row-reverse：沿水平主轴从右到左排列，起点在右沿（3）flex-direction: column：沿垂直主轴从上到下排列，起点在上沿 ...

Grid布局

Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。 Grid 布局远比 flex 布局强大！ flex布局示例: Grid 布局示例： Grid 的一些基础概念我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址 <div class="wrapper"> <div class="one item">One</div> <div class="two item">Two</div> <div class="three item">Three</div> <div class="four item">Four</div> <div class="five item">Five</div> <div class="six item">Six</div> </div> .wrapper { margin: 60px; /* 声明一个容器 */ display: grid; /* 声明列的宽度 */ grid-template-columns: repeat(3, 200px); /* 声明行间距和列间距 */ grid-gap: 20px; /* 声明行的高度 */ grid-template-rows: 100px 200px; } .one { background: #19CAAD; } .two { background: #8CC7B5; } .three { background: #D1BA74; } .four { background: #BEE7E9; } .five { background: #E6CEAC; } .six { background: #ECAD9E; } .item { text-align: center; font-size: 200%; color: #fff; } ...

浮动、清除浮动和BFC

浮动、清除浮动和BFC是前端开发中常见的概念，它们对于页面布局及美化至关重要。浮动在网页设计中，浮动是一种常见的布局技术，可以让元素脱离文档流，我们来看看它有什么作用吧！使文字环绕代码示例如下： html结构： <div class="box"></div> <div class="text">一段文字</div> css样式： .box{ width: 200px; height: 200px; background-color: coral; } 若不加浮动，则页面是这样的效果：但若是在box加上float: left;(向左浮动)，则能使文字环绕box这个盒子： .box{ width: 200px; height: 200px; background-color: coral; float: left; } 让块级元素同行显示块级元素本身是占据一整行的，但浮动能让多个块级元素处于同一行，示例如下：若不加浮动，则多个块级元素各自占据一行： html结构： <ul> <li>1</li> <li>2</li> <li>3</li> </ul> css样式： *{ margin: 0; padding: 0; } ul li{ list-style:none; width: 200px; height: 100px; font-size: 16px; } li:nth-child(1){/*子容器选择器 */ background-color: rgb(227, 149, 149); } li:nth-child(2){ background-color: rgb(205, 139, 197); } li:nth-child(3){ background-color: rgb(145, 212, 227); } 页面如图： ...

单位

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。 1. 相对单位相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。下面就来看看这些常见的CSS单位。（1）em 和 rem em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。 em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。当然，上面的这个说法是不严谨的。来看一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { width: 300px; height: 300px; font-size: 20px; } .child { border: 1em solid ; } </style> </head> <body> <div class="parent"> <div class="child"> 子元素 </div> </div> </body> </html> 这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的：那如果我们给子元素的字体设置为30px： .child { font-size: 30px; border: 1em solid ; } 这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的：所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。 em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。 rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改： .child { font-size: 30px; border: 1rem solid ; } html { font-size: 25px; } 效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的： ...

BFC

BFC 是前端面试中经常会被问到的一个知识点，今天就来带大家深入了解下什么是 BFC 以及它的作用。文档流在介绍BFC之前，需要先给大家介绍一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。绝对定位(Absolute positioning) 如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；对于 position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。普通流 (normal flow) 普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 BFC 概念先看下MDN上关于BFC的定义：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。除了 BFC，还有： IFC（行级格式化上下文）- inline 内联 GFC（网格布局格式化上下文）- display: grid FFC（自适应格式化上下文）- display: flex或display: inline-flex 注意：同一个元素不能同时存在于两个 BFC 中。 ...

动画

前言 CSS中有几个特别相近的几个属性。他们是transition,transform,animation。可能还有人对translate是什么也不清楚，那我们先给个简单的介绍。属性含义 transition 过渡用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 transform 变形用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” animation 动画 css动画属性 translate 移动只是transform的一个属性值，即移动。 transition 过渡字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。一条transition规则，是可以定义多个属性的变化的，中间用逗号隔开，如果是全部属性变化则用“all”即可。语法：transition: property duration timing-function delay; 值描述 transition-property 规定设置过渡效果的 CSS 属性的名称 transition-duration 规定完成过渡效果需要多少秒或毫秒 transition-timing-function 规定速度效果的速度曲线 transition-delay 定义过渡效果何时开始我发现简写时候的顺序并不一定就是写死的，经过测试在chrome上只要delay在duration后面即可。当然按照标准写是最好的。 Demo <!DOCTYPE html> <html lang="en"> <head> <title>transition</title> <style> #box { height: 100px; width: 100px; background: green; transition: transform 1s ease-in 1s; } #box:hover { transform: rotate(180deg) scale(.5, .5); } </style> </head> <body> <div id="box"></div> </body> </html> 效果 ...

transition

CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。 CSS 过渡可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，如线性或先快后慢）。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。开发者可以定义哪一属性需以何种方式用于动画，由此允许创造复杂的过渡。然而因为为某些属性赋予动画无意义，所以这些属性无动画性。备注： auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，实现了这个需求；然而另外一些用户代理，比如基于 WebKit 的，没有这么严格限制。在 auto 上使用动画，取决于浏览器及其版本，可能会导致非预期结果，应当避免使用。属性以下 transition 属性，若有多个属性值，则以,（逗号）衔接。 transition-property 指定哪个或哪些 CSS 属性名称用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。取值如下： none：没有过渡动画。 all（初始值）：所有可被动画的属性都表现出过渡动画。 <custom-ident>：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个不能为非破折号字符或数字。同时，不能以两个破折号开头。通俗来说就是可以是自定义名称也可以是css规范中的属性名。 transition-duration 表示过渡属性从旧的值转变到新的值所需要的时间。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长。该属性值以秒（s）或毫秒（ms）为单位指定过渡动画所需的时间。默认值为 0s，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果某个属性的值列表小于 transition-property 的属性值数量，那么时长列表会重复，重复规则是按照现有值进行重复。例如：如3s，则重复多个3s div { transition-property: opacity, left, top, height; transition-duration: 3s; } 将视为： div { transition-property: opacity, left, top, height; transition-duration: 3s, 3s, 3s, 3s; } 如果是3s，5s，则会重复多个3s，5s。 div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s; } 将视为： ...

响应式设计

引言响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。响应式布局的实现方案 1. 媒体查询 CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。如何选择屏幕大小分割点如何确定媒体查询的分割点也是一个开发中会遇到的问题，下面是市场上的移动设备和电脑屏幕分辨率的分布情况，可以发现不同品牌和型号的设备屏幕分辨率一般都不一样如果我们选择600px,900px,1200px,1800px作为分割点，可以适配到常见的14个机型：当然这只是其中的一种分割方案，我们还可以这样划分：480px,800px,1400px,1400px 而作为曾经典型的响应式布局框架，Bootstrap是怎么进行断点的呢？上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。移动优先 OR PC优先不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。移动优先: /* iphone6 7 8 */ body { background-color: yellow; } /* iphone 5 */ @media screen and (max-width: 320px) { body { background-color: red; } } /* iphoneX */ @media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color: #0FF000; } } /* iphone6 7 8 plus */ @media screen and (min-width: 414px) { body { background-color: blue; } } /* ipad */ @media screen and (min-width: 768px) { body { background-color: green; } } /* ipad pro */ @media screen and (min-width: 1024px) { body { background-color: #FF00FF; } } /* pc */ @media screen and (min-width: 1100px) { body { background-color: black; } } PC优先： ...

变量

一、变量的声明声明变量的时候，变量名前面要加两根连词线（--）。 body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中，body选择器里面声明了两个变量：--foo和--bar。它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做**“CSS 自定义属性”**（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。各种值都可以放入 CSS 变量。 :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); } 变量名大小写敏感，--header-color和--Header-Color是两个不同变量。二、var() 函数 var()函数用于读取变量。 a { color: var(--foo); text-decoration-color: var(--bar); } var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。 color: var(--foo, #7F583F); 第二个参数不处理内部的逗号或空格，都视作参数的一部分。 ...

display

一、display属性介绍 display 属性规定元素应该生成的框的类型。以下是一些关于display比较常用的属性值：值描述 none 元素不会显示 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 line-block 行内块元素。（CSS2.1 新增的值）[IE6/7不支持] list-item 此元素会作为列表显示。 inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。 table-row 此元素会作为一个表格行显示（类似 tr）。 table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）. inherit 规定应该从父元素继承 display 属性的值。其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。二、display:none 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失了。元素的内容也会消失。三、display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度； block元素可以设置margin和padding属性； block元素可以设置width、height属性。块级元素即使设置了宽度，仍然是独占一行。块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的；块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行。块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的，如下图所示：块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行，如下图所示：四、display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化； inline元素设置width、height属性无效； inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。如下图所示：五、display:inline-block 将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。就是集合了block和inline的全部优点。width、height、margin、padding设置都会生效。如下图所示：原文：https://juejin.cn/post/6844903781566513160 常见考点 1. 基本概念请简述 CSS 中的 display 属性及其作用。 display 属性的常见值有哪些？请列举并解释其含义。例如：block、inline、inline-block、flex、grid、none 等。 2. display: block 什么是 display: block？它会给元素带来哪些表现？一个块级元素通常具有哪些特点？例如：它的宽度会如何变化？它是否会换行？ 3. display: inline 什么是 display: inline？它与 display: block 有什么不同？内联元素如何处理宽度和高度？它们是否会占据整个可用宽度？如何让一个内联元素变得像块级元素一样换行？ 4. display: inline-block 什么是 display: inline-block？它结合了 inline 和 block 的哪些特点？使用 inline-block 时，元素的宽高如何影响布局？ inline-block 元素如何与其他元素对齐？ 5. display: none 请解释 display: none 的作用与 visibility: hidden 的区别。使用 display: none 会有什么样的表现？例如，它对页面布局有何影响？当你将一个元素的 display 设置为 none 时，它会消失，但仍然存在于 DOM 中。如何通过 JavaScript 使其重新显示？ 6. display: flex display: flex 是什么？它通常用来实现什么样的布局效果？在使用 flex 布局时，如何控制子元素的排列方向、对齐方式等？ justify-content、align-items、flex-direction 等 Flexbox 属性的作用是什么？ 7. display: grid 什么是 display: grid 布局？它与 flex 布局有何区别？在 grid 布局中，如何设置行和列的大小？如何控制子元素的位置？请举例说明 grid-template-columns、grid-template-rows、grid-gap 等属性的使用方法。 8. display: table 什么是 display: table，它如何模仿传统的 HTML <table> 元素？使用 display: table 时，如何控制表格的行和列布局？ display: table-row、display: table-cell 和 display: table-caption 的作用是什么？ 9. 布局模型对比：block vs inline vs flex vs grid 你如何选择使用 block、inline、flex 或 grid 布局？在实际项目中，什么时候使用 flex 布局，什么时候使用 grid 布局？请比较 flex 和 grid 布局的优缺点及应用场景。 10. display 与其他布局属性在使用 display: flex 或 display: grid 布局时，如何与其他布局属性（如 position、float 等）配合使用？如何解决使用 display: flex 或 display: grid 布局时遇到的常见布局问题，例如元素溢出、对齐等？ 11. display: none 与性能 display: none 对页面性能有何影响？如何通过 JavaScript 动态控制显示/隐藏元素以提高性能？ 12. display: contents 什么是 display: contents？它是如何工作的？它与其他 display 值有什么区别？请举例说明 display: contents 的应用场景及可能的问题。 13. display 的继承性 display 属性是否继承？如果没有，如何通过样式继承的方式控制多个元素的 display 属性？你如何在多个嵌套元素中保持一致的布局设置？ 14. display 的可见性与布局 display 属性会影响元素的布局、渲染和可见性。请简要解释 display: none 和 visibility: hidden 的区别，它们对页面的影响不同吗？ 15. 实际应用请描述一个你在实际开发中使用 display 属性解决布局问题的案例。如果需要在一个响应式设计中调整元素的布局，如何根据屏幕尺寸调整 display 属性？