1. 前端开发应该知道的几个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;}
2. web前端开发技术DIV+CSS页面布局 5行5列怎么弄
简单写了个例子，你看看就明白了，代码如下：
<html>
<head>
<meta charset="utf-8"/>
<title>用户指南 - 装企</title>
</head>
<body>
<div class="row">
<div class="col">1-1</div>
<div class="col">1-2</div>
<div class="col">1-3</div>
<div class="col">1-4</div>
<div class="col">1-5</div>
</div>
<div class="row">
<div class="col">2-1</div>
<div class="col">2-2</div>
<div class="col">2-3</div>
<div class="col">2-4</div>
<div class="col">2-5</div>
</div>
<div class="row">
<div class="col">3-1</div>
<div class="col">3-2</div>
<div class="col">3-3</div>
<div class="col">3-4</div>
<div class="col">3-5</div>
</div>
<div class="row">
<div class="col">4-1</div>
<div class="col">4-2</div>
<div class="col">4-3</div>
<div class="col">4-4</div>
<div class="col">4-5</div>
</div>
<div class="row">
<div class="col">5-1</div>
<div class="col">5-2</div>
<div class="col">5-3</div>
<div class="col">5-4</div>
<div class="col">5-5</div>
</div>
<style type="text/css">
*{padding: 0;margin: 0;}
.row{width: 1000px;display: flex;margin: 0 auto;}
.row:nth-child(1){background: red;}
.row:nth-child(2){background: dodgerblue;}
.row:nth-child(3){background: yellowgreen;}
.row:nth-child(4){background: grey;}
.row:nth-child(5){background: blueviolet;}
.col{width: 200px;height: 50px;line-height: 50px;border: 1px solid #ffffff;text-align: center;}
</style>
</body>
</html>
效果如下：
demo
3. 前端几种常见的布局方式
1.静态布局（固定宽高）
2.弹性布局（flex）————常用
3.圣杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等
A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量
B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量
C，flex-basis：表示该子元素的初始宽度
4.自适应布局（为不同的屏幕分辨率定义的布局 @media媒体查询技术）
5.流式布局：（宽高用百分比，按屏幕分辨率调整，布局不发生变化）
6.响应式布局（使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式）
7.栅格布局
1）.栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。
使用栅格布局：bootstrap（12列），element（24栏），antDesign
2）.栅格布局
container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙
3）.栅格布局实现响应式布局
8.table布局（使用表格进行页面排版和样式设置）
1）.用法
display:table
display:table-cell，相当于td元素
display:table-row，相当于tr元素
table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决 定；fixed ,固定表格布局。
4. 网站前端开发常用的布局方式有哪些
实现网页布局的方式方法比较多，布局方式可以大概分为这几类。
布局种类：
1、table布局（网页的兴起，1995）
2、Flash布局（自由的黄金时代，1996）
3、div+css（CSS的诞生，1998）
4、栅格与响应式（移动端的兴起，2007与2010）
当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识，建议你选择一本比较不错的HTML5相关书籍（主要看知识逻辑、知识的表达方式，比如《HTML5布局之路》）进行学习，让自己的知识更扎实一些，不然学的零零散散的。
Tips：学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。
5. web前端--网页布局（盒子模式、弹性盒子、网格）
布局的传统解决方案，基于[盒状模型]，于那些特殊布局非常不方便。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2009年诞生的这个属性可以说是不亚于 css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的 float被彻底抛进历史的垃圾堆。
通过display：flex 将对象设置为弹性盒子，以下属性必须熟记于心。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性：
flex-direction（决定主轴的方向）
flex-wrap（决定是否换行）
flex-flow（ <flex-direction> || <flex-wrap>;）
justify-content（主轴方向对齐方式）
align-items（交叉轴方向对齐方式）
align-content（多轴情况下沿交叉轴对齐方式）
项目属性：
order：数值越小，排列越靠前，默认为0。
flex-grow:项目的放大比例，默认为0
flex-shrink:项目的缩小比例，默认为1
flex-basis:项目占据主轴的大小
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self：单个项目有与其他项目不一样的对齐方式
flex-box无疑是布局上面的神器
网格布局同样是布局方面的神器，目前不太常用。
display:grid; 设置网格
必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中
网格属性：
display：grid| subgrid
grid-template-columns：设置列
grid-template-rows：设置行
grid-template-areas：设置区域
grid-template：none | subgrid | <grid-template-rows> / <grid-template-columns>;前面三个属性合体
grid-column-gap：设置列间距
grid-row-gap：设置行间距
grid-gap：<grid-row-gap> <grid-column-gap>;前两个属性合体
justify-items：start | end | center | stretch;设置项目水平方向对齐方式
align-items：start | end | center | stretch;设置项目垂直方向对齐方式
justify-content：start | end | center | stretch | space-around | space-between | space-evenly; 设置网格水平对齐方式
align-content： start | end | center | stretch | space-around | space-between | space-evenly; 设置网格垂直对齐方式
grid-auto-columns：自动补齐列
grid-auto-rows：自动补齐行
grid-auto-flow：row | column | row dense | column dense
grid
网各项属性：
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column：项目放置列
grid-row：项目放置行
grid-area
justify-self
align-self
6. 前端布局的几种方式
1.固定布局，静态布局
传统Web设计，网页上的所有元素的尺寸一律使用px作为单位，网页宽度一般为960px。网页布局始终按照最初写代码时的布局来显示，不受浏览器影响。如果浏览器宽度如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景
2.流式布局
流式布局使用的是百分比，这位网页提供了很强的可塑性和流动性，与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变，这可能导致如果屏幕太大或者太小都会导致元素无法正常显示。
3.自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式，例如宽度960px是一种样式，网页宽度1440px是另一种样式。改变屏幕分辨率可以切换不同的静态局部，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
4.弹性布局
使用em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。这种布局中包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位。默认的文字大小16px就是1em。
5.响应式布局
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，设计方法通常采用了媒体查询+流式布局，使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。为不同终端的用户提供更加舒适的界面和更好的用户体验。
7. 网页制作的结构布局有哪些
布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构：
1.“同”字型结构布局
所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。
这种布局的优点是充分利用版面，页面结构清晰，左右堆成，主次分明，信息量大；缺点是页面拥挤，太规矩呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调缺乏。
2.“国”字型布局
“国”字型布局是在“同”字型布局基础上演化而来的，在保留“同”字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。一般最上面是网站标题及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是在网上见到的最多的一种结构类型。
这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤，四面封闭，令人感到憋气。
3.T型布局
这是一个形象的说法，是指页面的顶部是“网站标志+广告条”，左面是主菜单，右面是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法；缺点是页面呆板，如果不注意细节上的色彩，很容易让人“看之无味”。
4.“三”字型布局
这种布局多用于国外站点，国内用得不多。特点是在页面上有横向两条色块，将页面整体分割为但部分，色块中大多放广告条、更新和版权提示。
5.对比布局
顾名思义，这种布局采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机地结合比较困难。
6.POP布局
POP引自广告术语，是指页面布局像一张宣传海报，一一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页，如果处理得好的话，会给人带来赏心悦目的感觉。
7.Flash布局
这种布局是指整个或大部分幅面的网页本身就是一个Flash动画，它本身就是动态的，画面一般不叫绚丽、有趣，是一种比较新潮的布局方式。其实这与封面型结构是类似的，只是差毕橡这种类型才采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于虚旁传统的多媒体。不同性质的网站，其页面内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。下面简单说明：A、页面标题在站点的没一个页面中都有一个标题，用来提示页面的主要内容，着一信息将出现在浏览器的标题栏中，而不是在页面的布局中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中比较简单
电子商务网站的主页内容布局授课：花小琴常见的网页布局结构国字型布局——国字型布局由同字型布局进化而来，因布局结构与汉字国相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。常见的网页布局结构T型布局——T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。常见的网页布局结构标题正文型——标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。常见的网页布局结构左右框架型布局——左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容常见的网页布局结构上下框架型——上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。常见的网页布局结构综合框架型——综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术常见的网页布局结构POP布局——POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。常见的网页布局结构FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面主体的学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？
对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：
一、自上而下原则
因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词，所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下的显示。
二、从左至右原则
在自上而下的同时，同一行的内容是从左至右渲染，所以在划分结构的时候有从左至右的顺序。
三、一像素原则
这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。
在说完上述三个原则过后有些人就会一味地追求遵循这些原则，比如在划分结构的时候一定要分为上下部分，但是比如下面我截取这个网页的一部分，图片和文字其实是属于一个整体，文字是对图片的说明，所以就不应该分为上下，而应该水平方向划分，每一个图文作为一部分内容，水平分为四部分：
我们说一般网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区），单页并非所有网页都是这样，有些网页没有banner但是初学者容易将header下面那一部分硬划分为banner，有些网页除了这几部分还会有比如icon等区域由喜欢将他们划分到main中去。
说到main区，这个结构划分就多种多样了。有些网页是有一个从左到右通栏的背景色甚至背景图片，这样我们结构的划分也应该有外层一个通栏的盒子，将背景色或者背景图给他，里面再嵌套一个inner盒，给可视区域的固定宽度并居中。如果没有通栏的背景那么这个时候是不需要给通栏的盒子，直接main区给固定宽度居中就好了。
那么在结构划分的时候有些盒子区域之间的空隙怎么去划分这也是初学者最容易犯难的问题。其实严格意义来讲这些空白在结构划分的时候并不会造成影响，因为空白区域在都可以用代码来实现。不过一些文字区域你不能贴着文字的上下来划分，因为文字都是自带行高的。
另外，有些地方可能会有一部分小图片或者一部分内容覆盖在外面大盒子上，这部分在划分结构的时候可以不用管，因为后期在代码实现的时候我们可以利用定位技术实现。
8. 现在前端流行什么页面布局方式
前端常用页面布局分为下面几种：
1.静态布局
给页面元素设置固定的宽度和高罩隐度，单位用px。窗口发生变化时，会出现滚动条，内容会被遮挡。
优点：简单方便，不存在兼容问题。
缺点：网页无法根据用户设备屏幕的宽度进行自适应。
2.流式布局
也叫100%布局。宽度单位为百分比。流式布局常用的设计答孙模板:左侧固定+右侧自适应，左右固定宽度+中间自适应。
优点：可以适应不同尺寸的屏幕
缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定
3.响应式布局
使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综物举厅合方式，为不同屏幕分辨率范围创建流式布局。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：
（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
4.弹性布局
就是采用css3中的flex属性。
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
9. WEB前端怎么布局
在谈WEB前端怎么布局前，我们先梳理前端的布局类型，具体有以下几种：
1.静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2.流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
3.自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4.响应式布局：布局特点是每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
那么我们如何布局呢？通过以下几点来选择布局。
1.如果只做电脑端，最好的选择是静态布局。
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，通过一份css+一份js调节font-size就搞定。
3.如果电脑端，移动端要兼容，而且要求很高，那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。