越努力，越幸运！

一、通过display:table实现html<div class="line">中间文字</div>css .line { display: table; width: 100%; white-space: nowrap; border-spacing: .2rem 0; color: #ccc; } .line:before, .line:after { d

前言说到css的单位，大家应该首先想到的是像素单位px，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。一、CSS单位CSS 有几个不同的单位用于表示长度，一些设置 CSS 长度的属性有 width，margin，padding，font-si

在resize属性出来之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。resize属性主要是通过拖动的方式来改变元素尺寸大小的，其主要目的是增强用户体验。resize属性值属性值 说明 none 用户无法拖动调整元素的尺寸。 both 用户可拖动调整元素的高度和宽度。 horizontal 用户仅可...

/deep/可以翻译为深入的，深远的。看到前端大佬在css中有关于这种写法，开始没太注意，以为是框架自带的写法，后来发现不是。scoped介绍为了vue页面样式模块化，不对全局造成污染，给每个页面的<style>标签加上scoped属性，表示它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 po...

求知若渴，虚心若愚一个人要有强大的求知欲，不断的学习才能使自己更优秀，同时要低调谦虚，不要骄傲自大才能使自己成熟稳重。书籍链接链接:https://pan.baidu.com/s/1adjY30u3K5P1mFjCGdRFkQ 提取码: c97w...

前言BFC 已经是一个耳听熟闻的词语了，但是我对于BFC的概念以及应用场景一直都不是很明白，据说搞懂BFC可以让我们理解CSS中某些原本诡异的地方。今天着重去了解了一下，做了以下总结。一、文档流在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC（Formatting Context），直译过来就是“格式化上下...

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分...

圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。效果图 原本录制了...

css3 Animation属性 css3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现复杂的动画效果。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。css3Animation属性详解属性 描述 参数 animation 所有动画属性的简...

在web前端开发中经常需要使用到让div进行水平和垂直居中的技术,现在我们就来谈谈如何实现div水平垂直居中（如下图所示）div元素在屏幕上水平垂直居中的三种方法HTML中有个class为box的div元素，通过修改css样式让box元素在页面水平垂直居中显示&lt;body&gt; &lt;div class="box"&gt; &lt;/div&gt;...

对于前端开发人员来说，网页布局是css的一个重点应用，一个完美的网页布局会给人一种和平舒畅的心情~   but传统的布局方案是基于盒模型，依赖display属性 + position属性 + float属性来进行布局，它对于那些特殊布局非常不方便。直到我学习了css3的flex布局属性，立马就喜欢上了这种简洁、方便、快速的布局方式Flex布局的介绍Flex是（Flexible Box 弹性...

一，样式属性顺序1、布局位置（position，top，right，z-index，display，float等）2、尺寸大小（宽度，高度，填充，边距）3、文字系列（字体，行高，字母间距，颜色文字对齐等）4、视觉效果（background，border等）5、其他（动画，转换等）二，缩写属性和属性值1、CSS有些属性是可以缩写的，比如填充，边缘，字体，背景，边框等等。缩写代码可以提高用户的阅读体验...

使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。display与元素的隐藏如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方...