06 2020 档案
摘要：一 前言 CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性，可以让你更加深入的理解定位带来的一些特性，熟练使用CSS布局。 二 正文 1.文档流布局的概念 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行， 浮动元素则按规定浮
阅读全文
摘要：本文首发于我的博客 一直以来，CSS作为一种申明式的样式标记语言，很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。后来随着scss,less等CSS预处理器的出现，我们可以像优秀的开源框架bootstrap那样，通过维护一个_variables.scss
阅读全文
摘要：使用css实现任意大小，任意方向， 任意角度的箭头 网页开发中，经常会使用到 下拉箭头，右侧箭头 这样的箭头。 一般用css来实现： { display: inline-block; margin: 72px; border-top: 24px solid; border-right: 24px s
阅读全文
摘要：对height 100%和inherit的总结 欢迎大家来我的博客留言：https://sxq222.github.io/CSS%...博客主页：https://sxq222.github.io 正文： 之前看到一篇相关的文章：http://www.zhangxinxu.com/wor... 在看这
阅读全文
摘要：前端基础知识学习记录（三） 1.CSS 选择器的使用： (1):before与:after选择器的简介： :before选择器，即为在被选元素的内容前面插入内容，使用 content 属性来指定要插入的内容。:after选择器，即为在被选元素的内容后面插入内容，同样使用 content 属性来指定要
阅读全文
摘要：float 单一层浮动法左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问题的，除了万恶的浏览器IE6，两层中间有缝隙 3px; 定位 在固定元素上加入绝对定位，自适应元素设
阅读全文
摘要：web语义化 web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microform
阅读全文
摘要：input ios 踩的大坑 前言：最近有个需求要将全平台的交易密码由原来的 6-16位 复杂密码改为6位纯数字交易密码，涉及到非常多的业务场景，但修改起来也无非两种：设置交易密码，使用交易密码 设置交易密码： 普通长条输入框、弹起数字键盘、支持明暗文切换查看 使用交易密码： 显示六个格子、弹起数字
阅读全文
摘要：css 如何水平垂直居中，请尽量多说几种方法？很尴尬，我多次面试都被问到这个问题，fuck 定位（回答了）、table-cell布局、flex布局、translate+relative定位 w3c和ie盒模型区别 我回答反了 尴尬 jquery jquery中如何只实现一次事件绑定 $('dom')
阅读全文
摘要：今天总结一下布局，之前校招面试的时候貌似很喜欢考布局，例如两栏自适应布局、三栏自适应布局等等，实现的方法多种多样，总结一下以后就不乱了。 两栏布局 这里我们讲的两栏布局一般是左定宽右自适应的 左float+右margin-left html, body { height: 80%; } .wrapp
阅读全文
摘要：border是围绕元素内容和内边距的一条或多条线，border 属性允许你规定元素边框的样式、宽度和颜色 值： border-width 粗细 none/hidden/solid/dashed/dotted border-color 颜色 默认颜色是字体颜色 border-style 类型 可以综合
阅读全文
摘要：知识小结 回顾近期碰到的知识点，发现自己还有很多不足的地方，关于代码的部分后期自己会给自己补上，加深对相关知识的理解。如果有什么理解不正确的地方，欢迎大家批评指正！ ^ _ ^ 一、JOSN 对象的两个方法 2.1 JSON.stringify() 第一个参数 将JavaScript 对象序列化为
阅读全文
摘要：CSS 消除transition闪屏- .css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } 过渡动画（在没有启动硬件加速的情况下）
阅读全文
摘要：写在前面的话 笔者从17年的2月份开始准备春招，其中遇到不少坑，也意识到自己走过的弯路。故写了这篇文章总结一番，本文适合主动学习的，对自己要学的课程不明确的，对面试有恐惧症的...等将来打算从事技术岗位的同学们。 正文开始 为什么要准备校招？社招不一样能够进入大公司吗？对于一些不懂校招这个概念的人来
阅读全文
摘要：简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形，包括几种典型的三角形绘制，还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种，大家根据项目实际，选用最适宜项目的方案。 1 基本原理 在CSS中，我们可以利用border-top、border-left、border-bo
阅读全文
摘要：CSS 中类 (classes) 和 ID 的区别。 书写上的差别：class名用“.”号开头来定义，id名用“#”号开头来定义； 优先级不同（权重不同） 调用上的区别：在同一个html网页页面中class是可以被多次调用的（在不同的地方）。而id名作为标签的身份则是唯一的，id在页面中只能出现一次
阅读全文
摘要：概念 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 生成BFC的元素 根元素 float属性不为none po
阅读全文
摘要：本文会不定期更新在nuxt.js中遇到的问题进行汇总。转发请注明出处，尊重作者，谢谢！ 强烈推荐作者文档版踩坑指南，点击跳转👉踩坑指南 在Nuxt的官方文档中，中文文档和英文文档都存在着不小的差异。 1.路径匹配问题： In Nuxt.js, the path match is as follow
阅读全文
摘要：在css2中是这样定义二者的： CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。 伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。 第一点讲的是获取不存在与DOM树中的信息。比如<a>标签的:link、v
阅读全文
摘要：我们经常看到这样的布局方式：左边的侧边栏宽度固定，右边的主要内容区域宽度自适应变化。现在提供一个css布局方式。 html代码： <div class="row"> <div class="side"> <img src="side.png" alt="order"> <p>In restauran
阅读全文
摘要：适用于分步骤操作的页面导航图 实现结果如下 上图对应下述代码，稍作修改可以生成下图。css代码如下： @charset "UTF-8"; /**单列宽度 单行高度 列数 行数*/ body { font-size: 12px; color: #000000; font-family: "Micros
阅读全文
摘要：居中 水平居中 对于子元素是行内元素(或者inline-block)时使用text-aling: center; ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。 <style> .box { border:1px solid #aaa; text-align: center; /* te
阅读全文
摘要：原文地址：https://css-tricks.com/css-mo...最近我对CSS Modules比较好奇。如果你曾经听说过他们，那么这篇博客正适合你。我们将去探索它的目的和主旨。如果你同样很好奇，敬请关注，在下一篇博文中我们将介绍如何使用CSS Modules。如果你想亲自尝试并且掌握如何使
阅读全文
摘要：在一些网站上经常可以看到改造过的按钮选项比如这样 由于之前一直在B端企业，样式差不多就Ok了所以也没去研究。昨天刷百度前端学院的时候遇到一个题就是改造checkbox radio样式的，大概研究一番 最常见的自定义按钮样式，其实是用label模拟的,关于label可以在mdn进行查阅 label的f
阅读全文
摘要：div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定，跟这个字体大小没有关系(不同字体相同字体大小，会影响div的高度。)如过明确告诉浏览器行高，div高度就是行高。 文字两端对齐： 文字两端对齐只有中文才有，英文是不需要用两端对齐的。 块级元素：text-align: justify
阅读全文
摘要：技术 CSS 前端布局推进剂 - 间距规范化 利用CSS变量实现令人震惊的悬浮效果 Flexbox 很棒，但有些情况不适用 CSS布局说——可能是最全的 【图片版】学习CSS网格布局 使用CSS Grid的九大误区 图解CSS Flexbox布局 CSS Grid 布局揭秘 JS ECMAScrip
阅读全文
摘要：在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title
阅读全文
摘要：一、什么是BFC 具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。 总之，BFC就是一种属性，这种属性会影
阅读全文
摘要：基础篇中主要介绍了一些sass的基本特性，进阶篇中，主要是写一些我们常用的sass控制命令，函数和规则。 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等，熟悉JS条件语句和循环的朋友会比较了解这些控制命令的功能所在，这些控制命令是 sass 的一个重要组成部分。
阅读全文
摘要：IPhoneX全面屏是十分科技化的，但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配，没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试。 设计和尺寸相关 IPone型号 屏幕尺寸 屏幕密度 开发尺寸 像素密度 倍图 4系列 3.5英寸 3
阅读全文
摘要：零散的知识不整理进入自己的知识框架太容易忘，对于CSS脑子里零零散散的！整理自勉！ 水平居中 块级元素水平居中 margin：auto 此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白 .block1{ height: 300px; width: 600px; backgr
阅读全文
摘要：行内元素的纵向padding和margin都是不考虑的，这是css规范定义的。inline元素确实可以设置垂直方向的padding和margin值，但是inline元素的margin和padding的垂直方向上不产生边距效果，即不影响布局。 1.首先行内元素是否具有盒子模型？答：行内元素同样具有盒子
阅读全文
摘要：<body> <div id="#div1"> <img src="img1.png"></img> </div> </body> 那么，如何让img元素在div中居中对齐呢？ 第一种方法 第一步：在img标签后面添加一个元素，比如说添加一个span元素 <body> <div id="div1">
阅读全文
摘要：文档流 文档流是一种默认定位方式，在文档流中元素框的位置由元素在html中的位置决定，文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行，自上而下排列；内联元素从左到右排列。让元素脱离文档流有三种方法：浮动float;绝对定位positio
阅读全文
摘要：在不同场合下，CRM（客户关系管理）可能是一个管理学术语，也可能是一个软件系统。我们通常所指的CRM，指用计算机自动化分析销售、市场营销、客户服务以及应用等流程的软件系统。通俗地说，CRM就是利用软件、硬件和网络技术，为企业建立一个客户信息收集、管理、分析、利用的信息系统。 CRM客户管理的流程是怎
阅读全文
摘要：弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性
阅读全文
摘要：Block formatting context （块级格式化上下文） 页面文档由块block构成 每个block在页面上占据自己的位置 使用新的元素构建BFC overflow：hidden | auto | scroll； 只要不为visible 新的空间 告诉浏览器，外面的环境影响不到我了 我
阅读全文
摘要：替换元素与非替换元素 替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容。 例如"<img src="xx.jpg">浏览器会根据标签的src属性的值来读取图片信息并显示，<input type="radio">浏览器会根据input标签的type属性来决定是显示输入框还是单选按钮 非替换
阅读全文
摘要：说明 写这篇文章是因为某天看到这样一个公式 r=a(1-cosθ) ，我上网搜了下，原来是笛卡尔心形线的极坐标方程，这个方程里面的确有一个浪漫又悲情的爱情故事，感兴趣的朋友可以点这里看看，而至于这个故事是真是假，这 并不重要。 而这篇文章的目的是要用前端的方式，画出笛卡尔心形线。本来我想，这么经典的
阅读全文
摘要：one more time one more chance. 一歩重头学前端, css入门。 学习一些 CSS 文本控制的属性，防止做傻事。请大家对照下面列表检验下： 会的、不会的、似懂非懂的。笔者是一个也不会。 white-space text-overflow: ellipsis; word-b
阅读全文
摘要：CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点和博客站点用响应式,因为布局简单,响应式足够 1.媒体查询 media query 媒体:电脑,纸张
阅读全文
摘要：原文链接：https://csswizardry.com/2018/... 背景资料 为了更好地控制产品主页缩略图的显示，（作者）团队选择了css的background-image而不是<img>标签；除了语义上的担忧，在样式的角度看，用css可以更好的控制图片在容器中的大小和位置；这种方式唯一值得
阅读全文
摘要：在PC端用1px的边框线，看起来还好，但在手机端看起来就很难看了，而0.5px的分割线会有种精致的感觉。用普通写法border:solid 0.5px red;iPhone可以正常显示，android下几乎所有的浏览器都会把0.5识别为0，即无边框状态. 原理 原理就是给需要加边框的元素插入一个伪类
阅读全文
摘要：推荐一个css3渐变效果工具，觉得有帮助的可以收藏下。 工具链接 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（
阅读全文
摘要：投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shadow:10px 0px 10px -10px black, -10px 0px 10px -10px
阅读全文
摘要：前言 有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。"来谈谈浏览器兼容的问题吧"，"你对浏览器的兼容性有了解过吗"，那么如何才是我们正确回答这个问题的姿势呢。 虽然面试官的问题十分的笼统，浏览器的兼容性无非还是样式兼容性（css），交互兼
阅读全文
摘要：前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若
阅读全文
摘要：我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使用比较频繁，使用过程中，我常混淆，经常切不到自己想要的效果，于是决定好好理解其工作机制，这篇文章就是介绍background-positi
阅读全文
摘要：一个简单通用的 React 抛物线动画demo Usage import { parabola } from "./parabola" ... onAnimate = () => { const config = { ballWrapper: this.$wrapper, //小球的父容器 orig
阅读全文
摘要：前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若
阅读全文
摘要：本文的内容为使用 HTML 与 CSS 来创建提示工具，提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感，也可以提升用户的可读性。（提示工具可以四周提示这里只演示上和右，左和下的同理调调距离就可以实现了） 一、提示内容在上面 1<效果图敬上> 2<代码敬上> <!doct
阅读全文
摘要：这一节，我们来讲规矩，谈网格，做人可以不要脸，不讲规矩，不讲道理（特指傲娇兽），但底线还是要有的，如同网格一样，不能超出。 jeet 这里我们别人封装好的模块，不过呢，我们也会详细介绍一下原理。首先我们安装以下 jeet 框架 npm install --save jeet 这个 jeet 框架有
阅读全文
摘要：前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若
阅读全文
摘要：上一篇：《CSS世界》笔记一：流/元素/尺寸下一篇：《CSS世界》笔记三：内联元素与对齐 写在前面 在读《CSS世界》第四章之前，粗浅的认为盒模型无非是margin/border/padding/content而已，再多无非在不同box-sizing下的表现不同而已；但是书中记录的替换元素与非替换元
阅读全文
摘要：本文主要取自于网易云课堂——前端微专业 页面制作github相关代码：https://github.com/Mirror1988... 💪布局解决方案 居中布局 水平居中 父元素与子元素宽度不定 <div class="parent1 parent"> <div class="child1 chi
阅读全文
摘要：前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若
阅读全文
摘要：图片通常是移动端网页中最占流量的资源。在很多类型的网站中（比如电商、社区），图片占据了网页的大部分空间。优化图片的质量和加载速度成为提高用户体验的重要途径。 传统方案的弊端 目前有一些被广泛应用的方案，例如选择压缩比更高的图片格式、使用雪碧图、HTTP2、CDN等。5年前的一条知乎回答前端开发中，对
阅读全文
摘要：1.概念 设备像素（device pixel）简写DP 设备像素又称 **物理像素** ，是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点。我们常说的 1920x1080像素分辨率就是用的设备像素单位。 css像素（css pixel） css像素是 **web编程的概念** ，它是 *
阅读全文
摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ 这是一道经典的面试题，常用的方法是：圣杯布局、双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。 圣杯布局 首先，我们先定义HTML结构： <div class='container'> <div class="middl
阅读全文
摘要：前言 设计师可以分为如下两类： 先做好设计，然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文，并创建适合于内容的设计 HTML原生就是响应式的（HTML内容在视口内流式的分布）。随着CSS的广泛应用，设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中，这有悖于HTML
阅读全文
摘要：引言 对我来说，table 有一个非常有用，支持性也很好的 CSS 属性，但它却很少为人所知。它改变了表格的渲染方式，并生成一个更加稳定可靠的布局。 它就是： table { table-layout: fixed; } table-layout的缺省值是 auto，这个属性值及其效果大家十分熟悉。
阅读全文
摘要：1. 盒模型的简介 本文简单的总结了一些基本概念，知识点以及细节问题 作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。 在我们编写HTML时，网页上的内容几乎都是被包在一个个元素（当然也可以叫做标签）中的，最常见的有div、span、a、img等等。虽然标签的个数很多样，
阅读全文
摘要：第一章 引言 css编码技巧 在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性都有一定的局限性。 第二章 背景与边框 半透明边框 bor
阅读全文
摘要：前言 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具备破坏流的特性。 float设计的初衷 很多新手在布局的时候，总喜欢用float
阅读全文
摘要：CSS架构 一。链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a:hover{ cursor:default; text-decoration: underline; } </s
阅读全文
摘要：CSS架构 1.浮动； 是以float属性设置容器指定的位置 <style> div { width: 200px; height: 200px; } #qq { background-color: lightcoral; /*float: right;*/ } #yy { /*width: 300
阅读全文
摘要：阅读本文之前最好对flex布局有基本了解，可以通过“参考资料”中列举的资源来学习。 flex布局规范的设计目标 一维布局模型(one-dimensional layout model)，元素项沿着水平或垂直方向来排列，就像一条沿着一个方向的“流”。 与之对应的，CSS Grid Layout是一个二
阅读全文
摘要：问题描述 浮动元素导致的后面img标签居中对齐“失败”，如下图 <div> <div class="content1"> <div class="float-left">left-div</div> <div class="float-right">right-div</div> </div> <d
阅读全文
