web_xyk的专栏

    当大家开始做css3动画的时候，了解贝塞尔曲线就成了不可或缺的。“贝赛尔曲线”是由法国数学家Pierre Bézier所发明，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。这里主要说贝塞尔曲线在css3中的运用，三次方公式，四个点确定    三阶贝塞尔曲线由四个点确定，那么css3的贝塞尔函数cubic-bezier(x1,y1,x2,y2)只有两...

概念：元素的尺寸和位置的计算往往是由该元素所在的包含块决定的，包含块就是为它里面包含的元素定位提供一个初始位置，它是一片长方形的区域。一般元素用到position定位时，因需要确定定位的初始位置，就需要清楚什么是包含块。（为便与理解，个人做了简单的描述，不一定是标准解释）。包含块：1、在HTML中，html元素就是一个包含块（即初始包含块）。2、如果元素的定位（position）为：relativ...

概念：首先我们都知道网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。为什么用到盒模型：不同的盒模型计算出的盒子宽高不同，所以在网页布局的时候要清楚用的是哪个...

BFC（Block Formatting Context）：块级格式上下文，它是指一个独立的块级渲染区域，只有块级元素(Block-level BOX)参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。相应的还用IFC（行内元素上下级）等。Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。...

Media Queries：其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方式：一、直接在link中判断设备的尺寸，然后引用不同的css文件：< link rel = "stylesheet" type = "text/css" href ...

什么是Grid布局？    Grid布局即网格或者栅格布局，是一种基于二维网格布局系统。一、兼容性ie10、ie11支持带前缀-ms- 二、Grid布局类似flex布局。grid布局分为重要的两部分，容器和子元素。 这里给父容器设置类container,子元素设置类item。    效果如下： 父容器的属性     1. display: g...

position定位的八种方式：一、常见/用的四种1.staticpositon定位的默认值，没有定位2.relative生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative元素的位置通过top、right、bottom、left控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一...