CSS
关注
分享
扫一扫
文章平均质量分 76
Learn-anything
追求极简语言，说明事物因果！
展开
-
学习less，从这里开始
一、less 是什么？less 是 css 的扩展语法，让 css编码工作变的更简单。1、使用场景如果要给项目中所有元素加上一个颜色，你会怎么做？CSS 解决方法：找出所有元素并加上 color 属性。/* style.css */p { color: red;}button { color: red;}...问题：当需要更换颜色时，工作量就非常大了，用 less 就非常容易解决，定义一个变量即可，如下：/* style.less */@color: red;原创 2021-12-12 09:58:37 · 193 阅读 · 0 评论 -
CSS 中的定位(position)布局，是什么？
一、定位布局 是什么？使用 position、left、right、top、bottom，可以改变元素现有位置，譬如让元素从正常布局流中跳出来，固定在页面某个位置上。二、使用场景1、position: static这是元素的默认值，表示按照正常布局流进行排列元素（浏览器默认展示方式）。此时 top, right, bottom, left 和 z-index 属性无效。2、position: relative以现有位置为坐标进行偏移，元素不会被移出正常文档流，原有区域会留下空白。新建文件 i原创 2021-12-10 18:12:22 · 483 阅读 · 0 评论 -
CSS 中的网格(grid)布局，是什么？
一、网格布局是什么？网格布局就是把页面拆分成很多小格子，用于对齐和摆放元素。有三个重要的属性：行(row)、列(column)、沟槽(gutter，表示行列的间隙)。二、怎么使用？/* 父元素设置 如下 属性 */display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20px;更多可用的 grid 属性，看这里！三、实例新建 index.html 文件，复制下面代码到文件，用浏览器打开 index.html，再调整浏览器原创 2021-12-10 18:08:46 · 526 阅读 · 0 评论 -
CSS 的弹性布局(flex) ，是什么？
一、弹性布局 是什么？元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。二、怎么使用？1、使用方法/* 1、父元素中增加 display 属性；*/display: flex;/* 2、子元素中增加 flex、flex-direction等属性；*/flex: 1;flex-direction: column;2、示例新建 index.html 文件，复制下面代码到文件，用浏览器打开 index.html，在调整浏览器窗口大小，即可看到article 元素的大小也跟原创 2021-12-10 18:05:54 · 664 阅读 · 2 评论 -
CSS 的正常布局流，是什么？
一、正常布局流 是什么？正常布局流 也就是浏览器的默认展现页面的方式，具体步骤是：第一步：把每个元素（Content），都用 padding、border、margin 包裹起来，形成一个盒子；第二步：每个盒子占一行；第三步：自上而下把所有盒子按序展示出来。二、实例没有做任何调整的元素，默认排列的样子？1、代码新建 index.html 文件，复制下面代码到文件并保持，用浏览器打开 index.html 看效果。<!DOCTYPE html><ht原创 2021-12-10 18:02:13 · 733 阅读 · 0 评论 -
CSS 的浮动(float)布局是什么？
一、浮动布局用 float 属性，可以实现元素（文字、图片等）的浮动显示功能，通过下面几个实例来展示浮动布局的效果以及浮动布局带来的一些问题？二、应用场景1、图片浮动新建 index.html，复制下面代码到文件，用浏览器打开看效果。<!-- index.html --><!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <t原创 2021-12-10 10:25:05 · 344 阅读 · 0 评论 -
CSS 的多列布局是什么？
一、多列布局是什么？就是用 CSS 的 column-count、column-width、column-gap、break-inside、page-break-inside 等实现多列显示的功能。二、应用场景1、文字多列显示通过 column-count、column-gap、column-rule 就能做出下面多列显示效果。新建 index.html 文件并复制下面代码到文件中，保存后用浏览器打开即可看效果。<!DOCTYPE html><html><原创 2021-12-10 10:15:04 · 861 阅读 · 0 评论