dreamingbaobei的博客

在工作中遇到这样一个需求，客户要求： 1、实现在浏览器中打印和导出到word中，要求浏览器打印出来的效果和word中打印的效果基本一致。假设word中取边距为上下2.54cm，左右3.18cm，即向下边距1英寸，左右边距约1.25英寸，按96pdi计算，上下边距96px,左右边距约为120px。通过以上计算后可得A4纸96dpi下的分辨率约为793.7px×1122.5px，向下取整为宽793像素和高1122像素，这是我们在制作网页的时候需要的像素。浏览器打印机和导出word支持的样式,由于网页。

介绍移动端布局常用方法之前，推荐回顾一下这3篇博文。移动端布局-分辨率和视口网页的响应式布局与媒体查询一步步学习Flex弹性布局在做移动端布局时，html的header中加上这段代码<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">移动端布局时，首先要确认一下需求，即是否需要兼容PC端，即两端适配，这是移动端布局的比较麻烦的情况，这时候我通常用响应式布局和媒体查询来

在移动端布局时，图片的显示是个棘手的问题。通常我们会要求运营在上传图片时使用我们规定比例的文章，但不能保证被严格的执行，必然会导致一些扭曲、页面的跑位等等问题由于移动端图片宽度要适应设备，为避免扭曲，高度不能限定，会图片加载过程中会出现页面的白屏抖动等情况如下图有4个不同比例的图片，使用弹性布局，限定图片的宽度、不限定高度，显然不是我们想要的结果我们使用css来解决图片比例的问题，块...

静态布局（Static Layout）是最传统的网页布局方式，也是前端的一个基本功，通常应用于PC端布局，当我们拿到UI提供的PC端PS设计稿，基本上就要用到静态布局了。静态布局对前端来说是比较简单的，但如果想做到又快又好，建议前端要去学习一下PS的知识，大多数情况下，当你收到了设计稿，就会有人问你什么时候能实现（布局），我觉得对于比较复杂的首页，至少两天以内要完成，简单的页面当天应该完成。静...

现在已经很少有人提及，其实最早的页面布局是使用table布局的，那时候的网页设计师基本不会担心跑位的问题，

存在即有道理，为什么Flex弹性布局会大行其道，这是因为网页传统布局是基于盒模型，为了实现复杂的页面效果，需要结合着浮动、相对定位、绝对定位、display属性，这样做会使布局工作相当繁琐，还有一个困扰切图狗的问题，就是各种垂直居中问题。2009年css3为display增加了一个新的属性值flex,定义了display:flex的元素（容器）的**直接子元素**默认成了父元素的flex-item（项目），项目具有了弹性，并且float、clear和vertical-align属性将失效。

客观上，客户端浏览器中用于呈现网页的区域大小不同，即viewport(视口)不同，主观上，我们的页面代码又想给每一位用户完美的体验，这就需要网页具有变通的能力，让布局和呈现能够根据视口的变化而变化。响应式布局可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。要实现响应式布局，先要理解几个概念：物理分辨率和逻辑分辨率...

响应式布局是为了一个页面在所有终端上（各种尺寸的PC、手机）都能显示出令人满意的效果，搭配媒体查询技术分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

css3中display有属性值flex和grid，如果一个元素的display属性定义为flex,该元素就是flex容器，其直接子元素就是Flex Item ,相对的一个元素的display属性定义为grid该元素就是grid容器，其直接子元素默认成了父元素的Grid item。...

用css3做网页动态效果，主要涉及3个属性：1、transition 使元素的某些属性从一个状态到另一个状态时产生平滑的过渡2、animation 使元素产生动画效果3、transform 使元素产生旋转、缩放、偏移等变换...

Mixin意为混合，在css预处理器中，允许你将一个类嵌入到另一个类中，被嵌入的类也可以看作变量。换句话说，你可以用一个类定义样式，然后把它当作变量，在另一个类中，只要引用变量的名字，就能使用它的所有属性，以LESS为例：.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}上述代码中，...

为什么前端常常被叫做前端设计师，而不是程序员，可能是因为前端常常要写CSS,CSS不是一种编程语言，而是描述网页样式的语言，只能写html+css的前端才被叫做切图狗吧，CSS能够呈现的效果固然经常，但是写CSS样式的工作确很繁琐。既然写CSS是一项简单而繁琐的工作，那么能不能从把前端从枯燥无味的工作中解放出来，去做较复杂的工作呢，答案就在下面，诞生了一种叫CSS预处理器的语言。CSS预处理器...

display 属性、盒模型属性、定位属性、弹性盒属性

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思 考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人；

CSS的属性大致可以分成几类：字体属性、文本属性、背景属性、列表属性、表格属性、轮廓属性、鼠标光标属性、filter滤镜属性

CSS，中文叫层叠样式表，样式表，css不是编程语言，作为一种与浏览器交流的工具,css用来描述 HTML 元素的的样式，比如大小，颜色，字体等等。CSS这门语言的语法特别简单，只有一句：选择器{属性：属性值;属性：属性值;…},如果说CSS有难点，就是这门语言不断增加的词汇了，CSS的发展就是一个不断补充的过程，所以在使用CSS的时候，不需要像HTML那行申明使用的标准，高版本...

HTML中所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。盒子模型是由内容（content）、边框(border)、内边距（padding）、外边距（margin）组成

CSS3新增的选择器和新增的属性

到底什么是选择器？通过常接触的CSS选择器和jQuery选择器理解一下，我们知道CSS是用于分离网页的结构和表现的，也就是说对于一个网页，HTML定义网页的结构，CSS描述网页的样子，一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript,这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS...

在写HTML代码时，你有没有感到痛苦，我们甚至要花好多时间写这些符号<>,"",/,写CSS的时候，有时候要写一大堆的浏览器前缀。Emmet就是一款能解放我们的工具。Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。我们之前提过的Sublime,VS code,Webstor...

说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。接下来的行文内容大概会按照这个顺序进行，内容十分基础，可选择性跳到相应内容处阅读。色彩关键字嗯，色彩关键字很好理解。它表示一个具体的颜色值，且它不区分大小写。譬如这样color:red的 red ...

开发人员基本都知道，CSS的开发本身并不难，但是，当在不同的浏览器下测试代码时，困难就出现了。浏览器的 bug 和不一致的显示方式，是大多数CSS开发人员面临的主要难题，你的设计在一种浏览器上看起来很好，而在另一种浏览器上可能会支离破碎。实践证明，CSS的兼容性主要有两种情况：一种是对老版本IE的兼容性，一种是使用CSS3新特性后产生的兼容性。对老版本IE的兼容性，主要通过...

什么是Css Reset在 HTML标签在浏览器里有默认的样式，不同浏览器的默认样式之间也会有差别。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。很多前端上来就是一句全局Rese...

CSS推荐的书写顺序书写顺序：按照下述1 2 3 4 5的顺序进行书写定位属性：position display float left top right bottom overflow clear z-index自身属性：width height padding border margin background文字样式：font-family fo...