weixin_50119334的博客

实现盒子垂直水平居中若要仅实现垂直居中，将有关水平居中的设置去掉即可（仅实现水平居中同理）要先清除边距盒子如下： <div class="box"> <div class="inner"></div> </div>方法一：利用 定位+transform先给子盒子绝对定位（不要忘记父盒子要相对定位），然后top、left分别设置为50%，再让盒子向上和向左走自己高、宽的一半 .box {

rem适配方案让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。rem实际开发适配方案按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询)CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;rem适配方案技术使用（市场主流）

Less基础维护css的弊端CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。CSS需要书写大量看似没有逻辑的代码冗余度是比较高的。不方便维护及扩展，不利于复用。CSS没有很好的计算能力非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。Less介绍Less( Leaner Style Sheets的缩写）是一门CSS扩展语言，也成为CSS预处理器。做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语

rem适配布局rem基础rem单位rem(root em)是一个相对单位，类似于em , em是相对于父元素的字体大小。不同的是rem的基准是相对于 html 元素的字体大小。比如，根元素( html ）设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，可以实现整体控制...

flex布局子项常见属性属性说明flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序）具体用法1. flexflex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0.item { flex: <number>;/* default o*/ }圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应圣杯布局：先设置父盒

flex布局flex布局原理flex是flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用Flex布局的元素，称为Flex容器(flex container），简称"容器"，它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。例

浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。私有前缀-moz-∶代表 firefox 浏览器私有属性-ms-:代表 ie 浏览器私有属性-webkit-:代表safari、chrome 私有属性-o-:代表Opera私有属性提倡的写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;...

3D转换我们主要学习工作中最常用的 3D位移 和 3D旋转主要知识点3D位移:translate3d(x,y,z)3D旋转:rotate3d(x,y,z)透视: perspective3D呈现:transfrom-style3D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。transform:translateX(100px)∶仅仅是在x轴上移动transform:translateY(100px):仅仅是在Y轴上移动transform:

动画动画(animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。动画的基本使用分为两步：先定义动画再使用（调用）动画1.用keyframes定义动画（类似定义类选择器）@keyframes动画名称{ 0%{ width:100px; }100%{ width: 200px; }}动画序列0%是

2D转换2D转换之移动translate（移动盒子的位置方法：定位、盒子的外边距、2d转换移动）2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。语法transform: translate(x,y);或者分开写:transform:translatex(n);transform:translateY(n);重点(1)定义2D转换中的移动，沿着x和Y轴移动元素(2)translate最大的优点:不会影响到其他元素的位置，（京东商城中鼠标经过图片上下浮动就是用这个

CSS3新特性ps:这些新特性都存在兼容性问题，基本都是IE9以上版本才支持移动端支持优于PC端新增选择器：1.属性选择器（类选择器和属性选择器 伪类选择器权重相同）（1）利用属性选择器可以不用借助类或id选择器例：input [values] { ....; } //选择出input中带有values属性的（2）属性选择器还可以选择属性等于值的某些元素（重要）input [type=text]{ ...; } //选择处input中type值等于text的（3）属性选择器可以选择以某

CSS高级技巧精灵图此技术是为了有效减少服务器接收和发送请求的次数，提高页面的加载速度核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次即可精灵图（sprites）的使用：精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片上。大图片称为sprites移动背景图片位置，可以用 background-position移动的距离就是目标图片的 x 和 y 坐标，注意网页中的坐标有所不同上正下负，右正左负，因为一般情况下都是向上或左移动，所以数值为负值

元素的显示与隐藏本质：让一个元素在页面中隐藏或者显示出来display属性（重要）display: none; – 让标签消失，隐藏元素并脱离文档流（不再占有原来的位置）display: inline; --内联元素(内联表签)display: block; – 除了转换为块级元素外，同时还有显示元素的意思display: inline-block; – 既有inline的属性也有block属性visibility元素visibility：visible ：元素是可见的。（默认值）vi

CSS之定位定位与浮动的区别：浮动：可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位：可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子定位的组成定位=定位模式+边偏移定位模式 position选择器 {position : 属性值；}position有四个属性值：1.**static：静态定位，**没有特殊的定位规则，遵循正常的文档流对象（极少使用）2 .relative：相对定位，相对于元素自身进行定位（参照物为元素原来的位置）//

CSS浮动CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。网页布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘！！！浮动特性（重要）：脱离标准普通流的控制（浮）移动到指定位置（动），（俗称“脱标”）浮动的盒子不再保留原先的位置如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶

盒子模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。...

CSS三大特性层叠性，继承性，优先级层叠性层叠性主要用来解决样式冲突问题层叠性原则：1.样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式（覆盖）2.样式不冲突，不会层叠继承性子标签会继承父标签的某些样式，如文本颜色和色号（主要是继承文字方面的样式）行高的继承：body{font:12px/1.5 Microsoft YaHei;}此处 12px/1.5 即 body内所有子元素的行高为当前文字大小12px的1.5倍此种方法优势：里面的子元素可以根据自己文字大小自动调整行

CSS的元素显示方法元素显示模式：即元素（标签）以什么方式进行展示1.块元素常用有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等，<div>最典型特点：比较霸道，自己独占一行高度，宽度，外边距，内边距都可以控制宽度默认为容器（父级宽度）的100%是一个容器及盒子，里面可以放行内或块级元素1.文字类的元素不能使用块元素2.<p>标签主要用于存放文字，因此&

CSS的复合选择器后代选择器（重要）后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。语法结构：元素1 元素2 { 样式声明 } /*选择元素1里面的所有元素2*/例：ol li{ color: pink }元素1与元素2之间用空格分开。元素1与元素2可以是任意基础选择器元素1是父级，元素2是子集，被选择的是元素2元素2可以是儿子，也可是孙子，只要是元素1的后代均可选择，可以一层一层继续选择下去ol li a {