前端布局小结

来源：互联网发布：oppo手机怎么弄4g网络编辑：程序博客网时间：2024/06/16 03:59

转载自：http://www.dkw1688.com/2017/08/02/hello-world/

前端布局小结

一、居中布局

1.水平居中

行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

.center{

margin:0 auto;

width:300px;

height:200px;

}

不定宽块状元素

①inline-block + text-align

inline-block：ie6、i7不兼容；ie6、i7下可用inline，zoom=1模拟inline-block；

缺点：child中的元素都居中，在child中使用text-align：left。

②table + margin

ie6/7不兼容display：table；可将结构换成table，例如：

③absolute + transform

ie9以上兼容，适合移动端。

④flex + justify-content

ie9以上兼容，适合移动端。

也可以

⑤float + position

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent{float:left;position:relative;left:50%;}

.child{position:relative;left:-50%;}

</style>

</head>

<body>

</div>

</body>

</html>

2.垂直居中

在表单元格中，vertical-align属性会设置单元格内容的对齐方式

vertical-align:middle;

定宽块状元素

单行文本：垂直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的

height:100px;

line-height: 100px;

不定宽块状元素

①table-cell + vertical-align

ie6/7不兼容display：table；可将结构换成table。

②absolute + transform

ie9以上兼容，适合移动端。

③felx + align-items

ie9以上兼容，适合移动端。

3.水平、垂直居中

定宽块状元素

.center{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px

}

这种方法，要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

不定宽块状元素

①inline-block + text-align + table-cell + vertical-align

兼容性较好。

②absolute + transform

ie9以上兼容，适合移动端。

③felx + justify-content + align-items

ie9以上兼容，适合移动端。

4.js实现水平、垂直居中

原理就是通过js设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，以jQuery为例，代码如下：

$(window).resize(function(){

$(“.mydiv”).css({

position: “absolute”,

left: ($(window).width() – $(“.mydiv”).outerWidth())/2,

top: ($(window).height() – $(“.mydiv”).outerHeight())/2

});

此外在页面载入时，就需要调用resize()。

$(function(){

$(window).resize();

});

知识学习：
display

行内元素（inline element）块级元素(block element)特点①不占据一整行，随内容而定，有以下特点：
②不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。
③内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
④也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。常用标签a – 锚点，b – 粗体(不推荐)，br – 换行，em – 强调，font – 字体设定(不推荐)，i – 斜体，img – 图片，input – 输入框，label – 表格标签，select – 项目选择，small – 小字体文本，span – 常用内联容器，定义文本内区块，strike – 中划线，strong – 粗体强调div -最常用的块级元素，dl – 和dt dd搭配使用的块级元素，form – 交互表单，h1 – 大标题，hr – 水平分隔线，ol – 排序表单，p – 段落，ul – 非排序列表

互相转换：使用display设置可以使得行内元素拥有块级元素的特性，反之也可以。

在css中，所有的元素都有盒模型，打开chrome审查任何一个网页的元素都会看到一个盒模型。

Position

用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值： static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的。

absolute对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来

Top的值表示对象上边框与浏览器窗口顶部的距离

bottom 的值表示对象下边框与浏览器窗口底部的距离

两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。

left的值表示对象左边框与浏览器窗口左边的距离

right的值表示对象右边框与浏览器窗口右边的距离

两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

Relative对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置

Top的值表示对象相对原位置向下偏移的距离

bottom的值表示对象相对原位置向上偏移的距离

两者同时存在时，只有Top起作用。

left的值表示对象相对原位置向右偏移的距离

right的值表示对象相对原位置向左偏移的距离

两者同时存在时，只有left起作用。

在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

vertical-align的解读
W3C上对vertical-align的定义,大体上可以分为两个部分：
第一种用法，“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。

第二种用法，“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”可以打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：

如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

比如，img和span一起出现，要想文字对齐图片的中间位置，就需要为图片添加img{vertical-align:middle;}
再比如input和span连用时，谷歌火狐IE8以上版本里默认的是span在input的中间位置，但ie6/ie7里，span底部和input底部对齐，实现统一的办法就是给input添加input{vertical-align:middle;}，要想它们垂直方向上的中线对齐，就同时也为span设置span{vertical-align:middle;}

二、多列布局

1、一列定宽 + 一列自适应

①float + margin

兼容ie6

兼容性好。

②float + overflow

不兼容ie6。

③table

兼容ie8及以上。

④flex

适用于小范围布局；兼容性：Internet Explorer 9及更早IE版本不支持弹性框.

2、多列定宽 + 一列自适应

定宽列样式基本相同。

3、不定宽（可以随内容的宽度改变宽度） + 一列自适应

这样的布局，自适应那部分的样式应不涉及宽度相关设置

①float + overflow

②table

③flex

4、多列不定宽 + 一列自适应

不定宽列样式基本相同。

三、等列布局

1、C+G=（W+G）*N

效果：

如果都是定宽可以设置浮动，2,3,4列margin-left。不定：

思想：增加一个间距。不难得出公式。

2、float

缺点：样式与结构藕合性较强

3、table

样式与结构藕合性低

4、flex

2、3、4margin-left,flex特性自动平均分配。

四、内容不同时，背景等高

1、table（自身等高）

没有间距，将background-clip:content-box.

2、felx（默认等高）

align-items侧轴对齐伸缩项目，默认stretch：伸缩项目拉伸，填满整个侧轴。

3、float（伪等高）

原理：设置margin，并隐藏。

页面布局很重要，要合理规划。

页面背景图在iphone和ipad ipadpro下布局效果一样，实现了等比例缩放

通过在父标签container下添加img标签，<img src="../images/v4.2/aboutUs/addcard.png" width="86.7%" />，可以实现。

如果在标签的css样式里设置背景图，则不会实现等比例缩放效果。

可以使用媒体查询来适配应不同尺寸的移动设备

@media only screen and (min-width: 750px) and (max-width: 640px){

}

阅读全文

0 0