中文布局 CSS 库

中文布局 CSS 库实现居中布局1. 前言借助市面上已有的 CSS 库，我们可以很轻易的做到居中布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient。2. 实例代码要点就是在 head 标签中用 link 标签引入 chinese-gradient 和 chinese...

2023/9/15 16:44:35 阅读:101次

绝对定位

绝对定位实现居中布局1. 前言居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。固定宽高很好理解，非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。这两种方式也造就了不一样的技术实现，我们来看一下。2. 实例代码假如我们有一个宽度占 70%，高度占 25% 的盒子，我们可以这么写：1174运行结果：代码说明：如果不给定宽高，盒子将会和父元素一样大，因为绝对定位上下左右都是 0，...

2023/9/15 16:44:35 阅读:100次

绝对定位+负边距

绝对定位+负边距实现居中布局1. 前言上一小节我们讲了利用绝对定位来进行居中布局。本小节继续讲另外一种方法实现居中布局。但注意，本小节的"绝对定位+负边距"这种方法不适合绝对定位法那种宽百分之多少、高百分之多少这种相对单位，取而代之的是具体的数值。2. 实例代码比如，这个例子我们设置居中的盒子宽度为 300px、高度为 200px：1175运行结果：3. 小结top: 50%; 和 left: 5...

2023/9/15 16:44:36 阅读:109次

绝对定位+平移

绝对定位+平移实现居中布局1. 前言有时中间盒子的内容是要靠后台传过来的数据决定的，如果写死的话，当数据较多时就会发生溢出，数据较少时又会空出一大片，所以我们需要一种更加智能的方式来实现居中布局。绝对定位 + 平移 是 绝对定位 + 负边距的改进版，那么具体都改进了哪些方面呢？负边距的百分比并不是相对于自身，而是相对于父元素，所以只能写具体的像素值，显得不够智能。而平移相对于自身，只需要无脑写 -...

2023/9/15 16:44:36 阅读:105次

网格布局

网格布局实现居中布局1. 前言本小节，我们将采用网格布局来实现居中布局的样式。网格其实就是最近比较火的 Grid 布局，原理就是把父元素分割成一个个的小格子。然后子元素指定自己具体在那个格子上，有点类似于表格布局。2. 实例代码通过网格布局实现移动端居中布局。1176运行结果：估计大多数人都不太熟悉这个网格布局，它有些类似于表格布局，但比表格布局更加强大。如果同学们对Grid不是很熟悉可以参考 C...

2023/9/15 16:44:36 阅读:106次

弹性布局

弹性布局实现居中布局1. 前言弹性布局 已经成为移动端最流行的布局方式之一了，本小节我们将会使用弹性布局的方式来实现我们的居中布局。2. 实例代码1177运行结果：3. 小结如果对弹性盒子不太了解的直接记住这俩要点即可：父元素：display: flex;子元素：margin: auto;下一小节我们来讲一讲表格布局，顺便为了降低大家的学习成本，为大家推荐一个需要重点练会的布局，其他布局作为了解即...

2023/9/15 16:44:36 阅读:101次

表格布局

表格布局实现居中布局1. 前言其实 CSS 布局流行起来之前一直使用的是表格布局。在居中布局这种场景下，表格布局也很适用。2. 实例代码来看看表格具体如何实现居中：1181运行结果：此布局的关键点在于：父元素上 3 个样式设置：display: table-cell; text-align: center; vertical-align: center;；子元素上设置display: inline...

2023/9/15 16:44:36 阅读:103次

外边距

外边距实现单列布局1. 前言单列布局可以有很多种的方式去实现它，这一小节我们将运用最简单的 CSS 技术，然后由浅入深，最简单的 CSS 技术就代表了最优越的兼容性，无论多么老旧的浏览器，几乎都没有不认识外边距这个语法的。2. 实例代码这种方法不仅兼容性也非常的优异，同时也是最简单最好用的：1183运行结果：这样的一个最简单的单列布局就形成啦！3. 小结单列布局除了外边距法还有很多种方式可以去实现...

2023/9/15 16:44:36 阅读:98次

绝对定位 + 平移

绝对定位 + 平移实现单列布局1. 前言平移是 CSS3 的属性，它可以按照自身尺寸的百分比来进行平移。语法是：transform: translate(xx%);2. 实例代码1185运行结果：3. 小结只要涉及到绝对定位，就一定要记得在祖先元素上设置相对定位或其他定位。不然的话可能不会按照你想要的方式去执行哦。下一小节我们来讲解网格实现法。...

2023/9/15 16:44:36 阅读:113次

行内块元素

行内块元素实现单列布局1. 前言利用元素的行内元素特性我们可以很轻松的做到水平居中。行内块的语法格式也很简单：display: inline-block;。2. 实例代码1187运行结果：3. 小结display: inline-block; 可以让元素既拥有行内元素的特性，同时又拥有块级元素的特性。不过看了这么多种方式的单列布局，可是看起来依然还是很抽象。换句话说就是不好看，那么下一小节我们就为...

2023/9/15 16:44:36 阅读:107次

增光添彩

增光添彩1. 前言单列布局是实现了，但是列里面通常都会放些什么呢？一般来说列里面就都会放一些宽度和列相等、而高度随意的行，这里我们使用 chinese-gradient 来进行颜色的填充并且拿之前讲过的外边距法来举例。2. 实例代码1188运行结果：要点就是在居中布局的那个盒子里面放置一堆子元素，然后宽 100% 充满父元素，这就相当于一行了，再设置一些合适的边距，使其不至于过分拥挤。3. 小结看...

2023/9/15 16:44:36 阅读:113次

中文布局CSS库

中文布局CSS库实现双列布局1. 前言借助市面上已有的CSS库，我们可以很轻易的做到双列布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient。2. 实例代码要点就是在 head 标签中用 link 标签引入chinese-gradient 和 chinese-layo...

2023/9/15 16:44:36 阅读:104次

多列属性

多列属性实现双列布局1. 前言这是一个经常被忽略的一个属性，因为很少有人知道，或者说大部分人仅仅只是知道，但并没有使用过。它的语法形式是酱紫的：columns: 2(列数);。2. 实现1190运行结果：3. 小结多列属性 columns 是 CSS3 的新增属性。但它却并不像其他 CSS3 新属性（如 transform）知名度那么高，甚至很多人都不知道还有这么个玩意，大家有空的话可以去了解一下...

2023/9/15 16:44:36 阅读:97次

左浮动法

左浮动实现双列布局1. 前言在之前 CSS 不发达的那个年代，浮动（ float ）可是当之无愧的布局利器，非常经典的一个属性。来看看用它是怎么实现双列布局的吧。2. 实现1191运行结果：3. 小结和其他的浮动一样，这种方法会导致父元素的坍塌。如果两列下面还有元素的话，记得要清除浮动哦。...

2023/9/15 16:44:36 阅读:133次

固定定位

固定定位实现吕形布局1. 前言吕形布局的上栏通常是不会消失的，它会一直存在在屏幕上，将上栏固定在屏幕的特定位置，然后下栏添加合适的上边距。一听到要把什么东西固定在屏幕上的话，那么第一时间脑海里反应出来的应该就是固定定位。2. 实例代码1199运行结果：为了能让大家清晰的看到滑动效果，这个案例使用了 chinese-gradient 来做背景渐变色。3. 小结大家在做这个案例的时候最好在元素内写上一...

2023/9/15 16:44:36 阅读:117次

非固定定位

非固定定位实现吕形布局1. 前言除了将上栏固定在屏幕上，我们还有另一种选择，那就是上栏和主盒子都在屏幕的那个位置不动，那有人可能会说了，主盒子里的内容要是多了，超出了屏幕的高度该怎么办呢？这就要用到一个属性叫做 overflow-y。2. 实现1204运行结果：可以看到这个案例虽然文字撑开了内容导致溢出，然后出现滚动条可以上下滚动，但背景色却没有变化，这是因为我们是在主盒子上面加的背景色。这种靠子...

2023/9/15 16:44:36 阅读:106次

固定定位+渐隐渐现

固定定位+渐隐渐现1. 前言相信大家日常用手机的时候会见过这种页面：这个需求也比较常见，而且这个交互效果看起来会更加的友好，不过需要用到一点点的 JS 来获取页面滚动的距离，不会 JS 的同学先不要紧张，看不懂的话可以先记住怎么用就行。2. 实例代码1203运行结果：为了能让大家清晰的看到滑动效果，这个案例使用了 chinese-gradient 来做背景渐变色。这里就不用再给主盒子加上边距啦，因...

2023/9/15 16:44:36 阅读:110次

边框九宫格

边框九宫格1. 前言由于实现九宫格最方便的方式就是网格布局，所以边框九宫格咱们来拿网格实现法举例，边框九宫格的关键点其实并不在于用哪种方式实现九宫格，所以很容易融会贯通。2. 笨方法相信大家都有过这样的经历(假装你们有过)：有一道数学题你并不会，但是你却想到了一个耿直的办法来解开这道数学题，答案都是正确的，只不过过程曲折了些：比如问你6 x 9 = ？ 突然你就忘记了九九乘法表，但是你知道6 x...

2023/9/15 16:44:36 阅读:108次

加入边框

加入边框1. 前言不带边框和带边框的九宫格实现起来有着较大的不同，这是为什么呢？比如先给大家看一个无边框的九宫格：通常来说没有边框的九宫格都是有一个间距，比如说朋友圈的那种：如果给它加个边框就会变成这样：看起来还是没毛病对吧？那接下来我们把它们九个合并到一起去再看看：2. 详细对比有没有感觉好像哪里不太对？如果感觉不太明显的话我们将灰色背景去掉再来瞅一眼：是不是感觉格子里面的线条好像更粗呢？为什么...

2023/9/15 16:44:36 阅读:95次

改进版

改进版1. 前言笨方法的缺陷就是要算出每个盒子应该应用的边框，而且在写法上也很麻烦，要为每个盒子定义不同的边框。并且计算出来的结果只适用于九宫格，如果换成四宫格或者十二宫格的话又要为每个盒子重新定义一下边框的样式了。那么有没有一种方法是给子元素一个统一的样式就可以做到一样的样式呢？答案必须是肯定的！2. 不那么笨的方法不知道同学们有没有想过，下面这种边框的样式几乎是每个盒子的边框都不太一样：所以写...

2023/9/15 16:44:36 阅读:105次

经典面试题

九宫格经典面试题1. 前言其实面试有时候并不像大家想象的那样问一些很基础的问题，比如：请谈一下你对CSS盒模型的理解你对flex布局了解的怎么样了解过grid布局吗当元素的外边距为负值时会有什么样的行为当元素重叠在一起时如何控制上下层级如何水平垂直居中什么是事件冒泡怎么控制特定位置的元素样式(比如偶数位置的样式)如何判断事件是从哪个元素冒泡过来的哪个CSS属性值可以减少重复定义颜色值这样问的话效率...

2023/9/15 16:44:36 阅读:124次

课程简介

课程简介1. 本课程的由来这些年，随着IT和互联网产业的逐渐成熟，对于开发者的技术要求越来越高，求职竞争也不断加剧。我们随便打开一个招聘软件就可以看到Web前端有相当一部分岗位不仅仅要求你只会做 PC 端，而且还要你会移动端、微信小程序、至少一门后台语言、RESTful、GraphQL、webpac...

2022/11/3 11:19:00 阅读:128次

移动端的迭代速度

移动端的迭代速度1. 前言由于移动端并不像电脑屏幕那么大，而且长宽比也有很大的区别，所以造就了移动端布局与 PC 端布局有着很大的不同，本章我们就来聊一聊移动端布局通常都有什么特点。2. PC 端迭代速度移动端大部分指的是手机，大家目前的生活基本已经离不开手机了。但是手机的迭代速度可不同于电脑，相信...

2022/11/3 11:19:00 阅读:118次

移动端的屏幕长宽比

移动端的屏幕长宽比1. 前言长宽比通常也决定了使用布局的方式，电脑的屏幕通常都是横着的，也就是宽大于高，所以在 PC 端网站上经常可以看到两列布局、三列布局等多列布局。虽然 PC 端的宽很大，可以容纳更多的列，但是高相对来说就较窄了，所以通常上下都是没有遮挡的。即使有 header 和 footer...

2022/11/3 11:19:00 阅读:113次

居中布局简介

居中布局简介1. 前言接下来我们将带领大家看看移动端常见的居中布局，其实居中布局大家在日常生活中基本都见过，只是当时没怎么留意罢了。没给用户留下深刻印象的布局反而是好布局，因为用户的注意力都在内容上了，证明此时的布局令用户操作顺畅。而给用户留下印象的布局一般就不太好了（一些与众不同的炫酷布局除外）：...

2022/11/3 11:19:00 阅读:128次

中文布局 CSS 库实现居中布局

中文布局 CSS 库实现居中布局1. 前言借助市面上已有的 CSS 库，我们可以很轻易的做到居中布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient。2. 实例代码要点...

2022/11/3 11:19:00 阅读:122次

绝对定位实现居中布局

绝对定位实现居中布局1. 前言居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。固定宽高很好理解，非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。这两种方式也造就了不一样的技术实现，我们来看一下。2. 实例代码假如我们有一个宽度占 70%，高度占 25% 的盒子，我们可以这么写...

2022/11/3 11:19:00 阅读:128次

绝对定位+负边距实现居中布局

绝对定位+负边距实现居中布局1. 前言上一小节我们讲了利用绝对定位来进行居中布局。本小节继续讲另外一种方法实现居中布局。但注意，本小节的"绝对定位+负边距"这种方法不适合绝对定位法那种宽百分之多少、高百分之多少这种相对单位，取而代之的是具体的数值。...

2022/11/3 11:19:00 阅读:135次

绝对定位+平移实现居中布局

绝对定位+平移实现居中布局1. 前言有时中间盒子的内容是要靠后台传过来的数据决定的，如果写死的话，当数据较多时就会发生溢出，数据较少时又会空出一大片，所以我们需要一种更加智能的方式来实现居中布局。绝对定位 + 平移 是 绝对定位 + 负边距的改进版，那么具体都改进了哪些方面呢？...

2022/11/3 11:19:00 阅读:126次

网格布局实现居中布局

网格布局实现居中布局1. 前言本小节，我们将采用网格布局来实现居中布局的样式。网格其实就是最近比较火的 Grid 布局，原理就是把父元素分割成一个个的小格子。然后子元素指定自己具体在那个格子上，有点类似于表格布局。2. 实例代码通过网格布局实现移动端居中布局。1176运行结果：估计大多数人都不太熟悉...

2022/11/3 11:19:00 阅读:142次

弹性布局实现居中布局

外边距实现单列布局1. 前言单列布局可以有很多种的方式去实现它，这一小节我们将运用最简单的 CSS 技术，然后由浅入深，最简单的 CSS 技术就代表了最优越的兼容性，无论多么老旧的浏览器，几乎都没有不认识外边距这个语法的。2. 实例代码这种方法不仅兼容性也非常的优异，同时也是最简单最好用的：1183...

2022/11/3 11:19:00 阅读:113次

表格布局实现居中布局

表格布局实现居中布局1. 前言其实 CSS 布局流行起来之前一直使用的是表格布局。在居中布局这种场景下，表格布局也很适用。2. 实例代码来看看表格具体如何实现居中：1181运行结果：此布局的关键点在于：父元素上 3 个样式设置：display: table-cell; text-align: cen...

2022/11/3 11:19:00 阅读:134次

单列布局简介

单列布局简介1. 前言单列布局是目前运用最为广泛的布局之一，因其结构清晰、一目了然、无论屏幕大小都能获得较为一致的效果等优点深受大家喜爱。接下来我们一起来看一看抽象模式的单列布局长什么样。2. 单列布局抽象成极简形式的单列布局长这样：但极简形式大家看起来可能会有些陌生，那么我们在这一列里面加入许多行...

2022/11/3 11:19:00 阅读:115次

外边距实现单列布局

...

2022/11/3 11:37:00 阅读:122次

弹性布局实现单列布局

弹性布局实现居中布局1. 前言弹性布局 已经成为移动端最流行的布局方式之一了，本小节我们将会使用弹性布局的方式来实现我们的居中布局。2. 实例代码1177运行结果：3. 小结如果对弹性盒子不太了解的直接记住这俩要点即可：父元素：display: flex;子元素：margin: auto;下一小节我...

2022/11/3 11:19:00 阅读:107次

网格布局实现单列布局

网格布局实现单列布局网格其实就是最近比较火的Grid布局，原理就是把父元素分割成一个个的小格子，然后子元素指定自己具体在那个格子上，有点类似于表格布局。...

2022/11/4 9:54:00 阅读:117次

网格布局实现单列布局

网格其实就是最近比较火的Grid布局，原理就是把父元素分割成一个个的小格子，然后子元素指定自己具体在那个格子上，有点类似于表格布局。...

2022/11/3 11:48:00 阅读:106次

绝对定位+平移实现单列布局

绝对定位 + 平移实现单列布局1. 前言平移是 CSS3 的属性，它可以按照自身尺寸的百分比来进行平移。语法是：transform: translate(xx%);2. 实例代码1185运行结果：3. 小结只要涉及到绝对定位，就一定要记得在祖先元素上设置相对定位或其他定位。不然的话可能不会按照你想要...

2022/11/3 11:19:00 阅读:118次

行内块元素实现单列布局

行内块元素实现单列布局1. 前言利用元素的行内元素特性我们可以很轻松的做到水平居中。行内块的语法格式也很简单：display: inline-block;。2. 实例代码1187运行结果：3. 小结display: inline-block; 可以让元素既拥有行内元素的特性，同时又拥有块级元素的特性...

2022/11/3 11:19:00 阅读:126次

增光添彩单列布局

增光添彩1. 前言单列布局是实现了，但是列里面通常都会放些什么呢？一般来说列里面就都会放一些宽度和列相等、而高度随意的行，这里我们使用 chinese-gradient 来进行颜色的填充并且拿之前讲过的外边距法来举例。2. 实例代码1188运行结果：要点就是在居中布局的那个盒子里面放置一堆子元素...

2022/11/3 11:19:00 阅读:119次

双列布局简介

双列布局简介1. 前言网站单列 + 列中内容左图右文的形式已经可以满足很多场景的需要了。但是有时候我们并不想要左图右文，左图右文重点突出的是文字，图片只是辅助。而一些视频类、电商类网站需要重点突出的并不是文字，而是图片，这时候双列布局就派上用场了。2. 双列布局双列布局抽象起来通常是这样的：由于现在...

2022/11/3 11:19:00 阅读:133次

中文 布局CSS库实现双列布局

中文布局CSS库实现双列布局1. 前言借助市面上已有的CSS库，我们可以很轻易的做到双列布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient。2. 实例代码要点就是在 ...

2022/11/3 11:19:00 阅读:108次

多列属性实现双列布局

多列属性实现双列布局1. 前言这是一个经常被忽略的一个属性，因为很少有人知道，或者说大部分人仅仅只是知道，但并没有使用过。它的语法形式是酱紫的：columns: 2(列数);。2. 实现1190运行结果：3. 小结多列属性 columns 是 CSS3 的新增属性。...

2022/11/3 11:19:00 阅读:109次

左浮动实现双列布局

左浮动实现双列布局1. 前言在之前 CSS 不发达的那个年代，浮动（ float ）可是当之无愧的布局利器，非常经典的一个属性。来看看用它是怎么实现双列布局的吧。2. 实现1191运行结果：3. 小结和其他的浮动一样，这种方法会导致父元素的坍塌。如果两列下面还有元素的话，记得要清除浮动哦。...

2022/11/3 11:19:00 阅读:122次

绝对定位实现双列布局

绝对定位实现双列布局，无论什么布局几乎都可以使用绝对定位来实现，那为什么好多布局并不会首选绝对定位呢？一方面是因为写起来可能有点麻烦，另一方面是因为必须得算，那具体要怎么算呢？...

2022/11/3 11:57:00 阅读:109次

弹性布局实现双列布局

弹性布局实现双列布局,弹性布局已经成为移动端最流行的布局方式之一了，还不了解的同学赶快去了解一下吧！...

2022/11/4 10:19:00 阅读:118次

网格布局实现双列布局

?网格布局实现双列布局,网格其实就是最近比较火的 Grid 布局，原理就是把父元素分割成一个个的小格子，然后子元素指定自己具体在那个格子上，有点类似于表格布局。...

2022/11/3 12:02:00 阅读:104次

增光添彩双列布局

...

2022/11/3 12:06:00 阅读:107次

吕形布局简介

吕形布局简介1. 前言顾名思义，吕字就是上面一个矩形，下面一个矩形。上面的矩形高度较小，通常固定在屏幕上，不会随着用户滑动手机而进行任何的移动。目前流行的方案一种是直接默认显示上栏，另一种是随着屏幕的滑动而慢慢显示出上栏。2. 吕形布局我们来展示与一下吕形布局的效果以及它的使用场景。吕形布局抽象起来是酱婶儿的：一般会把跳转页面、搜索、下载或者历史记录等功能放在上面固定在屏幕上的矩形内，可以简单的把...

2022/11/3 11:19:49 阅读:114次

固定定位实现吕形布局

固定定位实现吕形布局1. 前言吕形布局的上栏通常是不会消失的，它会一直存在在屏幕上，将上栏固定在屏幕的特定位置，然后下栏添加合适的上边距。一听到要把什么东西固定在屏幕上的话，那么第一时间脑海里反应出来的应该就是固定定位。2. 实例代码1199运行结果：为了能让大家清晰的看到滑动效果，这个案例使用了...

2022/11/3 11:19:00 阅读:114次

中文布局CSS库实现吕形布局

中文布局CSS库实现吕形布局,借助市面上已有的CSS库，我们可以很轻易的做到吕形布局，尤其是可以用到中文关键字，这非常有利于我们的记忆，它就是 chinese-layout。然后我们再用一个中文渐变色的 CSS 库来美化我们的界面：chinese-gradient。...

2022/11/4 10:54:00 阅读:114次

外边距的作用

外边距的作用1. 前言为什么要有一个合适的外边距呢？其实根本原因在于固定定位会脱离默认文档流，为了让大家清楚的认识到到底是怎么一回事，我们特意在主盒子的里面写上了一些文字。2. 加入文字1200运行结果：3. 去掉主盒子的外边距1202运行结果：4. 小结这是怎么回事呢？原来，去掉了外边距就相当于把...

2022/11/3 11:19:00 阅读:106次

非固定定位实现吕形布局

非固定定位实现吕形布局1. 前言除了将上栏固定在屏幕上，我们还有另一种选择，那就是上栏和主盒子都在屏幕的那个位置不动，那有人可能会说了，主盒子里的内容要是多了，超出了屏幕的高度该怎么办呢？这就要用到一个属性叫做 overflow-y。2. 实现1204运行结果：可以看到这个案例虽然文字撑开了内容导致...

2022/11/3 11:19:00 阅读:114次

固定定位+渐隐渐现吕形布局

固定定位+渐隐渐现1. 前言相信大家日常用手机的时候会见过这种页面：这个需求也比较常见，而且这个交互效果看起来会更加的友好，不过需要用到一点点的 JS 来获取页面滚动的距离，不会 JS 的同学先不要紧张，看不懂的话可以先记住怎么用就行。2. 实例代码1203运行结果：为了能让大家清晰的看到滑动效果，...

2022/11/3 11:19:00 阅读:105次

上下栏布局简介

上下栏布局简介1. 前言顾名思义，上下栏就是上面一个栏，下面一个栏，中间的区域填满剩余空间。上下两栏的矩形高度较小，通常固定在屏幕上，不会随着用户滑动手机而进行任何的移动。如果同学们学会了上一章的吕型布局，那么这一章简直就是手到擒来，唯一和上一章有点区别的就是下面多了一个固定栏。2. 上下栏布局抽象...

2022/11/3 11:19:00 阅读:119次

上下栏布局中文布局CSS库

上下栏布局中文布局CSS库,如果同学们学会了上一章的吕型布局，那么这一章简直就是手到擒来，唯一和上一章有点区别的就是下面多了一个固定栏。...

2022/11/3 13:46:00 阅读:115次

固定定位实现上下栏布局

固定定位实现上下栏布局,上下栏通常是一直存在在屏幕上，将上下栏固定在屏幕的特定位置，然后为内容添加合适的边距。一听到要把什么东西固定在屏幕上的话，那么第一时间脑海里反应出来的应该就是固定定位。...

2022/11/3 13:49:00 阅读:108次

外边距的作用上下栏布局

外边距的作用上下边距,为什么要有一个合适的外边距呢？...

2022/11/3 13:54:00 阅读:107次

非固定定位实现上下栏布局

非固定定位实现上下栏布局,除了将上下栏固定在屏幕上，我们还有另一种选择，那就是上下栏和主盒子都在屏幕的那个位置不动，那有人可能会说了，主盒子里的内容要是多了，超出了屏幕的高度该怎么办呢？这就要用到一个属性叫做 overflow-y...

2022/11/3 14:02:00 阅读:93次

固定定位+渐隐渐现上下栏布局

固定定位+渐隐渐现上下栏布局注意看布局，眼球不要被那个 45-70K 的薪资吸引了哈！这是某著名招聘网站的页面，如果屏幕前的你正在用这款软件的话，希望你也能找到这么高工资的工作。...

2022/11/3 14:06:00 阅读:104次

九宫格简介

九宫格简介1. 前言有些同学乍一听九宫格可能不知道是什么，但其实它在我们的日常生活中很常见：顾名思义，九宫格通常为如图这种三行三列的布局。微信客户端就用到了这种布局方式：大家最熟悉的朋友圈也采用了九宫格：还有微博：2. 边框九宫格九宫格和其他布局有个明显的区别，那就是加入边框后的九宫格有个bug：大...

2022/11/3 11:19:00 阅读:138次

中文布局CSS库实现九宫格

中文布局CSS库实现九宫格,据不完全统计（其实就统计了自己身边的朋友和同事），在刨除抖音或快手这一类短视频 APP 后，每天在手机上花费时间最长的就是刷微博和逛朋友圈。...

2022/11/3 14:14:00 阅读:99次

网格布局实现九宫格布局

网格布局实现九宫格布局 这种几行几列的布局最适合用网格布局来写啦！...

2022/11/3 14:18:00 阅读:116次

表格布局实现九宫格布局

表格布局实现九宫格布局，像这种横平竖直几行几列的布局，除了网格布局以外，表格布局也很合适...

2022/11/3 14:27:00 阅读:106次

绝对定位实现九宫格布局

绝对定位实现九宫格布局，通过对九宫格的观察可以发现，每个格子都是固定在每隔三分之一的那么一个位置，这种规律性导致可以使用绝对定位来实现九宫格...

2022/11/3 14:29:00 阅读:113次

弹性布局实现九宫格布局

弹性布局实现九宫格布局，弹性布局已经成为移动端最流行的布局方式之一了，还不了解的同学赶快去了解一下吧！...

2022/11/3 14:31:00 阅读:99次

左浮动实现九格宫布局

左浮动实现九格宫布局，浮动是较为经典的布局属性...

2022/11/3 14:32:00 阅读:103次

弹性布局实现九宫格布局

弹性布局实现九宫格布局,弹性布局已经成为移动端最流行的布局方式之一了，还不了解的同学赶快去了解一下吧！...

2022/11/3 11:59:00 阅读:117次

加入边框 九宫格

加入边框1. 前言不带边框和带边框的九宫格实现起来有着较大的不同，这是为什么呢？比如先给大家看一个无边框的九宫格：通常来说没有边框的九宫格都是有一个间距，比如说朋友圈的那种：如果给它加个边框就会变成这样：看起来还是没毛病对吧？那接下来我们把它们九个合并到一起去再看看：2. 详细对比有没有感觉好像哪里...

2022/11/3 11:19:00 阅读:129次

边框九宫格实现九宫格

边框九宫格1. 前言由于实现九宫格最方便的方式就是网格布局，所以边框九宫格咱们来拿网格实现法举例，边框九宫格的关键点其实并不在于用哪种方式实现九宫格，所以很容易融会贯通。2. 笨方法相信大家都有过这样的经历(假装你们有过)：有一道数学题你并不会，但是你却想到了一个耿直的办法来解开这道数学题，答案都是...

2022/11/3 11:19:00 阅读:118次

改进版九宫格布局

改进版1. 前言笨方法的缺陷就是要算出每个盒子应该应用的边框，而且在写法上也很麻烦，要为每个盒子定义不同的边框。并且计算出来的结果只适用于九宫格，如果换成四宫格或者十二宫格的话又要为每个盒子重新定义一下边框的样式了。那么有没有一种方法是给子元素一个统一的样式就可以做到一样的样式呢？答案必须是肯定的！...

2022/11/3 11:19:00 阅读:106次

九宫格经典面试题

九宫格经典面试题1. 前言其实面试有时候并不像大家想象的那样问一些很基础的问题，比如：请谈一下你对CSS盒模型的理解你对flex布局了解的怎么样了解过grid布局吗当元素的外边距为负值时会有什么样的行为当元素重叠在一起时如何控制上下层级如何水平垂直居中什么是事件冒泡怎么控制特定位置的元素样式(比如偶...

2022/11/3 11:19:00 阅读:117次

响应式简介

响应式简介1. 前言响应式就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。无论你的屏幕多大，小一点的屏幕(手机)可以一行行的排列，中等一点的屏幕(平板电脑)可以两列三列的那么排布，更大的屏幕(PC电脑)则可以展示更多的列，因为电脑屏幕的宽高比恰...

2022/11/3 11:19:00 阅读:107次

响应式布局中文布局CSS库

响应式布局中文布局CSS库...

2022/11/3 14:50:00 阅读:100次

网格布局之应式布局

网格布局之应式布局，在响应式布局这一领域内，grid 布局简直有着当仁不让的天生优势，即使是chinese-layout的底层也依赖的是 grid 布局，grid 可在短短几行代码之中就快速实现出各种布局。...

2022/11/3 14:54:00 阅读:115次

弹性布局之响应式布局

弹性布局之响应式布局除了Grid布局外，Flex也很擅长这件事:...

2022/11/3 14:57:00 阅读:110次

左浮动法之响应式布局

左浮动法之响应式布局，如果项目要求必须兼容低版本浏览器的话，flex和grid可能都不能用了，只能用CSS2的语法来实现了。...

2022/11/3 14:59:00 阅读:107次

媒体查询简介

媒体查询1. 前言其实响应式并不仅仅是屏幕窄了就换行，屏幕宽了就填充这么简单。有很多时候是需要根据设备的不同来显示不同的布局结构，比如在手机屏幕上用单列布局刚刚好，但是这个网址被台式机访问的话单列就会显得过于宽，这时就要根据不同的设备来运行不同的代码，那么怎么才能知道当前的设备呢？这就是本节我们要讲...

2022/11/3 11:19:00 阅读:112次

媒体属性

媒体属性1. 前言上一小节我们带领大家认识了一下媒体查询的一些小知识，知道了媒体查询都有哪些设备。那么问题来了，手机、平板、笔记本和台式机它们几个通通被归为了一类设备：屏幕设备(screen)，在区分别打印设备还是屏幕设备的时候非常好区分，但如果区分移动端还是PC端的时候要怎么做呢？2. 媒体属性虽...

2022/11/3 11:19:00 阅读:123次

逻辑操作符

逻辑操作符1. 前言上一节课我们已经知道了哪些属性可以分辨不同的屏幕设备，并且也知道了程序中的像素为何与手机中的像素不匹配的原因。那么本小节我们将利用逻辑操作符来结合前两节课讲的那些内容一起试水响应式布局。2. 逻辑操作符那么什么是逻辑操作符呢？逻辑操作符可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。逻辑操作符分为以下四种含义and用于将多个媒体查询规则组...

2022/11/3 11:19:49 阅读:121次