A. 前端开发应该知道的几个CSS网页表单布局技巧
1、绝对定位
在绝大过程中，想确定一个元素在网站当中的固定位置，绝对定位是实现这个方式的解决办法。在网页当中，绝对定位可精确的控制元素在网页当中的位置，我们可使用顶部、底部、左侧和右侧，附上一个像素值来控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。
2、覆盖所有样式
写CSS的时候都应该知道，当你想给一个元素添加一个新的CSS样式，但这个样式之前已经被定义过了。此时我们可以采用！important来定义。
例如，如果我想在我的网站的特定部分的H3标题是红色而不是黄色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情况，一般会分成文本居中和DIV的内容居中。
文本居中
文本居中使用text-align：center; 。如果想让文本在左右两侧，可以使用左侧或右侧。
DIV内容
DIV内容居中跟文本居中不一样。CSS可以这样定义：
#div1 { display: block; margin: auto; width: anything under 100% }
把宽度设置为“100％以下”的原因是因为如果它是100％宽度，那么如果是全宽度，并且不需要居中。最好有一个固定的宽度，如60％或550像素等。
4、垂直对齐（对于一行文本）
要使菜单的高度和文本的行高一致，可以这么设置：
.nav li{line-height:50px; height:50px;}
5、悬停效果
这适用于按钮，文本链接，网站的部分，图标等等。如果你想做一个悬停效果，可以试试：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
这个功能可以让你的h2标签的颜色从黑色变成黄色。
6、悬停效果过渡
对于悬停效果，如使用菜单或网站上的图像，我们肯定不希望颜色快速贴近结果，所以我们可以通过使用时间变化来达到过渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
这就使得样式上的改变，可以是从黑色变黄色的过渡时间是0.5秒，而不是立即变成黄色。这使得悬停效果更加和谐而不会显得太突兀。
7、a标签的状态
我们在遇到a标签的时候，一定要给a标签做样式定义，否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过，更利于用户体验。
a:link {color: blue; } a:visited {color: red; }
8、轻松调整图像大小以适应
说到这个样式，我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手，我相信这个效果肯定有很多人都想做，当然，我提供的方法也只是其中的一种：
img {max-width:100%;height:auto;}
这个样式意味着最大的图像可能是100％，并根据图像宽度自动计算高度。在某些情况下，您可能还必须指定宽度为100％。
9、父级元素和子元素
如果ni不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器：
h1 > strong {color:red;}
特殊情况下你可能会想定义第N个子元素的样式，这样就可以用到下面这个样式：li:nth-child(n)
具体的使用方法可以去w3school上看。
10、将CSS应用于多个类或选择器
如果你想要在所有图片，博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目，用逗号分隔：
.blog,img,.sidebar {border: 1px solid #000;}
B. 前端面试题系列之-CSS及页面布局篇
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。
采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：
设置到项目上的属性：
(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
上述方法都可以创建BFC，但是会带来一些负面影响：
::before是css3的写法，:before是css2的写法，用来设置对象前的内容
:before的兼容性要比::before好
更准确的说法
1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
常规方法
不需要使用transform属性时
webkit内核
参考链接：
CSS实现不换行/自动换行/文本超出隐藏显示省略号
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能
@import规则一定要先于除了@charset的其他任何CSS规则。
不推荐使用@import:
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
伪元素和伪类的区别总结
css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。
相关链接：
CSS 继承，哪些属性能继承，哪些不能
z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。
px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块
设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
1英寸（inch）=2.54厘米（cm）
手机对角线的长度换算成英寸
屏幕横向和纵向的像素点
1px即代表一个物理像素点/像素块
PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）
1px与多少厘米之间是不能直接划等号的，需要看分辨率。
一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px；
很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。
参考链接：
画一条0.5px的线
在继承性上：
一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。
一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。
渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。
C. web前端开发需要哪些技能
一、HTML5+CSS3
HTML5和CSS3是通往Web工程师路上必须学会的基本内容，主要包括了解常用浏览器和浏览器内核;了解语义化的概念;掌握HTML5语法及使用技巧;掌握HTML5常用标签。掌握CSS语法及使用技巧;掌握DIV+CSS布局方式;掌握常见网页布局模式。掌握HTML5新布局标签、多媒体标签;掌握CSS32D、3D变换、动画效果;能够使用CSS3新属性美化修饰网页;了解移动端屏幕、移动端浏览器、操作系统的不同等内容。
二、JS交互设计
JS交互技术可以赋予页面一个动态的效果展示，提升用户的浏览体验，这部分主要是通过JS的学习掌握JavaScript基本语法;掌握常见JavaScript算法;掌握DOM的各种操作;熟练使用面向对象思想进行DOM编程;掌握JavaScript的高级语法;掌握JavaScript常见兼容性方案。熟练使用jQuery操作DOM;熟练使用和编写jQuery案例。
三、Node开发
Node.js不仅仅是一个框架，它是一个完整的JavaScript环境，配备了开发人员可能需要的开发工具。所以学好Node是在打通前后端开发中需要掌握的技术。这部分需要掌握ES6的基础用法和兼容性;掌握ES6的核心语法;使用ES6实现前端模块化开发。使用Webpack模块打包器;使用Node.js进行Web服务端开发;掌握JavaScript异步编程模型;掌握JavaScript模块化编程方式;使用Node.js操作MongoDB数据库;独立开发基于后台接口的动态网站、Ajax数据交互的项目;独立完成企业网站从前台到后台的基本开发工作。
四、前端框架
前端框架是Web开发人员需要熟练掌握的技能，并且在实际开发中是会被广泛应用的，那么对于前端框架方面需要掌握现在主流的Vue、React、Angular等，掌握D3.js进行大数据可视化交互开发;掌握Vue技术栈进行项目开发;掌握React技术栈进行项目开发;掌握使用主流框架开发门户网站、管理系统、移动Web等客户端;掌握Webpack项目构建配置流程;掌握Web项目的部署与发布模式;掌握常见网站业务模块开发等。
五、小程序与APP开发现在移动应用越来越受欢迎，掌握了小程序和APP开发技术可以增强自身竞争力，这就需要掌握小程序的开发基础;能够独立开发小程序项目;能够掌握Canvas的使用;能够掌握小程序的部署与发布;能够掌握小程序开发框架mpvue的使用;掌握第三方AI平台的使用。能够掌握小游戏开发基础;能够独立开发小游戏项目;能够掌握小游戏的部署与发布;能够独立使用ReactNative开发原生App。
视频教程：
网页链接
D. 如何提高网页布局速度
你好，本人拥有三年的前端网页布局工作经验，根据你的回答，其实应该从两方面解答：
第一方面：如果你是一个业余兴趣爱好者，并不想深究网页布局的方方面面，其实你不需要全部都手写完成网页布局，你可以选择DW软件快速帮你实现所见即所得的布局工作，DW快速布局是类似于其他办公可视化编辑软件的步骤，比如插入表格啊，插入DIV块啊，然后可以直接在预览窗体中拖动布局。
另一个方面：就是如果你是一个希望深究或者希望在网页布局上进入专业领域的，还是建议你抛开那些自动排版的工具，老老实实从HTML标签学习开始了解网页，因为自动化的布局方式不适用于复杂的环境，抑或者说不能很好的兼容大部分浏览器，并且也不利于二次布局调整。使用HTML标签和语言在 DW 中使用 代码视图进行 布局才是比较科学的方式，但是建议你应该要遵守W3C标准进行切图写码工作，这样才能保证最少的后期兼容性调整，如果你按照标准方式去写，基本兼容调整的东西是很少的，这样才是本质提高自身水平和提高布局速度的方法！
E. 网站前端开发惯用的布局方式有哪些
网站布局之“厂”字型
所谓的“厂”字型布局结构，就是指页面顶部为横条网站标识和广告条，下方左面为主菜单，右面显示内容的布局。菜单条与背景，整体效果类似“厂”字。“厂”布局是目前最常见的一种网页布局方式。这种布局的优点是页面结构清晰，主次分明。缺点是由于被使用得过多，显得缺乏创意，略显呆板。
网站布局之“三”字型
这种布局多用于国外站点，通常页面上方横向几条色块，将页面整体分割为若干部分，色块中大多放广告图片或者Flash动画。
网站布局之 “国”字型
“国”字型布局通常上下各有一个广告条或者其他栏目条，左面是主菜单，右面放友情链接或者其他栏目等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面显得比较拥挤和局促，不够灵活。
网站布局之门户型
这类网页通常内容多，信息量大，通常没有时显的线条作为边界，图片用得也比较少，一般通过文字的排列产生视觉上的分区效果。
网站布局之区块型
区块型布局现在出现的越来越多，在网页上各个区域具有封闭的边界，经过合理放置显得清晰美观。其缺点是由于片面固定，各区域很难根据其中的内容的多少而调整大小，因此不适宜用于区域内容的长度经常变化的网页。
网站布局之宣传单型
宣传单型布局页面就像一张宣传海报，以一张精美图片作为页面的设计中心，常用于个性类站点。其优点是漂亮吸引人；缺点就是页面中大面积使用图片，导致浏览速度相对较慢。所以这类页面同是可以作为宣传单使用。
F. 【web前端】十分钟彻底弄懂 flex 布局
flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：
其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。
使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴 （main axis），和竖直的 交叉轴 （cross axis）。
主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。
item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。
注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。
flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。
flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。
它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。
决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：
决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：
决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：
决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：
该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：
item 的属性在 item 的 style 中设置，item 共有如下六种属性：
order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。
它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。
定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。
表示 item 在主轴上占据的空间，默认值为 auto。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。
align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。
G. 前端在布局的时候如何做的精确些。
这位网友你好，做网页的话不是截图量距离的，是需要有PSD文件的，也就是UI（通俗点说就是美工）提供的效果图，效果图是可以精确到1像素的，字体也是在PSD图中获取的。
H. 前端之瀑布流布局（多种实现方案）
瀑布流布局，一般指根据内容高度自适应填充到某一列以使整体页面和谐，常见的有图片网站，比如每一行每一列的内容是错开的。
瀑布流布局一般是下面这个样子
css中有这么两个属性:
注意
这也是我推荐大家用第一种方法的最主要原因。
这种方案做出来的效果有点奇葩，特殊的应用场景可能会用到，最终效果是横向瀑布流
flex布局中有一个属性 flex-flow ,指明在哪个方向上在长度不够的情况想拆行，详情大家自己查阅
第一种方法其实是最合适的，也是对开发人员要求最高的，即使有思路与算法在开发过程中也会踩很多坑，比如（1）图片预加载，（2）querySelector取元素居然获取不到，（3）使用box-sizing简化计算过程降低复杂性，等等。 box-sizing 属性用好了非常高效，推荐大家去仔细看看
第二种方法其实也可行，但是不推荐
第三种方法就有点扯了，估计不常用到，大家看看就行
I. 前端设计头部布局,下图该怎么进行头部布局
上+下+中间突出部分绝对定位