雷雨天的雷胖子

但有时会发现，伪元素使用了单个冒号，这是由于旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式，必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。伪类一般匹配元素的一些特殊状态，，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。content属性是伪元素独有的，可以修改伪元素的内容。

word-wrap和word-break配合使用可以有效解决换行问题。如下代码所示，实现多行文本超出，末行显示省略号。如下代码所示，实现单行文本溢出显示省略号。利用box-reflect实现文字倒影。固定宽度的块状元素中，内容换行如下所示。如下代码所示，实现文字垂直排列。如下两段代码任选其一。

目录一、概述二、详解一、概述移动端适配一直以来都是前端开发中不可或缺的重要组成部分。flexible.js插件是一个终端设备适配的解决方案。flexible.js插件通过实现rem单位的自适应，来达到实现不同终端之间页面适配的目的。二、详解引用flexible.js插件flexible.js插件的用法非常简单，只需要在head标签中引入flexible_css.js...

目录一、概述二、解决方法一、概述如下代码所示，移动端高清屏上设置1px的边框效果，虽然代码正确，但结果却并不让人满意，抛出的问题一般为边框太粗。div { width:5rem; height:2rem; border:1px solid red;}上述代码没有任何问题，在高清屏上的确显示1px尺寸，但这个1px是指CSS像素，在高清屏中，一个C...

目录一、概述二、参数详解一、概述移动端视口默认为布局视口，并且不允许用户手动缩放。移动端可以通过meta标签控制视口，如下代码所示。<!--将视口的宽度设置为640px--><meta name="viewport" content="width=640"><!--将视口的宽度设置为设备独立像素宽度,默认无缩放,并且也不允许用户缩放--&...

目录一、概述二、移动端视口一、概述视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致，移动端视口与浏览器窗口宽度完全独立。PC端视口大小等于浏览器窗口可视区域大小，无论浏览器是否缩放。如下代码均可获得PC端视口宽度。window.innerWidth二、移动端视口移动端视口分为三...

目录一、概述二、详解一、概述Grid布局的属性分为两类，一类定义在容器上面，称为容器属性，一类定义在项目上面，称为项目属性。二、详解grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性定义项目的位置是可以单独指定的，具体方法就是指定项目的四个边框，表示分别定位在哪根网格线。注意...

目录一、概述二、详解一、概述Grid布局的属性分为两类，一类定义在容器上面，称为容器属性，一类定义在项目上面，称为项目属性。二、详解display属性属性值为grid，表示当前元素采用网格布局。设为网格布局后，项目的float、inline-block、display:table-cell、vertical-align和column-*等设置将失效。div {...

目录一、Grid布局与Flex布局二、Grid布局的概念一、Grid布局与Flex布局如上图所示，Grid布局可以很轻松的实现这种布局。Grid网格布局是最强的CSS布局方案，它可以将网页划分成一个个网格，任意组合不同的网格，做出各种各样的布局。Grid布局是CSS中一种新的布局方式，对盒子和盒子内的位置及尺寸有很强的控制能力。Flex布局是轴线布局，只能指定项目针对轴线的...

目录1、骰子的布局2、网格布局3、圣杯布局4、输入框布局5、悬挂式布局6、固定的底栏7、流式布局1、骰子的布局公共样式<style> * { box-sizing: border-box; } html, body { height: 95%; }...

目录一、概述二、详解一、概述flex布局中，容器上可以设置如下6个属性。(1) flex-direction(2) flex-wrap(3) flex-flow(4) justify-content(5) align-items(6) align-content二、详解flex-direction属性 设置主轴的方...

目录一、概述二、详解一、概述flex容器中的项目如下所示，共有6个属性。(1) flex(2) flex-grow(3) flex-shrink(4) flex-basis(5) align-self(6) order二、详解flex属性概念flex是一个复合属性，适用于CSS3弹性盒模型中的所有子元素，即容器中的项目。flex用来设置容器中的...

flex布局flex布局是w3c于2009年提出的概念，可以方便、完整、响应式的实现各种页面布局。flex全称Flexible Box，意为弹性布局，可以为盒状布局提供最大的灵活性。任何一个元素都可以指定为flex布局。Webkit内核的浏览器，必须加上-webkit前缀。注意，设为flex布局后，子项目的float、clear、vertical-align属性将失效。/*块级元素...

目录一、BFC二、视觉格式化模型一、BFCBFC全称Block Formatting Context，翻译为块格式化上下文，是由CSS2.1规范定义的一个关于CSS渲染定位的概念。BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。如下所示为，触发一个盒子的bfc，将其转化为bfc元素的方法。方法一: position:absolute/fix...

目录一、概述二、详解三、代码实例一、概述animation是CSS3新增的一个属性，可以设置元素的动画特效。二、详解animation定义和用法animation是一个复合属性，适用于所有元素，包含伪对象:after和:before。如果提供多组属性值，中间用逗号隔开。animation: animation-name||animation-duratio...

目录一、概述二、详解三、代码实例一、概述transition是CSS3新增加的属性，可以为同一元素的多个属性定义过渡动画。二、详解transition的定义和用法transition是一个复合属性，用于设置元素的过渡动画，适用于所有元素，包括伪对象:after和:before，定义如下。transition：transition-property||tra...

目录一、概述二、详解一、概述transform是CSS3新增加的属性，主要控制元素变形，没有一个时间控制的概念。二、详解旋转transform:rotate(xxxdeg); //使元素旋转多少度，正数为顺时针旋转多少度, 负数为逆时针旋转多少度<style> div { width: 200px; hei...

span:first-of-type 选择属于其父元素的首个元素span:last-of-type 选择属于其父元素的最后元素span:only-of-type 选择属于其父元素唯一的元素span:only-child 选择属于其父元素的唯一子元素span:nth-child(2) 选择属于其父元素的第二个子元素:enabled :disabled ...

一、流式布局流式布局即百分比布局，使用非固定像素来定义网页内容，盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制。二、响应式布局利用CSS3的媒体查询，通过查询screen的宽度来指定某个宽度区间的网页布局。超小屏幕(移动设备) 768px 以下小屏设备 768px-992px中等屏幕 992px-1200px宽屏设备 1200px 以上...

目录一、概述二、圣杯布局三、双飞翼布局一、概述圣杯布局和双飞翼布局都是比较经典的三栏布局，它们都是一种相对布局。两种布局达到的效果基本相同，都是左右侧边栏固定，中间栏宽度自适应。在html结构上，将中间栏放在最前面，保证最先渲染中间栏以提升性能。圣杯布局是使用padding使中间栏为两侧边栏腾开位置，双飞翼布局是中间栏不变，使用margin使内容部分为两侧边栏腾开位置。...

目录一、概述二、详解一、概述三栏布局是一种很常见的布局方式，要求左右侧边栏固定宽度，中间栏自适应。以下介绍三种实现方式，html结构如下所示。<div class="container"> <div class="main">main</div> <div class="left">left</div>...

目录一、概述二、图解三、box-sizing一、概述CSS中有两种盒模型，其一W3C标准盒模型，其二IE盒模型。二、图解标准盒模型标准盒模型中，盒子宽度等于内容区宽度，如下所示。IE盒模型IE盒模型中，盒子宽度等于内容区宽度、内边距和边框三部分的总和，如下所示。三、box-sizing可以借助CSS3的box-sizing属性切换盒...

目录一、概述二、详解一、概述在PC端，视口是指浏览器的可视区域。在移动端，视口（viewport）分为三种，其一布局视口，其二视觉视口，其三理想视口。视口单位是CSS3新引入的概念，其中的视口是指PC端浏览器的可视区域和移动端的布局视口。视口单位如下所示。(1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1%(2) vh 相对于视口...

目录一、设备像素比二、单位转换三、字体尺寸适配一、设备像素比眼中所看到的屏幕是由一个个物理像素组成，而CSS使用的是逻辑像素，也称为虚拟像素。设备的像素比DPR（也称为精度）体现了物理像素和逻辑像素的关系。计算公式如下所示.。DPR = 物理像素/逻辑像素像素比的存在，就是明明CSS中设置一样的像素，不同设备显示存在区别的原因。二、单位转换Sass中可以实现p...

目录一、概述二、详解一、概述rem是一个相对长度单位，它的单位长度取决于根标签html的字体尺寸。rem即root em的意思，中文翻译为根em。浏览器的文本尺寸一般默认为16px，即默认情况下：1rem = 16pxrem布局原理：根据CSS媒体查询功能，更改根标签的字体尺寸，实现rem单位随屏幕尺寸的变化，如下代码所示。@media only screen an...

目录一、概述二、详解三、注意事项一、概述em是一个相对长度单位，它的单位长度取决于当前元素行内文本的字体尺寸，如当前元素行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度，故名em，现指字符宽度的倍数，用法类似百分比，如：0.8em、1.2em、2em等。em可以设置width、height、line-height、margin、padding...

目录一、概述二、精度三、拓展一、概述px是一个相对单位，也是一个虚拟长度单位，称为虚拟像素或逻辑像素。虚拟像素可以理解为视觉上的像素，是CSS和JS使用的抽象单位，浏览器中的一切长度最终都是以虚拟像素为单位，如rem和em，都是对标的虚拟像素。二、精度眼中所看到的屏幕是由一个个物理像素组成，而CSS使用的是逻辑像素px。如果想将逻辑像素转换为物理像素，需要指定精度DPI...