过客如期的博客

1.当一个重复被使用的css属性值需要修改时，需要在每一个使用的地方修改一次，显然是很麻烦的。在css3中引入了属性变量和var函数的概念，让css也可以拥有变量。1.在伪类:root中全局定义:root {2.在局部中定义.box {

1.vh和vw是一种视窗单位，也是相对单位，是css3新增的一种自适应方案。

一，前言1.在进行前端开发时，页面常常会有一些小图标的设计，阿里巴巴的iconfont图标库包含了海量的矢量图标，供我们选择和下载，是很方便的工具。2.官网地址：iconfont

一，响应式设计1.说到响应式设计就离不开媒体查询，二，常见媒体介质1.screen:用于电脑屏幕，平板电脑，智能手机等。 (默认值)2.all：用于所有设备。3.print：用于打印机和打印预览4.其中screen和all是最常使用，所有浏览器兼容的三，媒体属性四，CSS3媒体查询实现五，CSS2媒体查询...

1

一，折叠效应1.在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。二，折叠条件1.大于等于2个元素，且相邻的两个或多个元素都需符合下面所需的折叠条件。2.垂直方向。3.元素处于普通流：（浮动元素，绝对定位，固定定位不会和任何元素发生折叠，包括其相邻子元素）4.块级元素：（行内块级元素不会和任何元素发生折叠，包括和其相邻子元素）5.毗邻:（两元素之间没有padding,没有border,没有其他元

css3 animation动画属性一，浏览器支持情况 IE Firefox Chrome Safari Opera Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。 Safari 和 Chrome 支持替代的 -webkit-animation 属性。 注释：Internet Explorer 9 以及......

一，下载字体包1.有时在写页面的时候ui设计的图比较复杂，里面有很多字体在默认的字体类型是没有的，因此我们要下载相应的字体包.ttf文件二，字体包引入1.使用@font-face引入字体包@font-face{ font-family:led, // 自定义名称，无需引号 src:url( '../../xxx' ) // 字体文件路径}三，字体使用1.像默认方式一样，使用font-family属性就行font-family: led //无需引号...

一，前言1.在写网页样式的时候，css背景是十分常用的属性，定义了元素的背景样式。2.背景图片默认大小是图片本身，图片的左上角和元素的左上角点对齐。二，css2背景1.background-color:定义了元素的背景颜色2.background-image:定义了元素的背景图片3.background-size:定义了元素的背景大小100px 100px : 固定像素取值，字面意思就是背景图片的大小100% 100%:contain:cover:4.background-positi

一，过渡属性1.transition用于过渡属性，即属性值改变前后有过渡效果。2.注意，过渡属于一定要定义过渡前的属性和过渡后的属性，**若过渡前属性未明确定义则不会产生过渡效果。**如下，若过渡前width没有直接定义，则width不会产生过渡效果。3.transition定义在那个类或者那个伪类等等选择上都无所谓，只要该选择器仍作用于标签元素则过渡效果仍能生效。二，子属性1.transition-property: 定义过渡的属性，值为none时所有属性没有过渡效果，值为all，所有属性具有

一，伪类通用:hover 悬浮显示样式:active 当被激活时显示样式:first-child 作用于该元素父元素的第一个子元素:last-child 作用于该元素父元素的最后一个子元素:nth-child(2) 作用于该元素父元素的第n个子元素超链接:visited 访问后过得链接样式:link 点击之前的样式输入表单:focus 表单聚焦时的样式二，伪元素before...

一，display:none1.dom依然渲染，看不见摸不着2.将一个元素切换到display:none时，会引发回流和重绘，因为页面会重新布局。二，visualbility:hidden1.占据原来的空间，看不见摸得着2.定义在元素上面的事件如点击事件依然会执行，只会触发重绘三，opcity:01，同visualbility:hidden 看不见摸得着2.就是将透明度设为100%，四，注意1.这三种方法都没有销毁DOM...

1.html和body是最外面的容器：设置宽度100%，高度100% 即整个屏幕块级元素默认宽度是父元素宽度100%，默认高度为0，行内块级元素默认宽度为0，由内部元素撑开，块级元素的高度默认为0，可自己设置，或者由未脱离文档流的子元素撑起来普通元素的百分比是参考父元素的高度，假如父元素未设置高度，由子元素撑开则百分比参考无效。定位元素脱离文档流的百分比相对一其参考元素，background:默认填充padding的...

一，情况一：页面看不到元素1.首先第一步我们看html文件，看我们的元素Dom节点有没有被渲染出来，html是内容，和样式无关。2.所以，如果没有被渲染出来，说明不是样式的问题，而要去查为什么没有渲染出来这个dom3.如果已经有dom,说明就是样式问题了，4.首先看一下宽高，可能是因为百分比引起的高度为0,导致不显示5.看下是不是绝对定位，若是，可能是因为参考点没找好6.若是普通元素可以看是是不是被其他浮动元素和定位元素覆盖了。...

一，什么是flex布局1.flex布局代表弹性盒子，可用于自适应布局。2.目前所有浏览器都支持flex布局3.使用flex布局后，弹性盒子内的float无效。二，flex布局特征1.我们可以使用display：flex；display:-webkit-flex声明一个盒子为弹性盒子，盒子里的元素可称为项目。2.在弹性盒子里默认有一条水平的轴线称之为主轴，还有一条垂直的轴线称为交叉轴。所有元素默认排列在主轴上。三，容器上的属性1.flex-dirction: row || row-rever

一，什么是BFC1.BFC代表块级格式化上下文。2.具有 BFC 特性的元素可以看作是隔离了的独立容器，无论容器内元素如何布局都不会影响外部。二，BFC触发条件1.具有overflow属性 (inline-block和block)， 且overflow属性不为visible，例如常见的overflow：hidden。2.display:inline-block,行内块级元素具有BFC属性。3.float:浮动元素4.display:flex5.position:absolute || fix

一，块级元素1.块级元素总是从新的一行开始，宽度缺省值为父容器宽度，具有完整的盒子模型，可以容纳其他块级元素和内联元素。2.HTML标签中常用的块级元素有：div，p，h1-6，hr，ul，ol，li，footer，header二，行内元素1.内联元素不会创建一个新行，缺省值宽度为内容的宽度，不可以设置宽高，只可以容纳其他内联元素或文本。2.对行内元素设置padding和margin上下...

一，transform（变形）1.transform字面的意思就是变形的意思，在CSS3中，transform支持的几个操作有旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。二，transform各操作使用介绍1.rotate(deg) ：rotate以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。2.translate(x,y)......

一，position属性1.CSS定位在页面的布局中经常被使用，我们可以使用position属性指定元素的定位方式。2.CSS定位总共有5种静态定位：static相对定位：relative绝对定位：absolute固定定位：fixed粘性定位：sticky3.静态定位static是元素定位的默认值，元素处于本应处于的位置。4.relative、absolute、fixed这三个属...

一，盒子模型介绍1.每一个可见的 HTML 元素都是一个长方形盒子，一个盒子由外边距（margin），边框（border）,内边距（padding）和内容(content)组成2.盒子的宽度（width）和高度 (height) 的计算方式由box-sizing属性控制,(1) box-sizing : content-box ：W3C标准盒子，width和height属性应用到元素的内容...

css选择器的学习和总结