CSS

1. 什么是FlexBox FlexBox（”弹性布局”）是CSS3提供的用于布局的一套新属性，这套属性包括针对容器（弹性容器，flex container）和针对其直接子元素（弹性项，flex it

1. 前言 随着手机，平板等移动设备的普及，现如今的绝大多数web应用会对桌面端和移动端进行网页适配的兼容处理。由于移动端和桌面端设备的型号和分辨率种类比较繁杂，如果专门为这些不同设备和终端分别建立网站显然成本太高，很不现实，并且它们之间的界限也很模糊。所以创建可以适配多种设备…

CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性（值可为CSS数值单位，正负决定其方向）则决定了该元素的最终位置。 1. static定位 position属性的默认值，指定元素使用正常的布局行为，即元素在文档常规…

1. 用户行为伪类 selector:hover 表示匹配鼠标经过的selector选择器元素。 :hover不适用于移动端，虽然也能触发，但消失并不敏捷，体验反而奇怪。 selector:active 表示匹配激活状态的selector选择器元素（通过鼠标主键点击或触屏触摸的…

1. 优先级分级 1. ! important !important是顶级优先级，唯一推荐使用它的场景为忽略JS脚本设置的样式，使js设置样式无效。对于其他场景都没有使用它的理由，切勿滥用 2. style属性内联样式 3. ID选择器 4. class类选择器，属性选择器和伪…

1. 伪元素概念 CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现，用法和普通的元素用法是一样的。 2. 伪元素特点 不占用 DOM 节点，减少 DOM 节点数。 让…

1. 实现原理 这是我们使用border的常规代码——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易让大家对border的形成方式产生误解，即认为元素的border是由四个矩形边框拼接而成。 然而事实并不是这样。实际上，元素的border是由…

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内…

容器元素为块级元素，欲居中元素为行级元素。实现水平居中。 容器元素为块级元素，欲居中元素设置了宽度。实现水平居中。 （1）当child元素宽度或高度已知，且欲让其水平或垂直居中。则child元素样式为（若想同时水平垂直居中，则样式代码综合即可） （2）当child元素宽度/高度…

1. 浮动的初心 最初float属性的出现主要是为了实现浮动元素周围文字环绕的效果。如下示例： 可以发现，对于浮动元素后面的第一个同级正常元素，其文本会环绕在其周围（尤其是当浮动元素未占满一行时这一表现更加明显）。这是我们初始浮动所观察到的现象。实际上，这还不够全面和准确！ 2…

我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充…

欢迎访问个人博客网站：http://www.zhuxin.club1. 前置知识在真正讲解vertical-align属性之前，我们需要了解下面一些前置的知识1.1 x-Height在各种内联相关模型

1. 层叠的定义 层叠上下文，英文称作 stacking context，是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在 z 轴上就有一定优先级 层叠水平，英文

前言 复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个