摘要:
写在前面的话 笔者从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.首先行内元素是否具有盒子模型?答:行内元素同样具有盒子 阅读全文