css
关注
分享
扫一扫
沿着路走到底
涉及前端，后端，数据库
展开
-
css3 实现网格布局
1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0;原创 2021-11-26 13:16:34 · 226 阅读 · 0 评论 -
css3 实现瀑布流
1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen原创 2021-11-25 21:07:08 · 523 阅读 · 0 评论 -
移动端rem 适配
html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>title</title&原创 2021-11-04 10:51:54 · 91 阅读 · 0 评论 -
sacc less 区别
sass和less主要区别在于实现方式：less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。sass 与 less 的区别 ：1、sass与less的安装 ：sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。less 在服务器端最容易的安装方式就是通过 npm（node.js 的包管理器）。less 在客户端使用【.less】（LESS源文件），只需要在官网载一个javascript脚本文件主【less.js】，然原创 2021-10-08 22:27:14 · 609 阅读 · 0 评论 -
sass基础
官方网址sass项目应用node-sass注释常规a { color: $color-normal; // 常规颜色 } // 编译 a { color: #00bebe; // 常规颜色 } 静默a { color: $color-normal; /* 常规颜色 */ } // 编译 a { color: #00bebe; } 常用语法 变量声明 $color-nio: #00bebe; ..原创 2021-08-05 11:02:03 · 99 阅读 · 0 评论 -
CSS预处理器
一、为什么使用CSS预处理器代码复用，减少冗余代码，结构清晰，方便维护，提高开发效率。还可以进行计算。https://www.cnblogs.com/ablack/p/9894603.html二、sass,less区别https://www.cnblogs.com/roashley/p/7731865.html...转载 2019-03-06 11:35:09 · 206 阅读 · 0 评论 -
三列布局
三列布局：两边固定，中间自适应效果图：(1)定位实现三列布局html代码：<body style="position: relative;"> <div id="left">left</div> <div id="middle">middle</div> <div原创 2019-03-03 14:26:47 · 181 阅读 · 0 评论 -
包含块、初始包含块
浮动元素的包含块为其最近的块级祖先元素。定位：根元素的包含块（也称为初始包含块）由用户代理建立，在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形，不等于视窗。对于一个非根元素，如果其position值是relative或static，包含块则由最近的块级框构成。对于一个非根元素，如果其position值是...原创 2019-03-03 13:47:20 · 1258 阅读 · 0 评论 -
css知识点整理
一、flex:1是什么意思？flex:1 是 flex-shrink:1;flex-grow:1;flex-basis:0; 的简写.伸缩规则flex-basis（默认值为auto）flex-grow（默认值为0）可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)每项伸缩大小 =...原创 2019-03-02 23:03:25 · 136 阅读 · 0 评论 -
BFC
BFC(Block formatting context)直译为块级格式化上下文，它是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。BFC布局规则： 内部的Box会在垂直方向，一个接一个地放置。 BFC的区域不会与float box重叠。 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box...原创 2019-03-02 22:49:13 · 138 阅读 · 0 评论