随笔分类 - HTML和CSS
摘要：前言 我们大多都了解绝对定位、相对定位、static 和 fixed 定位，而 sticky 定位常常会被忽略，本文来总结一下其相关使用方法。 正文 1、常见使用效果 我们滚动滚动条时，当 “ 我是粘性定位！” 的元素在触顶之后，他却没有继续向上滑动，而停留在可视区域内，这种实现效果就需要通过 st
阅读全文
摘要：前言 作为前端开发人员或者学生，你一定知道BFC这个关键词，但是你是否具体了解过什么是BFC?BFC有什么用？BFC怎么用些问题呢?本文就来总结一下相关的知识点，希望对阅读到的小伙伴在面试、学习、开发中有所帮助。 正文 1、什么是BFC 首先来看下下面的代码段1： <style> .wrapDiv
阅读全文
摘要：前言 本文总结一下html5 新增的元素拖拽功能的使用。 正文 1、H5之前的拖拽功能实现方法 JS 拖 拖 拽 功 能 的 实 现首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行mousemove 里
阅读全文
摘要：前言 在编写css样式代码的时候，我们经常会遇到z-index属性的使用，我们可能只了解z-index能够提高元素的层级，并不知道具体是怎么实现的。本文就来总结一个由z-index 引发的层叠上下文和层叠顺序相关知识点，有了这方面的了解，才能减少开发中遇到的bug，同时这也是面试中经常遇到的问题。
阅读全文
摘要：前言 元素居中是日常开发和学习中最常见的问题，同时也是面试中经常考察的知识点，本文来总结一下这方面的知识点。 正文 1、水平居中 （1）子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效。 <div class="wrap"> <div class="inne
阅读全文
摘要：前言 最近群里的小伙伴去面试，遇到这样一个问题，面试官问："用 css 对一行文字进行布局，当文字不够换行的时候，这行文字要居中显示，当文字出现换行的时候，这行文字要靠左显示。"，遇到这样的需求一下束手无策，后来查下资料，哦，原来这样，这里总结一下实现的具体方法。 正文 1.需求分析与使用场景 具体
阅读全文
摘要：前言 前段时间找工作面试官问到一个问题，你如何将一个网页整体置灰？面试遇到这样的问题，一下束手无策，之前没有接触过这样的需求，因此没有回答上来，面试结束我才知道了这是考查对 CSS3 的新属性的了解。这里需要掌握 filter(滤镜) 这个新属性。细想一下，这个需求成立啊，比如遇到清明节、全国哀悼日
阅读全文
摘要：前言 前端开发最基础的能力是根据 ui 设计稿迅速还原页面，拿到设计稿不要急于写代码，首先要对页面进行分析，对页面的整体布局有个大概的了解，然后先实现一个整体的布局，再把布局拆分成逐个小模块，逐个去实现页面效果，基于传统的 float，div+css 等布局的方法，这篇文章总结一下 flex 布局在
阅读全文
摘要：前言 前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页，这就缺少不了必要的网页布局，首先看下最近小伙伴问我的一个问题，他说一个网页有左右两个部分，左右两个部分的宽高度都不固定，要使得右部分的宽度充满剩余的部分，并且高度随着左边的高度发生自适应，而左侧的高度随着内容的高度发生变化，对于这么一
阅读全文
摘要：前言 你在前端写样式的时候遇到过需要设置滚动条的时候吗？或者你知道如何让父元素下面超出的子元素隐藏起来吗？那么本文主要记录一下前端在写 css 样式的时候经常遇到 overflow 属性的理解以及 overflow：hidden 的详细使用方法。同时面试时候也经常遇到这样的问题：谈谈你对 overf
阅读全文
摘要：前言 在平常的代码开发或者学习中你是否会特别注意一些细节问题，比如数组的 push() 方法返回值你知道吗？你可能经常用到 push() 这个方法，知道式在数组的末尾添加一个新的元素，形成一个新数组，那返回值是什么？是新数组？还是什么？(我来告诉你，返回的是新数组的长度)，平常你会去了解它的这些细节
阅读全文
摘要：前言 作为一个前端开发人员，工作学习中经常会遇到快速构建网页布局的情况，这篇我整理了一下我知道的一些方法。我也是第一次总结，包括圣杯布局，双飞翼布局，table-cell布局都是第一次听说，可能会有需要修改的地方请谅解。三栏布局顾名思义，就是左右两侧宽高固定，中间一列居中切随着浏览器页面变化。下面来
阅读全文
摘要：前言 这里主要介绍下css中background和radial-giadient径向渐变的使用，工作中用到的地方可能也不太多，但是每次用到了都需要查阅官网，查资料就比较麻烦，这里记录一下我自己整理的常见用法，方便日后使用吧！这里省去了一些特别特别基础的使用语法。 目录 自己根据两个属性实现的一些简单
阅读全文
摘要：前端面试题CSS-div宽度设置为100%，设置属性margin-left和margin-right时出现的问题 div格式如下 <div class="a"> <div class="b"></div> </div> css样式,子元素宽度等于父元素的宽，margin-left有效，margin-
阅读全文
